学习JavaScript之内存泄漏

nodejh 发布于2019-08-20 17:29 / 287人阅读

摘要：接上回我写了一篇关于闭包的博客学习之闭包，最后谈到闭包导致的问题时留了一个尾在以下的浏览器中会有内存泄漏的问题。今天的博客就继续探索一下内存泄漏的问题。博客地址的前端之路原文链接学习之内存泄漏

接上回我写了一篇关于闭包的博客《学习JavaScript之闭包》，最后谈到闭包导致的问题时留了一个尾：

在IE9以下的浏览器中会有内存泄漏的问题。

今天的博客就继续探索一下内存泄漏的问题。

浅谈JavaScript垃圾回收机制

1.标记清除

一开始垃圾收集器会给内存中的所有变量做一个标记，之后当程序运行进入相应的环境时，会去掉环境中的变量和被环境中变量引用的变量标记；当退出该环境后，无法再被访问的变量又重新被标记，这些被重新标记的变量就会被垃圾收集器回收。

2.引用计数

记录每个值被引用的次数，当被引用次数为0时该值才会被回收。如果某个值被其他对象引用（赋给某个变量），引用次数+1；如果不再被引用则-1。

闭包导致的内存泄漏怎么产生的

在IE9以前的浏览器中，DOM对象的垃圾回收机制就是使用引用计数（虽然JS引擎是用标记清除），因此一旦产生循环引用（比如下面这个例子）内存就会一直被占用而无法回收。

function a () {
  var div = document.getElementById("myTitle")
  div.onclick = function () {
    alert(div.id)
  }
}

这段代码中变量div中保存了一个HTML元素对象，又创建了一个事件处理程序，其中还直接引用了div.id形成了循环引用，而且这个匿名函数只要存在就能利用闭包的特性访问到div，因此这个ＨTML元素的引用至少是１。

如何解决内存泄漏的问题

首先要解除循环引用：把div.id赋值给一个变量，然后在匿名函数中引用该变量，因为变量只包含值而不存在对div直接引用，所以解除了循环引用。但是，由于闭包的特性使得其仍保存着a函数的活动对象（等于间接地在引用HTML元素），因此还需要手动解除div对HTML元素的引用。用代码写出来就是：

 function a () {  
   var div = document.getElementById("myTitle")  
   var id = div.id // 解除循环引用
   div.onclick = function () {    
     alert(id)  
   }
   div = null //　手动解除闭包对外部函数活动对象的引用
 }

这样DOM对象的引用就变成了0，也就会被正常地回收了。

博客地址：lbj的前端之路

原文链接：学习JavaScript之内存泄漏

专线服务服务器托管内存泄漏检测内存泄漏检查内存泄漏 java内存泄漏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83618.html

【进阶1-5期】JavaScript深入之4类常见内存泄漏及如何避免

摘要：本期推荐文章类内存泄漏及如何避免，由于微信不能访问外链，点击阅读原文就可以啦。四种常见的内存泄漏划重点这是个考点意外的全局变量未定义的变量会在全局对象创建一个新变量，如下。因为老版本的是无法检测节点与代码之间的循环引用，会导致内存泄漏。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第一期，本周的主题...

red_bricks 2019-08-23 13:47 评论0 收藏0
Deep in JS - 收藏集 - 掘金

摘要：今天同学去面试，做了两道面试题全部做错了，发过来给道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。排序算法 -- JavaScript 标准参考教程（alpha） - 前端 - 掘金来自《JavaScript 标准参考教程（alpha）》，by 阮一峰目录冒泡排序简介算法实现选择排序简介算法实现 ... 图例详解那道 setTimeout 与循环闭包的经典面...

enali 2019-08-20 16:36 评论0 收藏0
2017 前端面试准备 - 收藏集 - 掘金

摘要：最近遇到的前端面试题更新版前端掘金个人博客已上线，欢迎前去访问评论无媛无故的个人博客以下内容非本人原创，是整理后觉得更容易理解的版本，欢迎补充。一道面试题引发的对 javascript 类型转换的思考 - 前端 - 掘金最近群里有人发了下面这题：实现一个函数，运算结果可以满足如下预期结果： ... 收集 JavaScript 各种疑难杂症的问题集锦 - 前端 - 掘金从原博客迁移...

王晗 2019-08-29 12:30 评论0 收藏0
2017 前端面试准备 - 收藏集 - 掘金

摘要：最近遇到的前端面试题更新版前端掘金个人博客已上线，欢迎前去访问评论无媛无故的个人博客以下内容非本人原创，是整理后觉得更容易理解的版本，欢迎补充。一道面试题引发的对 javascript 类型转换的思考 - 前端 - 掘金最近群里有人发了下面这题：实现一个函数，运算结果可以满足如下预期结果： ... 收集 JavaScript 各种疑难杂症的问题集锦 - 前端 - 掘金从原博客迁移...

xiaochao 2019-08-22 11:03 评论0 收藏0
2017 前端面试准备 - 收藏集 - 掘金

摘要：最近遇到的前端面试题更新版前端掘金个人博客已上线，欢迎前去访问评论无媛无故的个人博客以下内容非本人原创，是整理后觉得更容易理解的版本，欢迎补充。一道面试题引发的对 javascript 类型转换的思考 - 前端 - 掘金最近群里有人发了下面这题：实现一个函数，运算结果可以满足如下预期结果： ... 收集 JavaScript 各种疑难杂症的问题集锦 - 前端 - 掘金从原博客迁移过来...

KitorinZero 2019-08-20 16:40 评论0 收藏0