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

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

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

image.png

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

  1. 防止页面占用内存过大,引起客户端卡顿,甚至无响应,提升用户体验
  2. 随着前端技术学习的深入,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;
}

标记清除方式

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

  1. 全局执行环境,可以理解为最外围的执行环境
  • 根据宿主对象不同,表示执行环境的对象也不一样:在浏览器中,全局执行环境被认为是window对象;在Node.Js中全局执行环境则认为是global对象
  • 全局变量和函数都是作为window/global的对象和方法创建的
  • 当某个环境中的所有代码执行完毕后,该环境被销毁,保存在环境中的所有变量和函数定义也随之被销毁
  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内存分配
  • 64位操作系统下,V8总内存为1.4G左右;32位操作系统总内存为0.7G
  • 64位系统下,新生代空间为64MB,老生代的空间为1400MB
  • 32位系统下,新生代空间为32MB,老生代的空间为700MB

问题: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. 防止内存泄漏
  • 避免滥用缓存,因为缓存通常会定义在全局,推荐使用session/localstorage等前端存储来代替V8缓存,使用V8做缓存的时候,建议对缓存对象加锁,即控制缓存里面的对象数量,超过数量时,可以将缓存里较早的对象清除
  • 注意减少大内存量操作,如读写大文件时,可以采用流的方式,避免一次性读取整个文件,导致内存溢出,浏览器卡死
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,128评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,316评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,737评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,283评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,384评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,458评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,467评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,251评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,688评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,980评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,155评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,818评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,492评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,142评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,382评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,020评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,044评论 2 352

推荐阅读更多精彩内容