前端面试题宝典

内存泄漏：深入剖析与优化实践

简介：技术干货
可前往公众号查看原文：前端面试，关注公众号，查看最新面经和技术文章哦~

哈喽大家好，今天这篇文章由uncle13提供。

前端内存泄漏是开发中常见的一类性能问题，它会导致内存持续增长，最终消耗所有可用内存，严重影响页面性能，甚至造成应用崩溃。为了深入理解并解决前端内存泄漏问题，本文将从内存泄漏的概念、常见原因、检测方法、优化策略等方面进行详细介绍。

一、内存泄漏

内存泄漏指的是程序中不再使用的内存没有及时释放，导致内存持续增长的现象。在前端开发中，内存泄漏通常发生在JavaScript代码与DOM交互的过程中，由于不当的引用管理或资源释放不及时，导致内存无法得到有效回收。

二、内存泄漏的常见原因

  1. 意外的全局变量：

    • 在JavaScript中，如果未使用var、let或const关键字声明变量，该变量将默认为全局变量。
    • 全局变量在整个页面生命周期内都存在，即使不再需要，也无法被垃圾回收器回收。

  2. 闭包的不当使用：

    • 闭包允许函数访问其词法作用域之外的变量。
    • 如果闭包持有对外部变量的引用，而这些变量在闭包之外不再需要，这些变量将无法被垃圾回收。

  3. 未清理的DOM引用：

    • 当JavaScript代码引用DOM元素时，即使这些元素已经从DOM树中移除，只要JavaScript代码仍然持有对它们的引用，这些元素就无法被垃圾回收。

  4. 未清除的定时器或事件监听器：

    • 使用setInterval、setTimeout设置的定时器，或addEventListener添加的事件监听器，如果没有在适当的时候清除，它们将继续占用内存。

  5. iframe未及时销毁：

    • <iframe>元素会创建独立的DOM和JavaScript环境。
    • 如果在不再使用iframe时没有及时销毁，iframe中的内容和JavaScript上下文会持续占用内存。

  6. 第三方库或框架的泄漏：

    • 使用的第三方库或框架可能存在内存泄漏问题。
    • 如果未及时更新这些库或框架，或者未正确使用它们提供的API，也可能导致内存泄漏。

三、前端内存泄漏的检测方法

  1. 使用浏览器的开发者工具：

    • 现代浏览器（如Chrome、Firefox）的开发者工具提供了强大的内存分析功能。
    • 可以使用Heap Snapshot（堆内存快照）来查看对象的内存占用情况，使用Allocation Instrumentation on Timeline（时间线内存分配记录）来观察内存分配情况。

  2. 编写内存泄漏检测脚本：

    • 开发者可以编写脚本来模拟用户的操作，并监控内存使用情况。
    • 通过比较操作前后的内存占用情况，可以判断是否存在内存泄漏。

  3. 使用内存泄漏检测工具：

    • 除了浏览器的开发者工具外，还有一些专门的内存泄漏检测工具，如LeakCanary（Web版）、MemLab（Facebook开源工具）等。

四、内存泄漏的优化策略

1，避免创建全局变量：
错误示例：
  1. 未声明变量：在JavaScript中，如果未使用var、let或const关键字声明变量，该变量将默认为全局变量。例如：
function fn() {
    a = 'hello'; // a成为了全局变量
}
fn();

在上述代码中，变量a未使用var、let或const声明，因此成为了全局变量。

  1. 使用this创建的变量：在函数中，如果this的指向是window（在浏览器环境中），那么使用this创建的变量也将成为全局变量。例如：
function fn() {
    this.a = 'hello'; // this指向window，因此a成为了全局变量
}
fn();
  1. 在全局作用域中声明变量：在全局作用域中直接使用var声明的变量也是全局变量。例如：
var a = 'hello'; // a是全局变量
解决方案：
  1. 使用var、let或const声明变量：在函数内部或块级作用域内使用var、let或const关键字声明变量，以避免创建全局变量。例如：
function fn() {
    let a = 'hello'; // a是局部变量
}
fn();

  1. 避免在全局作用域中声明变量：尽量在函数内部或模块内部声明变量，以减少全局变量的使用。如果确实需要在全局作用域中声明变量，可以考虑使用命名空间或立即执行函数表达式（IIFE）来封装变量。

  2. 启用严格模式：在JavaScript文件头部或函数的顶部加上'use strict'，启用严格模式。严格模式可以帮助开发者避免一些常见的编码错误，包括意外创建全局变量。例如：

'use strict';
function fn() {
    a = 'hello'; // 这将引发错误，因为严格模式下不允许未声明的变量赋值
}
fn();
优化示例：
  1. 使用局部变量代替全局变量：将全局变量封装在函数或模块内部，使用局部变量来代替全局变量。这不仅可以减少内存泄漏的风险，还可以提高代码的模块化和可维护性。例如：
function processData() {
    let data = loadData(); // data是局部变量
    // 对数据进行处理
}
  1. 使用命名空间封装全局变量：如果确实需要使用全局变量，可以考虑使用命名空间来封装这些变量，以避免变量名冲突和内存泄漏。例如：
var MyApp = MyApp || {}; // 创建一个命名空间MyApp
MyApp.data = { // 在命名空间中声明变量
    user: null,
    settings: {}
};
  1. 使用立即执行函数表达式（IIFE）：使用立即执行函数表达式（IIFE）来封装变量和函数，以避免它们成为全局变量。IIFE可以立即执行并返回一个对象或函数，从而将其内部声明的变量和函数封装在局部作用域内。例如：
(function() {
    var privateVar = 'I am private';
    function privateFunction() {
        console.log(privateVar);
    }
    window.publicAPI = { // 暴露一个公共API到全局作用域
        callPrivateFunction: privateFunction
    };
})();
// 使用publicAPI调用privateFunction
window.publicAPI.callPrivateFunction(); // 输出: I am private
2，正确管理闭包：
错误示例：
function createClosure() {
    const data = '敏感数据'; // 外部作用域变量
    return function() {
        console.log(data); // 闭包访问外部作用域的变量
    };
}

const closure = createClosure(); // 创建闭包
// 此时，closure 保留了对 data 的引用，即使 createClosure 函数已经执行完毕

在这个示例中，createClosure 函数返回了一个闭包，该闭包持有了对外部作用域变量 data 的引用。由于这个引用存在，data 变量就无法被垃圾回收器回收，即使 createClosure 函数已经执行完毕。如果这种情况多次发生，就会导致内存泄漏。

解决方案：

为了解决闭包导致的内存泄漏问题，可以采取以下方案：

  1. 手动解除引用：在不再需要闭包时，可以手动解除它对外部作用域的引用。例如，将闭包变量设置为 null。
function createClosure() {
    const data = '敏感数据';
    return function() {
        console.log(data);
    };
}

let closure = createClosure(); // 创建闭包
// 使用闭包进行一些操作...
closure = null; // 手动解除引用，允许垃圾回收器回收 data 变量
  1. 使用弱引用（在某些情况下）：在ES6中，可以使用 WeakMap 或 WeakSet 来存储弱引用。这些数据结构不会阻止垃圾回收器回收不再需要的对象。然而，需要注意的是，WeakMap 和 WeakSet 的键只能是对象，不能是原始值。
优化示例：
function createClosure(data) {
    return function() {
        console.log(data);
    };
}

// 使用时传递需要的数据，而不是在闭包中持有不必要的引用
const closure = createClosure('敏感数据');
// 使用闭包进行一些操作...
// 由于数据是作为参数传递的，因此不需要在闭包中持有对外部作用域的引用
// 当闭包不再需要时，它会自动被垃圾回收器回收（假设没有其他引用）

在这个优化后的示例中，createClosure 函数接受一个参数 data，并返回一个闭包。这个闭包不再持有对外部作用域的引用，而是直接使用传递进来的参数 data。这样，当闭包不再需要时，它就可以被垃圾回收器回收，从而避免了内存泄漏。

3，清理DOM引用：

前端内存泄漏中的DOM引用问题是一个常见的性能瓶颈。当JavaScript代码引用DOM元素时，如果这些元素已经从DOM树中移除，但JavaScript代码仍然持有对它们的引用，这些元素就无法被垃圾回收器回收，从而导致内存泄漏。以下是对前端内存泄漏中清理DOM引用的详细介绍，包括错误示例、解决方案以及优化示例。

错误示例：

示例一：未清除DOM引用

var elements = {
    btn: document.getElementById('btn')
};

function doSomeThing() {
    elements.btn.click();
}

function removeBtn() {
    // 将body中的btn移除，也就是移除DOM树中的btn
    document.body.removeChild(document.getElementById('button'));
    // 但是此时全局变量elements还是保留了对btn的引用，btn还是存在于内存中，不能被GC回收
}

