JS高程中的垃圾回收机制与常见内存泄露的解决方法

kidsamong 发布于2019-08-22 18:35 / 2569人阅读

摘要：解决方式是，当我们不使用它们的时候，手动切断链接淘汰把和对象转为了真正的对象，避免了使用这种垃圾收集策略，消除了以下常见的内存泄漏的主要原因。以上参考资料高程垃圾收集类内存泄漏及如何避免内存泄露及解决方案详解类内存泄漏及如何避免

前言

起因是因为想了解闭包的内存泄露机制，然后想起《js高级程序设计》中有关于垃圾回收机制的解析，之前没有很懂，过一年回头再看就懂了，写篇博客与大家分享一下。如果喜欢的话可以点波赞/关注，支持一下。

个人博客了解一下：obkoro1.com

内存的生命周期：

分配你所需要的内存：

由于字符串、对象等没有固定的大小，js程序在每次创建字符串、对象的时候，程序都会分配内存来存储那个实体。

使用分配到的内存做点什么。

不需要时将其释放回归：

在不需要字符串、对象的时候，需要释放其所占用的内存，否则将会消耗完系统中所有可用的内存，造成系统崩溃，这就是垃圾回收机制所存在的意义。

所谓的内存泄漏指的是：由于疏忽或错误造成程序未能释放那些已经不再使用的内存，造成内存的浪费。

垃圾回收机制：

在C和C++之类的语言中，需要手动来管理内存的，这也是造成许多不必要问题的根源。幸运的是，在编写js的过程中，内存的分配以及内存的回收完全实现了自动管理，我们不用操心这种事情。

垃圾收集机制的原理：

垃圾收集器会按照固定的时间间隔，周期性的找出不再继续使用的变量，然后释放其占用的内存。

什么叫不再继续使用的变量？

不再使用的变量也就是生命周期结束的变量，是局部变量，局部变量只在函数的执行过程中存在，当函数运行结束，没有其他引用(闭包)，那么该变量会被标记回收。

全局变量的生命周期直至浏览器卸载页面才会结束，也就是说全局变量不会被当成垃圾回收。

标记清除：当前采用的垃圾收集策略

工作原理：

当变量进入环境时(例如在函数中声明一个变量)，将这个变量标记为“进入环境”，当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。

工作流程：

垃圾收集器会在运行的时候会给存储在内存中的所有变量都加上标记。

去掉环境中的变量以及被环境中的变量引用的变量的标记。

那些还存在标记的变量被视为准备删除的变量。

最后垃圾收集器会执行最后一步内存清除的工作，销毁那些带标记的值并回收它们所占用的内存空间。

到2008年为止,IE、Chorme、Fireofx、Safari、Opera 都使用标记清除式的垃圾收集策略，只不过垃圾收集的时间间隔互有不同。

引用计数略：被废弃的垃圾收集策略

循环引用：跟踪记录每个值被引用的技术

在老版本的浏览器中(对，又是IE)，IE9以下BOM和DOM对象就是使用C++以COM对象的形式实现的。

COM的垃圾收集机制采用的就是引用计数策略，这种机制在出现循环引用的时候永远都释放不掉内存。

    var element = document.getElementById("something");
    var myObject = new Object();
    myObject.element = element; // element属性指向dom
    element.someThing = myObject; // someThing回指myObject 出现循环引用(两个对象一直互相包含 一直存在计数)。

解决方式是，当我们不使用它们的时候，手动切断链接：

     myObject.element = null; 
     element.someThing = null;

淘汰：

IE9把BOM和DOM对象转为了真正的js对象，避免了使用这种垃圾收集策略，消除了IE9以下常见的内存泄漏的主要原因。

IE7以下有一个声明狼藉的性能问题，大家了解一下：

256个变量，4096个对象(或数组)字面或者64KB的字符串，达到任何一个临界值会触发垃圾收集器运行。

如果一个js脚本的生命周期一直保有那么多变量，垃圾收集器会一直频繁的运行，引发严重的性能问题。

IE7已修复这个问题。

哪些情况会引起内存泄漏？

虽然有垃圾回收机制，但我们在编写代码的时候，有些情况还是会造成内存泄漏，了解这些情况，并在编写程序的时候，注意避免，我们的程序会更具健壮性。

意外的全局变量：

上文我们提到了全局变量不会被当成垃圾回收，我们在编码中有时会出现下面这种情况：

    function foo() {
     this.bar2 = "默认绑定this指向全局" // 全局变量=> window.bar2
      bar = "全局变量"; // 没有声明变量 实际上是全局变量=>window.bar
    }
    foo();

当我们使用默认绑定，this会指向全局，this.something也会创建一个全局变量，这一点可能很多人没有注意到。

解决方法：在函数内使用严格模式or细心一点

    function foo() {
      "use strict"; 
      this.bar2 = "严格模式下this指向undefined"; 
      bar = "报错";
    }
    foo();

当然我们也可以手动释放全局变量的内存：

    window.bar = undefined
    delete window.bar2

被遗忘的定时器和回调函数

当不需要setInterval或者setTimeout时，定时器没有被clear，定时器的回调函数以及内部依赖的变量都不能被回收，造成内存泄漏。

var someResource = getData();
setInterval(function() {
    var node = document.getElementById("Node");
    if(node) {
        node.innerHTML = JSON.stringify(someResource));
        // 定时器也没有清除
    }
    // node、someResource 存储了大量数据 无法回收
}, 1000);

解决方法：在定时器完成工作的时候，手动清除定时器。

闭包：

