JS内存管理

leap_frog 发布于2019-08-26 11:45 / 1802人阅读

摘要：导致内存泄漏的原因没有完全切断与之间的路径因为没有完全切断与根节点之间的路径，导致自动不会回收这部分内存，从而造成内存泄漏。在下一篇文章中，将阐述如何确定内存泄漏，以及可以使用的工具和方法。

JS有完善的内存处理机制，所以之前我们不用特别的去关注这块的实现。页面不快了，刷新一下就好了；浏览器卡顿，重启一下就OK。但是随着SPA和移动APP的流行，以及未来可能存在的PWA的实现，JS内存可能成为新的内存瓶颈。这也是写本文的初衷。

1.什么是内存泄漏

当我们决定不再使用某些内存时，由于错误的编码，未能使得GC(Gabbage Collection)正确的将这些内存回收的情况，就是内存泄漏。

2.内存的占用，分配和回收 2.1 内存的占用

一个对象占用的内存分为直接占用内存(Shallow Size)和占用总内存(Retained Size)。

直接占用内存：对象本身占用的内存。典型的JavaScript对象都会有保留内存用来描述这个对象和存储它的直接值。一般，只有数组和字符串会有明显的直接占用内存(Shallow Size)。但字符串和数组常常会在渲染器内存中存储主要数据部分，仅仅在JavaScript对象栈中暴露一个很小的包装对象。
占用总内存：直接占用内存和这个引用的依赖对象所占用的内存。

赋值和New操作都会涉及到内存的占用。

2.2 内存的分配

Chrome V8的垃圾回收（GC）算法基于Generational Collection，内存被划分为两种，分别称为Young Generation（YG）和Old Generation（OG）。

所谓Young和Old是根据他们占用的时间来划分的。内存在YG的分配和回收快而频繁，一般存在的时间很短，所以称为Young；而在OG中则慢而少发生，所以称为Old。

因为在V8中，YG的GC过程会阻塞程序，而OG的GC不会阻塞。所以通常情况下开发者更关心YG的细节。

YG又被平分为两部分空间，分别称为From和To。所有内存从To空间被分配出去，当To满时，开始触发GC，接下来细看一下。

某时刻，To已经分A、B和C分配了内存，当前它剩下一小块内存未分配出去，而From所有的内存都空闲着。

此时，一个程序需要为D分配内存，但D需要的内存大小超出了To未分配的内存，如下图。此时，触发GC，页面停止执行。

接着From和To进行对换，即原来的To空间被标志为From，From被标志为To。并且把活的变量值（例如B）标志出来，而”垃圾“（例如AC）未被标志，它们将会被清掉。

活的B会被复制到To空间，而「垃圾」AC则被回收，同时，D被分配到To空间，最后成下图的分布

至此，整个GC完成，此过程中页面停止执行，所以要尽可能的快。当YG中的值存活比较久时，它会被推向OG，OG的空间满时，触发OG内的GC，OG的GC时会触发YG的GC。

每次分配都使To的可用空间减小，程序又更接近GC

YG的GC会阻塞程序，所以GC时间不宜太长10ms以内，因为16ms就会出现丢帧；GC不宜太频繁

某个值变成垃圾后，不会立马释放内存，只有在GC的时候所占内存才会被回收。

2.2 内容均来自参考文献

2.3 内存的回收

GC Root是内存的根结节，在浏览器中它是window，在NodeJS中则是global对象。

从GC Root开始遍历图，所有能到达的节点称为活节点，如果存在GC Root不能到达的节点，那么该节点称为“垃圾”，将会被回收，如图中灰色的节点。

至于根节点的回收，不受用户的控制。

3. 导致内存泄漏的原因 3.1 没有完全切断与GC root之间的路径

因为没有完全切断与根节点之间的路径，导致自动GC不会回收这部分内存，从而造成内存泄漏。

具体的原因有：

对象之间的相互引用

var a, b;
a.reference = b;
b.reference = a;

