- 全局变量
function foo() {
this.bar2 = "默认绑定this指向全局"; // 全局变量=> window.bar2
bar = "全局变量"; // 没有声明变量 实际上是全局变量=>window.bar
}
解决方案:
//方法1
function foo() {
this.bar2 = "默认绑定this指向全局";
let bar = "全局变量"; //改为局部变量
}
//方法2
function foo() {
this.bar2 = "默认绑定this指向全局";
bar = "全局变量";
}
window.bar = null; //手动释放
delete window.bar2;
- 定时器和回调函数
let someResource = getData();
setInterval(function() {
let node = document.getElementById('Node');
if(node) {
node.innerHTML = JSON.stringify(someResource));
// 定时器也没有清除
}
// node、someResource 存储了大量数据 无法回收
}, 1000);
解决方案:
let someResource = getData();
let timer=setInterval(function() {
let node = document.getElementById('Node');
if(node) {
node.innerHTML = JSON.stringify(someResource));
clearInterval(timer)
}
}, 1000);
- 闭包
function bindEvent() {
var obj = document.createElement("XXX");
var unused = function () {
console.log(obj, "闭包内引用obj obj不会被释放");
};
/*解决方案*/
obj = null;
}
var theThing = null;
var replaceThing = function () {
var originalThing = theThing;
var unused = function () {
if (originalThing)
console.log("hi");
};
theThing = {
longStr: new Array(1000000).join('*'),
someMethod: function () {
console.log(someMessage);
}
};
/*解决方案*/
originalThing =null
};
4.dom泄漏
var refA = document.getElementById('refA');
document.body.removeChild(refA); // dom删除了
console.log(refA, "refA"); // 但是还存在引用 能console出整个div 没有被回收
解决办法:refA = null;
- console.log引起的内存泄漏
慎用console.log
5.echarts引起的内存泄漏
beforeDestroy() {
let echartsMap = echarts.init(document.getElementById("lineEcharts"));
if (echartsMap) {
echartsMap.dispose();
}
},
5.EventListener
function addLeak () {
var leakObject = new LeakObject();
window.onresize = function () {
console.log(leakObject.value.length);
};
}
解决方案:
window.onresize = null;
附: js严格模式
function strict() {
// 函数级别严格模式语法
'use strict';
function nested() {
return "And so am I!";
}
return "Hi! I'm a strict mode function! " + nested();
}
参考文档:
常见会导致内存泄漏问题及优化
Vue内存泄漏优化
彻底掌握js内存泄漏以及如何避免
javascript常见的内存泄漏
网友评论