javascript内存泄漏的原因有哪些-前端问答-PHP中文网

javascript内存泄漏的原因有哪些

青灯夜游

发布： 2021-11-19 16:37:51

原创

4356人浏览过

javascript内存泄漏的原因：1、全局变量使用不当；2、闭包使用不当；3、延时器或定时器没有被清除；4、没有清理的dom元素引用（dom清空或删除时，事件未清除）。

javascript内存泄漏的原因有哪些

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。即指由于疏忽或错误造成程序未能释放已经不再使用的内存。 内存泄漏并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费。这里就讲一些常见会带来内存泄露的原因。

1. 全局变量

JavaScript可以处理没有声明的变量：一个未声明的变量的引用在全局对象中创建了一个新变量。在浏览器的环境中，全局对象是window。

function foo(){
  name = &#39;前端曰&#39;；
}
// 其实是把name变量挂载在window对象上
function foo(){
  window.name = &#39;前端曰&#39;；
}

// 又或者
function foo(){
  this.name = &#39;前端曰&#39;；
}
foo() // 其实这里的this就是指向的window对象

登录后复制

这样无意中一个意外的全局变量就被创建了，为了阻止这种错误发生，在你的Javascript文件最前面添加 ‘use strict;’ 。这开启了解析JavaScript的阻止意外全局的更严格的模式。或者自己注意好变量的定义！

2. 闭包

闭包：匿名函数可以访问父级作用域的变量。

var names = (function(){  
    var name = &#39;js-say&#39;;
    return function(){
        console.log(name);
    }
})()

登录后复制

闭包会造成对象引用的生命周期脱离当前函数的上下文，如果闭包使用不当，可以导致环形引用（circular reference），类似于死锁，只能避免，无法发生之后解决，即使有垃圾回收也还是会内存泄露。

3. 被遗忘的延时器/定时器

在我们的日常需求中，可能会经常试用到 setInterval/setTimeout ，但是使用完之后通常忘记清理。

var someResource = getData(); 
setInterval(function() { 
    var node = document.getElementById(&#39;Node&#39;); 
    if(node) { 
        // 处理 node 和 someResource 
        node.innerHTML = JSON.stringify(someResource)); 
    } 
}, 1000);

登录后复制

setInterval/setTimeout 中的 this 指向的是window对象，所以内部定义的变量也挂载到了全局；if 内引用了 someResource 变量，如果没有清除 setInterval/setTimeout 的话someResource 也得不到释放；同理其实 setTimeout 也一样。所以我们用完需要记得去 clearInterval/clearTimeout。

4、没有清理的DOM元素引用（dom清空或删除时，事件未清除）

var elements = {
    button: document.getElementById(&#39;button&#39;),
    image: document.getElementById(&#39;image&#39;),
    text: document.getElementById(&#39;text&#39;)
};
function doStuff() {
    image.src = &#39;http://some.url/image&#39;;
    button.click();
    console.log(text.innerHTML);
}
function removeButton() {
    document.body.removeChild(document.getElementById(&#39;button&#39;));
    // 此时，仍旧存在一个全局的 #button 的引用
    // elements 字典。button 元素仍旧在内存中，不能被 GC 回收。
}

登录后复制

【推荐学习：javascript高级教程】

以上就是javascript内存泄漏的原因有哪些的详细内容，更多请关注php中文网其它相关文章！