作为后端程序员，关注内存应该是自然而然的事情，然而前端大部分只和浏览器打交道，对内存的关注就比较少了，包括我自己也是这样，通过这篇学习，可以让我们明白前端也关注内存的好处，理解JS内存回收机制和V8引擎内存回收机制的实现方式，并学习一些优化内存的技巧。
前端为什么需要关注内存？
image.png
对于以上截图，你可能并不陌生，尤其一些比较老的网站经常会出现，这其实大概率是因为这个页面占用内存过多，导致浏览器卡死造成的。
于是很好的回答了标题中的问题：
- 防止页面占用内存过大，引起客户端卡顿，甚至无响应，提升用户体验
- 随着前端技术学习的深入，NodeJS成为必备技能之一，而NodeJs使用V8引擎并且Node可以用作后端开发，内存对于后端服务至关重要，因为后端服务的持久性，更容易造成内存溢出
Javascript内存生命周期
Javascript环境中内存的使用遵循以下生命周期：
- 内存分配：当我们在定义变量、函数、对象的时候，系统会自动为他们分配内存
- 内存使用：即读写内存，也就是使用变量、函数等
- 内存回收：变量使用完毕，由垃圾回收机制自动回收不再使用的内存
整个过程由JS自动管理，不需要程序员再去费心，分配回收内存。
本文重点将学习JS垃圾回收机制，有关于JS的数据类型和内存分配详细知识，可以阅读这篇文章《JS数据类型 与 内存堆栈》
Javascript垃圾回收机制
垃圾回收
垃圾回收是指JS垃圾回收器，找出那些不再使用的变量，释放其占用的内存空间，并按照固定的时间间隔周期性执行这一操作的过程。
- 优势：可以大幅简化程序的内存管理代码，降低程序员的负担，减少因程序长时间运转而带来的内存泄漏问题
- 缺点：程序员无法掌控内存，Javascript也没有暴露任何关于内存的API，我们无法强迫JS进行垃圾回收，也没办法干预内存管理。
这里也许你会问了，既然我们无法干预JS的内存管理，还有必要学习这个吗？
当然。确实我们在开发中无需对内存过于关注，分配和回收都由JS自动管理，但是理解了内存回收的过程和原理，可以帮助我们写出更优秀的代码，避免程序带来内存方面的问题。
Javascript垃圾回收算法
引用计数方式
即跟踪记录每个值的引用次数，如果一个值的引用次数为0，就表示这个值不再使用了，可以将其占用的内存释放
- 原理：每次被引用的时候次数加1，被释放时减1，直到次数为0的时候，就可以将其内存空间回收，为了便于理解，我们可以借助于一段示例代码：
let a={value:1}; // 新定义一个变量，并给它赋一个引用类型的值，此时这个引用类型值的引用次数为1
let b={value:1}; // 重新定义一个新变量并赋予相同的引用值，此时这个引用类型值的引用次数继续加1，等于2
a={}; // 包含这个引用类型值的变量被赋予新的值，此时对这个引用类型值的引用次数减1
b=null; //引用次数继续减1，等于0，已经不能再访问这个值了；当垃圾收集器下一次运行时，就会释放这个引用类型值所占的内存空间
- 缺点：引用计数方式有个Bug，对于循环引用的变量(如下示例代码中，两个变量的引用次数永远不会为0)，无法实现内存回收。现代大多数浏览器已经不采用此方式回收内存，IE8以前的浏览器会出现这个问题。
function test()
{
var obj={v:1};
var obj1={a:10};
obj.a=obj1;
obj1.b=obj;
}
标记清除方式
标记清除指的是当变量进入执行环境时，将它标记为“进入环境”，当变量离开执行环境时，将其标记为“离开环境”；最后由垃圾收集器完成内存清除工作，销毁那些带有“离开”标记的值并回收其所占的内存空间
执行环境定义了变量或函数有权访问的其他数据，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。执行环境分为全局执行环境和局部执行环境。
- 全局执行环境，可以理解为最外围的执行环境
- 根据宿主对象不同，表示执行环境的对象也不一样：在浏览器中，全局执行环境被认为是window对象；在Node.Js中全局执行环境则认为是global对象
- 全局变量和函数都是作为window/global的对象和方法创建的
- 当某个环境中的所有代码执行完毕后，该环境被销毁，保存在环境中的所有变量和函数定义也随之被销毁
- 局部执行环境——环境栈
每个函数都有自己的执行环境，当执行流进入一个函数时，函数内部被看作是一个局部环境；当函数执行完毕，栈将其执行环境弹出，把控制权返回给之前的执行环境。
function test()
{
var a=0; // 标记进入环境
var b ="test"; // 标记进入环境
}
test(); // 函数执行完毕，a和b被标记为离开环境，其所占内存被回收
V8引擎内存回收机制
V8引擎在Javascript性能方面做了很大的提升，据此也成为了大众喜爱的一款开源高性能Javascript引擎。目前使用它作为Javascript引擎的包括：chorme浏览器，android浏览器，Node.Js，以及一些大型项目中。熟悉V8引擎的内存管理机制也是很有必要的。
V8引擎的内存分配
V8主要采用了一种分代回收策略，将内存分为两个生代：新生代和老生代。新生代通常用来存放新产生的和生命周期较短的变量，老生代用来存放生命周期较长的变量。
V8内存分配
- 64位操作系统下，V8总内存为1.4G左右；32位操作系统总内存为0.7G
- 64位系统下，新生代空间为64MB，老生代的空间为1400MB
- 32位系统下，新生代空间为32MB，老生代的空间为700MB
问题：V8为何要限制内存？
主要有两个原因：
- V8最初是为了浏览器而设计，不太可能出现大量使用内存的情况
- V8在进行垃圾回收的时候，线程会暂停执行，限制内存是为了防止因为垃圾回收导致的线程暂停执行的时间过长
V8引擎内存回收算法
V8分别对新生代和老生代使用不同的垃圾回收算法来提升垃圾回收的效率。
新生代内存空间回收
新生代的内存回收算法，简单来说就是复制。V8将新生代空间继续一分为二（如上面图形所示），每一部分空间称为semi space，这两个semi space只有一个处于使用中，另一个处于闲置状态。使用中的空间称为From空间，处于闲置的空间称为To空间。
当我们分配对象时，先在From空间进行分配，当垃圾回收运行时，会检查From空间对象的存活状态，将需要回收的对象继续留在From空间，继续存活的对象复制到To空间；接下来From空间和To空间进行角色互换，需要回收的对象移到To空间中，在进行垃圾回收时，将To空间中对象全部回收，并释放空间。具体流程如下图所示：
新生代回收过程
在新生代垃圾回收过程中，还涉及到新生代到老生代的晋升，主要包含以下两种情况：
- 在回收过程中，如果一个对象经过多次复制后依然存活，它将被认为是生命周期较长的对象，会被移到老生代中，采用新的回收算法来管理
-
在From空间和To空间的反转过程中，如果To空间的使用量已经超过了25%，就将From中的对象直接晋升到老生代内存空间中
新生代晋升流程
老生代内存空间回收
老生代的内存回收算法，简单来说就是删除（Markup Sweep）整理（Markup Compact）。Markup Sweep是将需要回收的对象进行标记，在垃圾回收运行时直接释放相应的地址空间。Markup Compact是将存活的对象移到一边，将需要回收的对象移到另一边（这个过程类似于磁盘碎片整理），然后对需要回收的区域进行整体的垃圾回收
如下示例图，展示了老生代内存回收的完整过程：
老生代回收过程
优化内存的技巧
经过以上的学习，我们了解到：
- 内存主要是用来存放变量，函数等数据的
- 局部变量，当程序执行结束，且没有引用的时候就会消失
- 全局对象会始终存活到程序运行结束
针对这几点，我们总结出优化内存的技巧如下：
- 尽量不要定义全局变量
- 实在不能避免全局对象，在使用完毕后要记得销毁掉，赋值undefined或null
- 使用匿名立即执行函数变全局为局部，也避免了污染其他人写的代码
(function(){
// 程序代码
})();
- 推荐使用闭包，但是要注意对闭包的引用，避免引入全局对象
function test()
{
var obj=xxxx; // 大对象
return obj;
}
var a=test();
var b=test();
- 防止内存泄漏
- 避免滥用缓存，因为缓存通常会定义在全局，推荐使用session/localstorage等前端存储来代替V8缓存，使用V8做缓存的时候，建议对缓存对象加锁，即控制缓存里面的对象数量，超过数量时，可以将缓存里较早的对象清除
- 注意减少大内存量操作，如读写大文件时，可以采用流的方式，避免一次性读取整个文件，导致内存溢出，浏览器卡死
网友评论