在这个示例中，虽然btn元素已经从DOM树中移除，但全局变量elements仍然持有对它的引用，导致btn元素无法被垃圾回收器回收。

解决方案：

要解决这个问题，需要在移除DOM元素的同时，清除对它的引用。例如：

function removeBtn() {
    var btn = document.getElementById('button');
    if (btn) {
        document.body.removeChild(btn);
        // 清除对btn的引用
        elements.btn = null;
    }
}

在这个修改后的示例中，当removeBtn函数被调用时，它会首先获取btn元素的引用，然后将其从DOM树中移除，并清除全局变量elements中对它的引用。

优化示例：
使用局部变量代替全局变量

为了避免全局变量导致的内存泄漏问题，可以使用局部变量来代替全局变量。例如：

function handleClick() {
    var btn = document.getElementById('btn');
    if (btn) {
        btn.click();
    }
}

function removeBtn() {
    var btn = document.getElementById('button');
    if (btn) {
        document.body.removeChild(btn);
        // 无需清除对btn的引用，因为它是局部变量，函数执行完毕后会自动销毁
    }
}

在这个示例中，handleClick和removeBtn函数都使用了局部变量来引用DOM元素，避免了全局变量的使用，从而减少了内存泄漏的风险。

在组件卸载时清除DOM引用

在前端框架（如React、Vue等）中，组件卸载时是一个清理资源的好时机。可以在组件卸载时清除对DOM元素的引用。例如，在Vue中：

<template>
  <div>
    <button ref="myButton">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$refs.myButton.click();
    }
  },
  beforeDestroy() {
    // 清除对DOM元素的引用
    this.$refs.myButton = null;
  }
}
</script>
4，清除定时器或事件监听器：
错误示例：
1. 未清除的定时器

当使用setInterval或setTimeout设置定时器时，如果在定时器不再需要时没有及时清除，它们将继续占用内存。例如：

let timer;
function startTimer() {
    timer = setInterval(function() {
        // 一些操作
    }, 1000);
}
startTimer();
// 忘记清理定时器

在上述代码中，timer定时器在startTimer函数被调用后设置，但如果没有在适当的时候调用clearInterval(timer)或clearTimeout(timer)（对于setTimeout）来清除定时器，它将一直运行并占用内存。

2. 未移除的事件监听器

类似地，当使用addEventListener给DOM元素添加事件监听器时，如果忘记在不再需要时移除它们，这些事件监听器将继续持有对DOM元素的引用，阻碍垃圾回收器释放相关内存。例如：

const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
    // 一些操作
});
// 忘记删除事件处理器

在上述代码中，给button元素添加了一个点击事件监听器，但如果没有在适当的时候使用removeEventListener来移除它，该监听器将继续存在并占用内存。

解决方案：
1. 清除定时器

为了确保定时器在不再需要时能够被清除，可以在组件卸载或页面关闭时调用clearInterval或clearTimeout。例如：

let timer;
function startTimer() {
    timer = setInterval(function() {
        // 一些操作
    }, 1000);
}

// 在组件卸载或页面关闭时清除定时器
function stopTimer() {
    clearInterval(timer);
}
2. 移除事件监听器

为了移除不再需要的事件监听器，可以在添加监听器时保存一个引用，并在适当的时候使用removeEventListener来移除它。例如：

const button = document.querySelector('#myButton');
const clickHandler = function() {
    // 一些操作
};

button.addEventListener('click', clickHandler);

// 在不再需要时移除事件监听器
button.removeEventListener('click', clickHandler);
优化示例：
1. 使用生命周期钩子（针对前端框架）

在Vue、React等前端框架中，可以利用组件的生命周期钩子来管理定时器和事件监听器。例如，在Vue组件中，可以在beforeDestroy钩子中清除定时器和移除事件监听器：

<template>
    <button @click="handleClick">Click me</button>
</template>

<script>
export default {
    data() {
        return {
            timer: null,
        };
    },
    methods: {
        startTimer() {
            this.timer = setInterval(() => {
                // 一些操作
            }, 1000);
        },
        handleClick() {
            // 处理点击事件
        },
    },
    mounted() {
        this.startTimer();
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        clearInterval(this.timer);
        window.removeEventListener('resize', this.handleResize);
    },
};
</script>

在上述Vue组件中，startTimer方法在mounted钩子中被调用以设置定时器，window.addEventListener用于添加窗口大小改变事件监听器。在beforeDestroy钩子中，使用clearInterval清除定时器，并使用removeEventListener移除事件监听器。

2. 使用立即执行函数（IIFE）或模块化

为了避免全局变量的污染和内存泄漏的风险，可以使用立即执行函数（IIFE）或模块化来封装代码和变量。例如：

(function() {
    let timer = setInterval(() => {
        // 一些操作
    }, 1000);

    // 在适当的时候清除定时器
    window.onbeforeunload = function() {
        clearInterval(timer);
    };
})();

或者使用ES6的模块化语法：

// timer.js
export function startTimer() {
    let timer = setInterval(() => {
        // 一些操作
    }, 1000);

    return timer;
}

export function stopTimer(timer) {
    clearInterval(timer);
}

// main.js
import { startTimer, stopTimer } from './timer.js';

let timer = startTimer();

// 在适当的时候停止定时器
window.onbeforeunload = function() {
    stopTimer(timer);
};
5，销毁不再使用的iframe：
错误示例：
1. 未及时销毁iframe

在前端开发中，有时会动态创建iframe元素用于加载外部内容或作为应用的一部分。然而，当这些iframe不再需要时，如果没有及时从DOM中移除并销毁，它们将继续占用内存。

// 动态创建一个iframe
let iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
document.body.appendChild(iframe);

// ... 一些操作后，iframe不再需要
// 但未从DOM中移除或销毁iframe

在上述代码中，iframe元素被动态创建并添加到DOM中，但在不再需要时，没有执行任何操作来移除或销毁它，导致内存泄漏。

解决方案：
1. 从DOM中移除iframe

为了销毁iframe，首先需要从DOM中移除它。这可以通过调用父节点的removeChild方法来实现。

例如：

// 获取iframe元素
let iframe = document.querySelector('iframe');

// 从DOM中移除iframe
if (iframe) {
    iframe.parentNode.removeChild(iframe);
}
2. 清理iframe相关资源

有时，iframe可能加载了第三方库或内容，这些库或内容可能需要在销毁iframe之前进行清理。例如，如果iframe加载了Google Maps库，可能需要调用该库的destroy方法来清理资源。

此外，如果iframe上绑定了事件监听器，也需要在销毁iframe之前移除它们，以避免内存泄漏。

// 假设iframe上绑定了load事件监听器
iframe.removeEventListener('load', handleLoad);

// 清理iframe加载的第三方库资源（如果适用）
if (iframe.contentWindow && iframe.contentWindow.someLibrary) {
    iframe.contentWindow.someLibrary.destroy();
}

// 从DOM中移除iframe
iframe.parentNode.removeChild(iframe);
优化示例：

在Vue等前端框架中，可以利用生命周期钩子来管理iframe的创建和销毁。以下是一个在Vue组件中管理iframe的示例：

<template>
  <div>
    <iframe ref="myIframe" :src="iframeSrc" @load="onIframeLoad"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeSrc: 'https://example.com',
    };
  },
  methods: {
    onIframeLoad() {
      console.log('Iframe loaded');
      // 可能需要的其他初始化代码
    },
    destroyIframe() {
      const iframe = this.$refs.myIframe;
      if (iframe) {
        // 移除事件监听器
        iframe.removeEventListener('load', this.onIframeLoad);

        // 清理iframe加载的第三方库资源（如果适用）
        // if (iframe.contentWindow && iframe.contentWindow.someLibrary) {
        //   iframe.contentWindow.someLibrary.destroy();
        // }

        // 从DOM中移除iframe
        iframe.parentNode.removeChild(iframe);
      }
    },
  },
  beforeDestroy() {
    this.destroyIframe();
  },
};
</script>

  1. 更新第三方库或框架：

    • 定期更新使用的第三方库或框架，以确保它们不包含已知的内存泄漏问题。
    • 仔细阅读文档，正确使用它们提供的API。

  2. 优化代码逻辑：

    • 通过优化代码逻辑，减少不必要的内存占用。
    • 例如，使用数据懒加载、组件懒加载等技术来降低内存使用。

最后

还没有使用过我们刷题网站（https://fe.ecool.fun/）或者刷题小程序的同学，如果近期准备或者正在找工作，千万不要错过，题库主打题全和更新快哦~。

有会员购买、辅导咨询的小伙伴，可以通过下面的二维码，联系我们的小助手。