如何避免JavaScript中的内存泄漏？
来源 | OSCHINA 社区
作者 | 葡萄城技术团队
原文链接：https://my.oschina.net/powertoolsteam/blog/10122640
前言
过去，我们浏览静态网站时无须过多关注内存管理，因为加载新页面时，之前的页面信息会从内存中删除。然而，随着单页 Web 应用（SPA）的兴起，应用程序消耗的内存越来越多，这不仅会降低浏览器性能，甚至会导致浏览器卡死。因此，在编码实践中，开发人员需要更加关注与内存相关的内容。因此，小编今天将为大家介绍 JavaScript 内存泄漏的编程模式，并提供一些内存管理的改进方法。什么是内存泄漏以及如何发现它？为未声明的变量赋值
使用 this 指向全局对象。
function createGlobalVariables() {
leaking1 = 'I leak into the global scope'; // 为未声明的变量赋值
this.leaking2 = 'I also leak into the global scope'; // 使用this指向全局对象
};
createGlobalVariables();
window.leaking1;
window.leaking2;
function outer() {
const potentiallyHugeArray = [];
return function inner() {
potentiallyHugeArray.push('Hello'); // function inner is closed over the potentiallyHugeArray variable
console.log('Hello');
};
};
const sayHello = outer(); // contains definition of the function inner
function repeat(fn, num) {
for (let i = 0; i < num; i++){
fn();
}
}
repeat(sayHello, 10); // each sayHello call pushes another 'Hello' to the potentiallyHugeArray
// now imagine repeat(sayHello, 100000)
function setCallback() {
const data = {
counter: 0,
hugeString: new Array(100000).join('x')
};
return function cb() {
data.counter++; // data object is now part of the callback's scope
console.log(data.counter);
}
}
setInterval(setCallback(), 1000); // how do we stop it?
注意定时器回调引用的对象。
必要时取消定时器。
function setCallback() {
// 'unpacking' the data object
let counter = 0;
const hugeString = new Array(100000).join('x'); // gets removed when the setCallback returns
return function cb() {
counter++; // only counter is part of the callback's scope
console.log(counter);
}
}
const timerId = setInterval(setCallback(), 1000); // saving the interval ID
// doing something ...
clearInterval(timerId); // stopping the timer i.e. if button pressed
通过 removeEventListener () 移除。
相关联的 DOM 元素被移除。
const hugeString = new Array(100000).join('x');
document.addEventListener('keyup', function() { // anonymous inline function - can't remove it
doSomething(hugeString); // hugeString is now forever kept in the callback's scope
});
那么如何避免这种情况呢？可以通过 removeEventListener () 释放监听器：
function listener() {
doSomething(hugeString);
}
document.addEventListener('keyup', listener); // named function can be referenced here...
document.removeEventListener('keyup', listener); // ...and here
如果事件监听器只需要运行一次，addEventListener () 可以带有第三个参数，一个提供附加选项的对象。只要将 {once: true} 作为第三个参数传递给 addEventListener ()，监听器将在事件处理一次后自动删除。
document.addEventListener('keyup', function listener() {
doSomething(hugeString);
}, {once: true}); // listener will be removed after running once
let user_1 = { name: "Peter", id: 12345 };
let user_2 = { name: "Mark", id: 54321 };
const mapCache = new Map();
function cache(obj){
if (!mapCache.has(obj)){
const value = `${obj.name} has an id of ${obj.id}`;
mapCache.set(obj, value);
return [value, 'computed'];
}
return [mapCache.get(obj), 'cached'];
}
cache(user_1); // ['Peter has an id of 12345', 'computed']
cache(user_1); // ['Peter has an id of 12345', 'cached']
cache(user_2); // ['Mark has an id of 54321', 'computed']
console.log(mapCache); // ((…) => "Peter has an id of 12345", (…) => "Mark has an id of 54321")
user_1 = null; // removing the inactive user
// Garbage Collector
console.log(mapCache); // ((…) => "Peter has an id of 12345", (…) => "Mark has an id of 54321") // first entry is still in cache
let user_1 = { name: "Peter", id: 12345 };
let user_2 = { name: "Mark", id: 54321 };
const weakMapCache = new WeakMap();
function cache(obj){
// ...same as above, but with weakMapCache
return [weakMapCache.get(obj), 'cached'];
}
cache(user_1); // ['Peter has an id of 12345', 'computed']
cache(user_2); // ['Mark has an id of 54321', 'computed']
console.log(weakMapCache); // ((…) => "Peter has an id of 12345", (…) => "Mark has an id of 54321"}
user_1 = null; // removing the inactive user
// Garbage Collector
console.log(weakMapCache); // ((…) => "Mark has an id of 54321") - first entry gets garbage collected
往期推荐
Linus曾给Windows 7热情点赞
云原生 IDE 将成为常态
优先展示冒牌货且定向至恶意软件，网友：是时候摆脱Google了
活动推荐
10 月 28 日，本周六，源创会苏州站暨 Techo TVP 技术沙龙将正式拉开帷幕。
这一次，我们以“寻宝 AI 时代”为主题，希望能给每一位开发者新的启发，一起在 AI 新时代更上一层楼。同时，我们将沙龙地点定在了轰趴馆，希望各位玩得开心！
快扫描下方二维码，或点击文末“阅读原文”即刻报名 🎁🎁
阅读原文立即报名>>