JavaScript内存泄漏

  • 什么是内存泄漏?

       内存泄漏是应用程序不需要占用内存时,由于某些原因内存没有被操作系统或者可用内存池回收。

 

  • 三种类型常见的JavaScript内存泄漏
  1. 意外的全局变量

       未被定义的变量会变成全局变量,在浏览器中,全局对象是window。

       JavaScript内存泄漏_第1张图片

       JavaScript内存泄漏_第2张图片

       在JavaScript文件头部加上‘use strict’,使用严格模式可以避免意外的全局变量。如果必须使用全局变量,确保用完后设置为null或者重新定义。

 

     2.被遗忘的计时器或回调函数

   使用serInterval,计时器的回调函数要在定时器停止才会被回收,老版本IE无法检测DOM节点与JavaScript代码之间的循环引用,会造成内存泄漏。

  JavaScript内存泄漏_第3张图片

 

  现在的浏览器使用更先进的垃圾回收算法,已经可以正确检测和处理循环引用了,回收节点时,不必调用removeEventListener。

   JavaScript内存泄漏_第4张图片

 

    3.脱离DOM的引用

有时,保存 DOM 节点内部数据结构很有用。假如你想快速更新表格的几行内容,把每一行 DOM 存成字典(JSON 键值对)或者数组很有意义。此时,同样的 DOM 元素存在两个引用:一个在 DOM 树中,另一个在字典中。将来你决定删除这些行时,需要两个引用都清除。此外还要考虑 DOM 树内部或子节点的引用问题。假如你的 JavaScript 代码中保存了表格某一个  的引用。将来决定删除整个表格的时候,直觉认为 GC 会回收除了已保存的  以外的其它节点。实际情况并非如此:此 是表格的子节点,子元素与父元素是引用关系。由于代码保留了  的引用,导致整个表格仍待在内存中。保存 DOM 元素引用的时候,要小心谨慎。

    JavaScript内存泄漏_第5张图片

 

    4.闭包

       JavaScript内存泄漏_第6张图片

      以上函数foo1() 中用匿名函数创建了一个闭包。

第①句:JavaScript对象el引用了一个DOM对象(其id为“div1”);

第②句:该DOM对象的onclick属性引用了匿名函数闭包,该闭包可以引用外部函数foo1() 的整个活动对象,由此形成了JavaScript对象和DOM对象的隐蔽循环引用。

     闭包的解决方法:在JavaScript代码段运行完之时将形成循环引用的JavaScript对象手动设置为空。

     JavaScript内存泄漏_第7张图片

 

你可能感兴趣的:(JavaScript内存泄漏)