闭包可以维持函数内局部变量，使其得不到释放，造成内存泄漏。

    function bindEvent() {
      var obj = document.createElement("XXX");
      var unused = function () {
          console.log(obj,"闭包内引用obj obj不会被释放");
      };
      // obj = null;
    }

解决方法：手动解除引用，obj = null。

循环引用问题

就是IE9以下的循环引用问题，上文讲过了。

没有清理DOM元素引用：

    var refA = document.getElementById("refA");
    document.body.removeChild(refA); // dom删除了
    console.log(refA, "refA");  // 但是还存在引用 能console出整个div 没有被回收

不信的话，可以看下这个dom。

解决办法：refA = null;

console保存大量数据在内存中。

过多的console，比如定时器的console会导致浏览器卡死。

解决：合理利用console，线上项目尽量少的使用console，当然如果你要发招聘除外。

如何避免内存泄漏：

记住一个原则：不用的东西，及时归还，毕竟你是"借的"嘛。

减少不必要的全局变量，使用严格模式避免意外创建全局变量。

在你使用完数据后，及时解除引用(闭包中的变量，dom引用，定时器清除)。

组织好你的逻辑，避免死循环等造成浏览器卡顿，崩溃的问题。

关于内存泄漏：

即使是1byte的内存，也叫内存泄漏，并不一定是导致浏览器崩溃、卡顿才能叫做内存泄漏。

一般是堆区内存泄漏，栈区不会泄漏。

基本类型的值存在内存中，被保存在栈内存中，引用类型的值是对象，保存在堆内存中。所以对象、数组之类的，才会发生内存泄漏。

使用chrome监控内存泄漏，可以看一下这篇文章

结语

了解了内存泄漏的原因以及出现的情况，那么我们在编码过程中只要多加注意，就不会发生非常严重的内存泄漏问题。

PS：目前离职中，有坑位可以介绍一下，base：上海2号线淞虹路。

希望看完的朋友可以点个喜欢/关注，您的支持是对我最大的鼓励。

个人blog and 掘金个人主页，如需转载，请放上原文链接并署名。码字不易，感谢支持！

如果喜欢本文的话，欢迎关注我的订阅号，漫漫技术路，期待未来共同学习成长。

以上2018.7.7

参考资料：

JS高程4.3垃圾收集

4类 JavaScript 内存泄漏及如何避免

JavaScript内存泄露及解决方案详解

4类 JavaScript 内存泄漏及如何避免

GPU云服务器云服务器 js中的内存泄露垃圾回收机制 js内存泄露解决方案 java垃圾回收机制java

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

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

2017拼多多前端笔试

摘要：但是如果一个值不再用到了，引用次数却不为，垃圾回收机制却无法释放这块内存，从而导致内存泄漏。内存泄漏垃圾回收语言的内存泄漏主因是不需要的引用。常见内存泄漏意外的全局变量处理未定义变量的方式比较宽松未定义的变量会在全局对象创建一个新变量。简答题： settimeout 与 setInterval的区别，及对他们的内存的分析区别 setTimeout是在一段时间后调用指定函数（仅一...

Jioby 2019-08-01 17:20 评论0 收藏0
2017拼多多前端笔试

摘要：但是如果一个值不再用到了，引用次数却不为，垃圾回收机制却无法释放这块内存，从而导致内存泄漏。内存泄漏垃圾回收语言的内存泄漏主因是不需要的引用。常见内存泄漏意外的全局变量处理未定义变量的方式比较宽松未定义的变量会在全局对象创建一个新变量。简答题： settimeout 与 setInterval的区别，及对他们的内存的分析区别 setTimeout是在一段时间后调用指定函数（仅一...

caiyongji 2019-08-20 18:30 评论0 收藏0
2017拼多多前端笔试

摘要：但是如果一个值不再用到了，引用次数却不为，垃圾回收机制却无法释放这块内存，从而导致内存泄漏。内存泄漏垃圾回收语言的内存泄漏主因是不需要的引用。常见内存泄漏意外的全局变量处理未定义变量的方式比较宽松未定义的变量会在全局对象创建一个新变量。简答题： settimeout 与 setInterval的区别，及对他们的内存的分析区别 setTimeout是在一段时间后调用指定函数（仅一...

genefy 2019-08-29 13:04 评论0 收藏0
【V8引擎】浅析Chrome V8引擎中的垃圾回收机制和内存泄露优化策略

摘要：一前言的垃圾回收机制使用垃圾回收机制来自动管理内存。垃圾回收器只会针对新生代内存区老生代指针区以及老生代数据区进行垃圾回收。分别对新生代和老生代使用不同的垃圾回收算法来提升垃圾回收的效率。 V8 实现了准确式 GC，GC 算法采用了分代式垃圾回收机制。因此，V8 将内存（堆）分为新生代和老生代两部分。一、前言 V8的垃圾回收机制：JavaScript使用垃圾回收机制来自动管理内存。垃...

qingshanli1988 2019-08-23 18:18 评论0 收藏0
《JS高程3》—— 内存回收、垃圾收集、内存泄漏

摘要：局部变量只在函数执行过程中存在。此时，局部变量就没有存在的必要了，因此可以释放它们的内存以供将来使用。总结一般情况下，局部变量的生命周期为函数对象执行到执行结束，全局变量的生命周期为浏览器打开和关闭。垃圾收集 JavaScript具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行中使用的内存。在C和C++语言中，开发人员一项基本任务就是手工跟踪内存的使用情况，这是造成许多问题...

qujian 2019-08-20 17:16 评论0 收藏0