错误使用了全局变量

a = "1234567";
相当于
window.a = "1234567";

DOM元素清空或删除时，绑定的事件未清除

闭包引用

function bindEvent() {
    var obj = document.getElementById("xxx");

    obj.onclick = function () {
        /** 空函数*/
    };

    /** delete this reference */
    // obj = null;
}

DOM元素清空或删除时，子元素存在JS引用，导致子元素的所有父元素都不会被删除

// b是a的子dom节点, a是body的子节点
var aElement = document.getElementById("a");
var bElement = document.getElementById("b");
document.body.removeChild(aElement);
// aElement = null；
// bElement = null;

3.2 过度占用了内存空间

更多的出现在nodejs中，例如：

无节制的循环

while(1) {
    // do sth
}

过大的数组

var arr = [];
for (var i=0; i< 100000000000; i++) {
    var a = {
        "desc": "an object"
    }
    arr.push(a);
}

总结

本文描述了内存分配和泄漏的基本原理，并提及了日常常遇到的集中的泄漏原因。在下一篇文章中，将阐述如何确定内存泄漏，以及可以使用的工具和方法。

参考文献：

《Chrome开发者工具之JavaScript内存分析》

《【精耕细作】授你兇器，一见JS内存》from kenshinlin

海外云主机云服务器内存管理 php管理内存 php内存管理 python内存管理

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

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

翻译 | 带你秒懂内存管理 - 第一部（共三部）

摘要：自动内存管理当你在使用时，实际上并不需要考虑内存。这种自动内存管理可以使开发人员更轻松。即使在手动内存管理的语言中，通常会从语言运行时获得一些帮助。这就是为什么许多现代语言使用自动内存管理的原因避免人为错误。原文地址：A crash course in memory management 原文作者：Lin Clark 译者：黑黑校对者：Bob 要理解为什么将 Array...

Tecode 2019-08-21 16:26 评论0 收藏0
「译」内存管理碰撞课程

摘要：你可以从内存中直接拿东西，也可以直接往内存里存东西当你把或者其它语言编译为时，编译工具会在里增加一些辅助代码。作者：Lin Clark 译者：Cody Chan 原帖链接：A crash course in memory management 这是图解 SharedArrayBuffers 系列的第一篇：内存管理碰撞课程图解 ArrayBuffers 和 SharedA...

BDEEFE 2019-08-20 17:26 评论0 收藏0
【重温基础】22.内存管理

摘要：内存泄露内存泄露概念在计算机科学中，内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存。判断内存泄漏，以字段为准。本文是重温基础系列文章的第二十二篇。今日感受：优化学习方法。系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1-14篇【重温基础】15.JS对象介绍【重温基础】16.JSON对象介绍【重温基础】1...

Pandaaa 2019-08-23 15:14 评论0 收藏0
【译文】Node.js垃圾回收机制-基础

摘要：正好最近在学习的各种实现原理，在这里斗胆翻译一篇垃圾回收机制原文链接。自动管理的机制中，通常都会包含垃圾回收机制。二垃圾回收机制的概念垃圾回收，是一种自动管理应用程序所占内存的机制，简称方便起见，本文均采用此简写。最近关注了一个国外技术博客RisingStack里面有很多高质量，且对新手也很friendly的文章。正好最近在学习Node.js的各种实现原理，在这里斗胆翻译一篇Node...

haobowd 2019-08-22 10:47 评论0 收藏0
[译]WebAssembly 中的 Memory

摘要：使用，您可以直接访问原始字节码这可能令人担忧。可以根据索引从中拿到字符串现在，很多人并不知道如何在中使用字节码。你需要将字节码转换为有用的内容，比如说字符串。通过防止浏览器级内存泄漏并提供内存隔离，使事情变得更安全。原文链接：https://fanmingfei.com/posts/... 这是系列文章第二篇：使用 JavaScript 创建一个 WebAssembly 模块的实...

junnplus 2019-08-20 18:26 评论0 收藏0