让前端飞Web前端之路

Javascript进阶——JS中的内存管理

2020-04-08  本文已影响0人  隽小吚

作为后端程序员，关注内存应该是自然而然的事情，然而前端大部分只和浏览器打交道，对内存的关注就比较少了，包括我自己也是这样，通过这篇学习，可以让我们明白前端也关注内存的好处，理解JS内存回收机制和V8引擎内存回收机制的实现方式，并学习一些优化内存的技巧。

前端为什么需要关注内存？

image.png

对于以上截图，你可能并不陌生，尤其一些比较老的网站经常会出现，这其实大概率是因为这个页面占用内存过多，导致浏览器卡死造成的。
于是很好的回答了标题中的问题：

  1. 防止页面占用内存过大，引起客户端卡顿，甚至无响应，提升用户体验
  2. 随着前端技术学习的深入，NodeJS成为必备技能之一，而NodeJs使用V8引擎并且Node可以用作后端开发，内存对于后端服务至关重要，因为后端服务的持久性，更容易造成内存溢出

Javascript内存生命周期

Javascript环境中内存的使用遵循以下生命周期：

本文重点将学习JS垃圾回收机制，有关于JS的数据类型和内存分配详细知识，可以阅读这篇文章《JS数据类型 与 内存堆栈》

Javascript垃圾回收机制

垃圾回收

垃圾回收是指JS垃圾回收器，找出那些不再使用的变量，释放其占用的内存空间，并按照固定的时间间隔周期性执行这一操作的过程。

这里也许你会问了，既然我们无法干预JS的内存管理，还有必要学习这个吗？
当然。确实我们在开发中无需对内存过于关注，分配和回收都由JS自动管理，但是理解了内存回收的过程和原理，可以帮助我们写出更优秀的代码，避免程序带来内存方面的问题。

Javascript垃圾回收算法

引用计数方式

即跟踪记录每个值的引用次数，如果一个值的引用次数为0，就表示这个值不再使用了，可以将其占用的内存释放

let a={value:1}; // 新定义一个变量，并给它赋一个引用类型的值，此时这个引用类型值的引用次数为1
let b={value:1}; // 重新定义一个新变量并赋予相同的引用值，此时这个引用类型值的引用次数继续加1，等于2
a={}; // 包含这个引用类型值的变量被赋予新的值，此时对这个引用类型值的引用次数减1
b=null; //引用次数继续减1，等于0，已经不能再访问这个值了；当垃圾收集器下一次运行时，就会释放这个引用类型值所占的内存空间

function test()
{
var obj={v:1};
var obj1={a:10};
obj.a=obj1;
obj1.b=obj;
}
标记清除方式

标记清除指的是当变量进入执行环境时，将它标记为“进入环境”，当变量离开执行环境时，将其标记为“离开环境”；最后由垃圾收集器完成内存清除工作，销毁那些带有“离开”标记的值并回收其所占的内存空间
执行环境定义了变量或函数有权访问的其他数据，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。执行环境分为全局执行环境和局部执行环境。

  1. 全局执行环境，可以理解为最外围的执行环境
  1. 局部执行环境——环境栈
    每个函数都有自己的执行环境，当执行流进入一个函数时，函数内部被看作是一个局部环境；当函数执行完毕，栈将其执行环境弹出，把控制权返回给之前的执行环境。
function test()
{
    var a=0; // 标记进入环境
     var b ="test"; // 标记进入环境
}
test(); // 函数执行完毕，a和b被标记为离开环境，其所占内存被回收

V8引擎内存回收机制

V8引擎在Javascript性能方面做了很大的提升，据此也成为了大众喜爱的一款开源高性能Javascript引擎。目前使用它作为Javascript引擎的包括：chorme浏览器，android浏览器，Node.Js，以及一些大型项目中。熟悉V8引擎的内存管理机制也是很有必要的。

V8引擎的内存分配

V8主要采用了一种分代回收策略，将内存分为两个生代：新生代和老生代。新生代通常用来存放新产生的和生命周期较短的变量，老生代用来存放生命周期较长的变量。


V8内存分配

问题：V8为何要限制内存？
主要有两个原因：

  1. V8最初是为了浏览器而设计，不太可能出现大量使用内存的情况
  2. V8在进行垃圾回收的时候，线程会暂停执行，限制内存是为了防止因为垃圾回收导致的线程暂停执行的时间过长

V8引擎内存回收算法

V8分别对新生代和老生代使用不同的垃圾回收算法来提升垃圾回收的效率。

新生代内存空间回收

新生代的内存回收算法，简单来说就是复制。V8将新生代空间继续一分为二（如上面图形所示），每一部分空间称为semi space，这两个semi space只有一个处于使用中，另一个处于闲置状态。使用中的空间称为From空间，处于闲置的空间称为To空间。
当我们分配对象时，先在From空间进行分配，当垃圾回收运行时，会检查From空间对象的存活状态，将需要回收的对象继续留在From空间，继续存活的对象复制到To空间；接下来From空间和To空间进行角色互换，需要回收的对象移到To空间中，在进行垃圾回收时，将To空间中对象全部回收，并释放空间。具体流程如下图所示：


新生代回收过程

在新生代垃圾回收过程中，还涉及到新生代到老生代的晋升，主要包含以下两种情况：

  1. 在回收过程中，如果一个对象经过多次复制后依然存活，它将被认为是生命周期较长的对象，会被移到老生代中，采用新的回收算法来管理

  2. 在From空间和To空间的反转过程中，如果To空间的使用量已经超过了25%，就将From中的对象直接晋升到老生代内存空间中


    新生代晋升流程
老生代内存空间回收

老生代的内存回收算法，简单来说就是删除（Markup Sweep）整理（Markup Compact）。Markup Sweep是将需要回收的对象进行标记，在垃圾回收运行时直接释放相应的地址空间。Markup Compact是将存活的对象移到一边，将需要回收的对象移到另一边（这个过程类似于磁盘碎片整理），然后对需要回收的区域进行整体的垃圾回收
如下示例图，展示了老生代内存回收的完整过程：


老生代回收过程

优化内存的技巧

经过以上的学习，我们了解到：

针对这几点，我们总结出优化内存的技巧如下：

  1. 尽量不要定义全局变量
  2. 实在不能避免全局对象，在使用完毕后要记得销毁掉，赋值undefined或null
  3. 使用匿名立即执行函数变全局为局部，也避免了污染其他人写的代码
(function(){
// 程序代码
})();
  1. 推荐使用闭包，但是要注意对闭包的引用，避免引入全局对象
function test()
{
var obj=xxxx; // 大对象
return obj;
}
var a=test();
var b=test();
  1. 防止内存泄漏
上一篇下一篇

猜你喜欢

热点阅读