面试题：JavaScript内存管理与性能优化

JavaScript垃圾回收机制

标记清除算法：这是JavaScript中最常用的垃圾回收算法。当变量进入执行环境（例如函数被调用）时，标记为“进入环境”，离开执行环境时，标记为“离开环境”。垃圾回收器在运行时会给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中的变量引用的变量的标记，而那些仍然带有标记的变量被视为准备删除的变量，因为环境中的变量无法访问到它们。最后，垃圾回收器会释放这些带标记变量所占用的内存空间。
引用计数算法：曾经在一些早期浏览器中使用。此算法跟踪记录每个值被引用的次数。当声明一个变量并给它赋值一个引用类型的值时，这个值的引用次数就是1；如果同一个值又被赋给另一个变量，那么引用次数加1；相反，如果包含对这个值引用的变量又取得了另外一个值，那么这个值的引用次数减1。当这个值的引用次数变为0时，说明没有办法再访问这个值了，因此就可以将其占用的内存空间回收回来。但引用计数算法有一个典型的循环引用问题，例如对象A引用对象B，对象B也引用对象A，即使它们从外部代码无法访问，但引用计数永远不会为0，导致内存无法回收。现代JavaScript引擎已经很少使用这种算法。

可能导致内存泄漏的场景

闭包引起的内存泄漏：闭包是指有权访问另一个函数作用域中变量的函数。如果闭包的作用域链中保存着对一些对象的引用，而这些对象在外部代码中不再需要，但由于闭包的存在，它们的引用计数不会为0，垃圾回收器无法回收这些对象所占用的内存，从而导致内存泄漏。例如：

function outer() {
    let largeObject = { /* 占用大量内存的对象 */ };
    return function inner() {
        console.log(largeObject);
    };
}
let innerFunc = outer();
// 这里即使outer函数执行完毕，largeObject本应可被回收，但由于innerFunc闭包的存在，它仍被引用，无法回收

DOM引用引起的内存泄漏：当JavaScript代码持有对DOM元素的引用，但该DOM元素从页面中移除时，如果没有及时清除这些引用，那么该DOM元素及其所有子元素占用的内存都无法被回收，导致内存泄漏。例如：

let element = document.getElementById('myElement');
// 假设之后该元素从页面移除，但element变量仍持有引用
document.body.removeChild(element);
// 此时element引用的DOM对象内存无法回收

事件绑定引起的内存泄漏：如果给DOM元素添加事件监听器，而在元素被移除时没有移除对应的事件监听器，那么事件监听器函数以及它所引用的对象都无法被回收，造成内存泄漏。例如：

let button = document.getElementById('myButton');
function clickHandler() {
    console.log('Button clicked');
}
button.addEventListener('click', clickHandler);
// 假设之后button元素从页面移除，但clickHandler事件监听器未移除
document.body.removeChild(button);
// 此时clickHandler及其引用的对象内存无法回收

避免内存泄漏的代码优化方法

针对闭包：在使用闭包时，确保在闭包不再需要时，手动解除对不再使用对象的引用。例如，在上面的例子中，可以在合适的时机将innerFunc赋值为null，切断闭包对largeObject的引用：

function outer() {
    let largeObject = { /* 占用大量内存的对象 */ };
    return function inner() {
        console.log(largeObject);
    };
}
let innerFunc = outer();
// 当不再需要innerFunc时
innerFunc = null;
// 这样largeObject就可能被垃圾回收器回收

针对DOM引用：当DOM元素从页面移除时，同时清除对该元素的引用。例如：

let element = document.getElementById('myElement');
// 假设之后该元素从页面移除
document.body.removeChild(element);
// 清除引用
element = null;
// 此时该DOM对象可能被回收

针对事件绑定：在移除DOM元素之前，先移除绑定的事件监听器。例如：

let button = document.getElementById('myButton');
function clickHandler() {
    console.log('Button clicked');
}
button.addEventListener('click', clickHandler);
// 移除按钮前，移除事件监听器
button.removeEventListener('click', clickHandler);
document.body.removeChild(button);
// 这样事件监听器及其引用对象可被回收

通过这些优化措施，可以有效避免JavaScript中的内存泄漏，提升应用程序的整体性能。

星途面试题库

面试题：JavaScript内存管理与性能优化

知识考点

面试题答案

JavaScript垃圾回收机制

可能导致内存泄漏的场景

避免内存泄漏的代码优化方法