常见的 JavaScript 内存泄露

时间:2023-01-20 14:54:34

什么是内存泄露

指由于疏忽或错误造成程序未能释放已经不再使用的内存。内存泄漏并非指内存在物理上的消失,

而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制,从而造成了内存的浪费。

1、意外的全局变量

JavaScript对未声明变量的处理方式:在全局对象上创建该变量的引用(即全局对象上的属性,不是变量,因为它能通过 delete删除)。如果在浏览器中,全局对象就是window对象。

如果未声明的变量缓存大量的数据,会导致这些数据只有在窗口关闭或重新刷新页面时才能被释放。这样会造成意外的内存泄漏。

function foo(arg) {

   bar = "this is a hidden global variable with a large of data";

}

  

等同于:

function foo(arg) {

   window.bar = "this is an explicit global variable with a large of data";

}

  

另外,通过this创建意外的全局变量:

function foo() {

   this.variable = "potential accidental global";

}


// 当在全局作用域中调用foo函数,此时this指向的是全局对象(window),而不是'undefined'

foo();

  

解决方法:

在JavaScript文件中添加 'use strict',开启严格模式,可以有效地避免上述问题。

function foo(arg) {

   "use strict" // 在foo函数作用域内开启严格模式

   bar = "this is an explicit global variable with a large of data";// 报错:因为bar还没有被声明

}

  

如果需要在一个函数中使用全局变量,可以像如下代码所示,在window上明确声明:

function foo(arg) {

   window.bar = "this is a explicit global variable with a large of data";

}

这样不仅可读性高,而且后期维护也方便

谈到全局变量,需要注意那些用来临时存储大量数据的全局变量,确保在处理完这些数据后将其设置为null或重新赋值。

全局变量也常用来做cache,一般cache都是为了性能优化才用到的,为了性能,最好对cache的大小做个上限限制。

因为cache是不能被回收的,越高cache会导致越高的内存消耗。

 

2、console.log

console.log:向web开发控制台打印一条消息,常用来在开发时调试分析。有时在开发时,需要打印一些对象信息,但发布时却忘记去掉 console.log语句,这可能造成内存泄露。

在传递给 console.log的对象是不能被垃圾回收 ♻️,因为在代码运行之后需要在开发工具能查看对象信息。所以最好不要在生产环境中 console.log任何对象。

实例------>demos/log.html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Leaker</title>
</head>
<body>
 <input type="button" value="click">
 <script>

   !function () {
     function Leaker() {
       this.init();
     };

     Leaker.prototype = {

       init: function () {
         this.name = (Array(100000)).join('*');
         console.log("Leaking an object %o: %o", (new Date()), this);// this对象不能被回收
       },
       destroy: function () {

         // do something....

       }
     };
     document.querySelector('input').addEventListener('click', function () {
       new Leaker();
     }, false);
   }()

 </script>

</body>
</html>

这里结合Chrome的Devtools–>Performance做一些分析,操作步骤如下:
   开启【Performance】项的记录
   执行一次CG,创建基准参考线
   连续单击【click】按钮三次,新建三个Leaker对象
   执行一次CG
   停止记录

去掉console.log("Leaking an object %o: %o",(newDate()),this);语句。重复上述的操作步骤  

从对比分析结果可知, console.log打印的对象是不会被垃圾回收器回收的。因此最好不要在页面中 console.log任何大对象,这样可能会影响页面的整体性能,特别在生产环境中。

除了 console.log外,另外还有 console.dirconsole.errorconsole.warn等都存在类似的问题,这些细节需要特别的关注。

 

3、closures(闭包)

当一个函数A返回一个内联函数B,即使函数A执行完,函数B也能访问函数A作用域内的变量,这就是一个闭包——————本质上闭包是将函数内部和外部连接起来的一座桥梁。

function foo(message) {
   function closure() {
       console.log(message)
   };
   return closure;
}

// 使用
var bar = foo("hello closure!");
bar()// 返回 'hello closure!'

  

在函数foo内创建的函数closure对象是不能被回收掉的,因为它被全局变量bar引用,处于一直可访问状态。通过执行 bar()可以打印出 hello closure!。如果想释放掉可以将 bar=null即可。

由于闭包会携带包含它的函数的作用域,因此会比其他函数占用更多的内存。过度使用闭包可能会导致内存占用过多。

 

4、DOM泄露

在JavaScript中,DOM操作是非常耗时的。因为JavaScript/ECMAScript引擎独立于渲染引擎,而DOM是位于渲染引擎,相互访问需要消耗一定的资源。如Chrome浏览器中DOM位于WebCore,而JavaScript/ECMAScript位于V8中。

假如将JavaScript/ECMAScript、DOM分别想象成两座孤岛,两岛之间通过一座收费桥连接,过桥需要交纳一定“过桥费”。JavaScript/ECMAScript每次访问DOM时,都需要交纳“过桥费”。

因此访问DOM次数越多,费用越高,页面性能就会受到很大影响。了解更多ℹ️

为了减少DOM访问次数,一般情况下,当需要多次访问同一个DOM方法或属性时,会将DOM引用缓存到一个局部变量中。

但如果在执行某些删除、更新操作后,可能会忘记释放掉代码中对应的DOM引用,这样会造成DOM内存泄露。

<script>
  var refA = document.getElementById('refA');
  var refB = document.getElementById('refB');
    document.body.removeChild(refA);
    
  // #refA不能GC回收,因为存在变量refA对它的引用。将其对#refA引用释放,但还是无法回收#refA。
    refA = null
    
  // 还存在变量refB对#refA的间接引用(refB引用了#refB,而#refB属于#refA)。将变量refB对#refB的引用释放,#refA就可以被GC回收。
    refB = null
</script>

 

5、定时器  

在JavaScript常用 setInterval()来实现一些动画效果。当然也可以使用链式 setTimeout()调用模式来实现:

setTimeout(function() {
  // do something. . . .
  setTimeout(arguments.callee, interval);
}, interval);

如果在不需要 setInterval()时,没有通过 clearInterval()方法移除,那么 setInterval()会不停地调用函数,直到调用 clearInterval()或窗口关闭。

如果链式 setTimeout()调用模式没有给出终止逻辑,也会一直运行下去。因此再不需要重复定时器时,确保对定时器进行清除,避免占用系统资源。 

 

6、EventListener

做移动开发时,需要对不同设备尺寸做适配。如在开发组件时,有时需要考虑处理横竖屏适配问题。一般做法,在横竖屏发生变化时,需要将组件销毁后再重新生成。

而在组件中会对其进行相关事件绑定,如果在销毁组件时,没有将组件的事件解绑,在横竖屏发生变化时,就会不断地对组件进行事件绑定。这样会导致一些异常,甚至可能会导致页面崩掉。

 

同一个元素节点注册了多个相同的EventListener,那么重复的实例会被抛弃。

这么做不会让得EventListener被重复调用,也不需要用removeEventListener手动清除多余的EventListener,因为重复的都被自动抛弃了。

而这条规则只是针对于命名函数。对于匿名函数,浏览器会将其看做不同的EventListener,所以只要将匿名的EventListener,命名一下就可以解决问题: