关于浏览器:V8引擎的JavaScript内存机制

对于前端攻城师来说，JS 的内存机制不容忽视。如果想成为行业专家，或者打造高性能前端利用，那就必须要弄清楚 JavaScript 的内存机制了

先看栗子

    function foo (){
        let a = 1
        let b = a
        a = 2
        console.log(a) // 2
        console.log(b) // 1
        
        let c = {name: '掘金'}
        let d = c
        c.name = '沐华'
        console.log(c) // {name: '沐华'}
        console.log(d) // {name: '沐华'}
    }
    foo()

能够看出在咱们批改不同数据类型的值后，后果有点不一样。

这是因为不同数据类型在内存中存储的地位不一样，在 JS 执行过程中，次要有三种内存空间：代码空间 、栈、堆

代码空间次要就是存储可执行代码，对于这个内容有点多，能够看我另一篇文章有具体介绍

咱们先看一下栈和堆

在 JS 中，每一个数据都须要一个内存空间。而不同的内存空间有什么区别特点呢？，如图

调用栈也叫执行栈，它的执行准则是先进后出，后执行的会先出栈，如图

栈：

存储根底类型：Number, String, Boolean, null, undefined, Symbol, BigInt
存储和应用形式 后进先出(就像一个瓶子, 后放进去的货色先拿进去)
主动分配内存空间，主动开释，占固定大小的空间
存储援用类型的变量，但实际上保留的不是变量自身，而是指向该对象的 指针(在堆内存中寄存的地址)
所有办法中定义的变量存在栈中，办法执行完结，这个办法的内存栈也主动销毁
能够递归调用办法，这样随着栈深度减少，JVW 维持一条长长的办法调用轨迹，内存不够调配，会产生栈溢出

堆：

存储援用类型：Object（Function/Array/Date/RegExp)
动态分配内存空间，大小不定也不会主动开释
堆内存中的对象不会因为办法执行完结就销毁，因为有可能被另一个变量援用(参数传递等)

通常与 垃圾回收机制 无关。每一个办法执行时都会建设本人的内存栈，而后将办法里的变量一一放入这个内存栈中，随着办法执行完结，这个办法的内存栈也会主动销毁

为了使程序运行时占用的内存最小，栈空间都不会设置太大，而堆空间则很大

每创立一个对象时，这个对象会被保留到堆中，以便重复复用，即便办法执行完结，也不会销毁这个对象，因为有可能被另一个变量 (参数传递等) 援用，直到对象没有任何援用时才会被零碎的垃圾回收机制销毁

而且 JS 引擎 须要用栈来维护程序执行期间上下文的状态，如果所有的数据都在栈里在，栈空间大了的话，会影响到上下文切换的效率，进而影响整个程序的执行效率

下面说了在 JS 中创立变量（对象，字符串等）时都分配内存，并且在不再应用它们时“主动”开释内存，这个主动开释内存的过程称为 垃圾回收。也正是因为垃圾回收机制的存在，让很多开发者在开发中不太关怀内存治理，所在在一些状况下导致内存泄露

内存生命周期：

内存调配：当咱们申明变量，函数，对象的时候，零碎会主动为它们分配内存
内存应用：即读写内存，也就是应用变量，函数，参数等
内存回收：应用结束，由垃圾回收机制主动回收不再应用的内存

局部变量(函数外部的变量)，当函数执行完结，没有其余援用(闭包)，该变量就会被回收

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

程序的运行须要内存，对于继续运行的服务过程，必须及时开释不再用到的内存，否则内存占用越来越大，轻则影响零碎性能，重大的会导致过程解体

内存泄露就是因为忽略或者谬误，导致程序不能及时开释那些不再应用的内存，造成内存的节约

在 Chrome 浏览器 中，能够这样查看内存占用状况

开发者工具 => Performance => 勾选 Memory => 点左上角 Record => 页面操作后点 stop

而后就会显示这段时间内的内存应用状况了

一次查看内存占用状况后，看以后内存占用趋势图，走势呈上升趋势，能够认为存在内存泄露
屡次查看内存占用状况后截图比照，比拟每次内存占用状况，如果呈上升趋势，也能够认为存在内存泄露

在 Node 中，应用 process.memoryUsage 办法查看内存状况

console.log(process.memoryUsage());

heapUsed：用到的堆的局部。
rss（resident set size）：所有内存占用，包含指令区和堆栈。
heapTotal：” 堆 ” 占用的内存，包含用到的和没用到的。
external：V8 引擎外部的 C++ 对象占用的内存

判断内存泄露以 heapUsed 字段为准

没有申明而意外创立的全局变量
被忘记的定时器和回调函数，没有及时敞开定时器中的援用会始终留在内存中
闭包
DOM 操作援用(比方援用了 td 却删了整个 table, 内存会保留整个 table)

所以记住一个准则：不必的货色，及时偿还，有道是，有借有还，再借不难

缩小不必要的全局变量，比方应用严格模式防止创立意外的全局变量
缩小生命周期较长的对象，防止过多的对象
应用完数据后，及时解除援用(闭包中的变量,DOM 援用, 定时器革除)
组织好逻辑，防止死循环造成浏览器卡顿，解体

JS 是有主动垃圾回收机制的，那么这个主动垃圾收集机制是怎么工作的呢？

看栗子

function foo(){
    let a = 1
    let b = {name: '沐华'}
    function showName(){
        let c = 2
        let d = {name: '沐华'}
    }
    showName()}
foo()

执行过程：

JS 引擎先为 foo 函数创立执行上下文，并将执行上下文压入执行栈
执行遇到 showName 函数，再为 showName 函数创立执行上下文，并将执行上下文压入执行栈中，所以在栈中 showName 压在 foo 的下面
而后先执行 showName 函数的执行上下文，JS 引擎中有一个记录以后执行状态的指针（ESP），会指向正在执行的上下文，也就是 showName
当 showName 执行完结之后，执行流程就进入下一个执行上下文，也就是 foo 函数，这时就须要销毁 showName 执行上下文了。次要就是 JS 引擎将 ESP 指针下移，指向 showName 上面的执行上下文，也就是 foo，这个下移操作就是销毁 showName 函数执行上下文的过程

如图

其实就是找出那些不再持续应用的值，而后开释其占用的内存。

比方方才的栗子，当 foo 函数和 showName 函数执行上下文都执行完结就清理了，然而外面的两个对象还仍然占用着空间，因为对象的数据是存在堆中的，清理掉的栈中的只是对象的援用地址，并不是对象数据

这就须要 垃圾回收器 了

垃圾回收阶段最艰巨的工作就是找到不须要的变量，所以垃圾回收算法有很多种，并没有哪一种能胜任所有场景，须要依据场景衡量抉择

援用计数是以前的垃圾回收算法，该算法定义 ” 内存不再应用 ” 的规范很简略，就是看一个对象是否有指向它的援用，如果没有其余对象指向它，就阐明该对象不再须要了

但它却有一个致命的问题：循环援用

就是如果有两个对象相互援用，只管他们已不再应用，然而垃圾回收不会进行回收，导致内存泄露

为了解决循环援用造成的问题，古代浏览器都没有采纳援用计数的形式

在 V8 中会把堆分为新生代和老生代两个区域

V8 实现了 GC 算法，采纳了分代式垃圾回收机制，所以 V8 将堆内存分为 新生代 (副垃圾回收器) 和老生代 (主垃圾回收器) 两个局部

新生代中通常只反对 1~8M 的容量，所以次要 寄存生存工夫较短的对象

新生代中应用 Scavenge GC 算法，将新生代空间分为两个区域：对象区域和闲暇区域。如图：

顾名思义，就是说这两块空间只应用一个，另一个是闲暇的。工作流程是这样的

将新调配的对象存入对象区域中，当对象区域存满了，就会启动 GC 算法
对对象区域内的垃圾做标记，标记实现之后将对象区域中还存活的对象复制到闲暇区域中，曾经不必的对象就销毁。这个过程不会留下内存碎片
复制实现后，再将对象区域和闲暇调换。既回收了垃圾也能让新生代中这两块区域有限重复使用上来

正因为新生代中空间不大，所以就容易呈现被塞满的状况，所以

经验过两次垃圾回收仍然还存活的对象会被移到老生代空间中
如果闲暇空间对象的占比超过 25%，为了不影响内存调配，就会将对象转移到老生代空间

老生代特点就是 占用空间大 ，所以次要 寄存存活工夫长的对象

老生代中应用 标记革除算法 和标记压缩算法。因为如果也采纳 Scavenge GC 算法的话，复制大对象就比拟花工夫了

标记革除

在以下状况下会先启动标记革除算法：

某一个空间没有分块的时候
对象太多超过空间容量肯定限度的时候
空间不能保障新生代中的对象转移到老生代中的时候

标记革除的流程是这样的

从根部 (js 的全局对象) 登程，遍历堆中所有对象，而后标记存活的对象
标记实现后，销毁没有被标记的对象

因为垃圾回收阶段，会暂停 JS 脚本执行，等垃圾回收结束后再复原 JS 执行，这种行为称为 全进展(stop-the-world)

比方堆中数据超过 1G，那一次残缺的垃圾回收可能须要 1 秒以上，这期间是会暂停 JS 线程执行的，这就导致页面性能和响应能力降落

增量标记

所以在 2011 年，V8 从 stop-the-world 标记切换到 增量标记。应用增量标记算法，GC 能够将回收工作分解成很多小工作，穿插在 JS 工作两头执行，这样防止了利用呈现卡顿的状况

并发标记

而后在 2018 年，GC 技术又有重大突破，就是 并发标记 。 让 GC 扫描和标记对象时，容许 JS 同时运行

标记压缩

革除后会造成堆内存呈现内存碎片的状况，当碎片超过肯定限度后会启动 标记压缩算法，将存活的对象向堆中的一端挪动，到所有对象挪动实现，就清理掉不须要的内存

点赞反对、手留余香、与有荣焉

浏览器工作原理与实际

关于浏览器:V8引擎的JavaScript内存机制

栈和堆

为什么会有栈和堆之分

内存泄露和垃圾回收

内存泄露

判断内存泄露

什么状况下会造成内存泄露

内存泄露如何防止

垃圾回收

回收执行栈中数据

回收堆中的数据

援用计数

新生代和老生代

新生代

老生代

标记革除

增量标记

并发标记

标记压缩

结语

参考