JavaScript垃圾回收机制:如何减少JavaScript中的垃圾回收?


一,垃圾回收释义:

垃圾回收基本思路:确定那个变量不会再使用,然后释放它占用的内存。这个过程是周期性的,即垃圾回收程序每隔一定时间就会自动运行。

垃圾回收程序必须跟踪记录那个变量还在使用,以及那个变量不会再使用,以便回收内存,否则,JavaScript的解释器将会消耗完系统中所有可用的内存,造成系统崩溃;

var n = 'java';

var c = 'c++';

var n = c;//重写n

console.log(n);//'c++' 

代码运行之后,“java”这个字符串失去了引用,系统检测到这个事实之后,就会释放该字符串的存储空间以便这些空间可以被再利用;

各大浏览器采用的垃圾回收有两种方法:标记清理和引用计数

二,标记清理:

    标记清理是JavaScript最常用的垃圾回收策略;

    当变量进入上下文,比如在函数内部声明一个变量时,这个变量会被加上存在于上下文中的标记,而在上下文中的变量,逻辑上讲,永远不应该释放他们的内存,因为只要上下文中的代码在运行,就有可能用到它们,当变量离开上下文时,也会被加上离开上下文的标记。

  给变量加标记的方式有很多种,比如当变量进入上下文时,反转某一位;或者可以维护“在上下文中”和“不在上下文中”两个变量列表,可以把变量从一个列表转移到另一个列表。

垃圾回收程序运行的时候,会标记内存中所有的变量(标记方法有多种),然后,它会将所有在上下文中的变量,以及被在上下文中的变量引用的变量的标记去掉,再此之后再被加上标记的变量就是待删除了,原因是在任何上下文中的变量都访问不到它们了,随后垃圾回收程序走一次内存清理,销毁带标记的所有值并收回它们的内存。


三,引用计数:

   另一种不太常见的垃圾回收策略是引用计数。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时,则这个值的引用次数就是1。相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数就减1。当这个引用次数变成0时,则说明没有办法再访问这个值了,因此 可以安全的收回其内存了。垃圾回收程序瑕疵运行的时候就会释放引用数为0的值得内存。

 引用计数方法存在 循环引用的问题,就是对象A有一个指针指向对象B,而对象B也引用了对象A,例如:

function problem(){

    let objA = new Object();

    let objB = new Object();

    objA.someOtherObject = objB;

    objB.anOtherObject =objA;

}

 objA和objB通过各自的属性相互引用;也就是说这两个对象的引用次数都是2。在采用引用计数的策略中,由于函数执行之后,这两个对象都离开了作用域,函数执行完成之后,objA和objB还将会继续存在,因为他们的引用次数永远不会是0。这样的相互引用如果说很大量的存在就会导致大量的内存永远不会被释放。

IE中有一部分对象并不是原生JavaScript对象。例如,其BOM和DOM中的对象就是使用C++以COM(Component Object

Model,组件对象)对象的形式实现的,而COM对象的垃圾回收器就是采用的引用计数的策略。因此,即使IE的Javascript引擎使用标记清除的策略来实现的,但JavaScript访问的COM对象依然是基于引用计数的策略的。只要IE中涉及COM对象,就会存在循环引用的问题;示例如下:

let element = document.getElementById('some_element');

let myObject = new Object();

myObject.element = element;

element.someObject = myObject

 面这个例子中,在一个DOM元素(element)与一个原生JavaScript对象(myObject)之间建立了循环引用。其中,变量myObject有一个名为element的属性指向element;而变量element有一个名为someObject的属性回指到myObject。由于循环引用,即使将例子中的DOM从页面中移除,内存也永远不会回收。

 为避免类似循环引用问题,在确保不使用的情况下切断原生JavaScript对象与DOM元素之间的连接。通过以下代码可以清楚前面例子中建立的循环引用:

myObject.element = null;

element.someObject = null;


四,内存管理:提升性能

   1,解除引用:

       将内存占用量保持在一个较小的值可以让页面性能更好,优化内存占用的最佳手段就是保证在执行代码时只保存必要的数据,如果数据不再必要,那么把它设置为null,从而释放其引用。

       适合全局变量和全局对象的属性。局部变量在超出作用域后会被自动解除引用。

      示例如下:

function cperson(name){

    let locPerson = new Object();

    locPerson.name = name;

    return locPerson;

}

let globalPerson = cperson('java');

console.log(globalPerson.name)//'java'

globalPerson = null;//解除globalPerson对值得引用

   代码中,变量globalPerson保存着cperson()函数条用返回的值,在cperson()内部,locPerson创建了一个对比并给他添加了一个name属性,然后locPerson作为函数值被返回,并赋值给globalPerson。locPerson在cperson()内部执行完成超出上下文后会自动被解除引用。不需要显示处理,但globalPerson是一个全局变量,应该在不再需要时手动解除其引用(globalPerson = null);

注意:解除对一个值得一弄并不会自动导致行管内存被回收,解除引用的关键在于确保相关的值已经不再上下文里了,因此它在下次垃圾回收时会被回收。

2,使用const 和 let 声明提升性能:

   const 和 let都是以块为作用域,相比使用var,使用这两个新关键字可能会更早的让垃圾回收程序接入,尽早回收应该回收的内存。在块作用域比函数作用域更早终止的情况下,这就有可能发生。

3,隐藏类和删除操作:

      根据JavaScript坐在的运行环境,有时候需要根据浏览器使用JavaScript引擎来采取不同的性能优化策略。比如 Chrome的 V8JavaScript引擎,V8将在解释后的JavaScript代码编译为实际的机器代码时会利用“隐藏类”;运行期间,V8会将创建的对象与隐藏类关联起来,以跟踪他们的属性特征。

  如下示例:V8会在后台配置,让这两个类实例共享相同的隐藏类,因为这两个实例共享同一个构造函数和原型;

function Cperson(){

    this.name = 'java script';

}

let n1 = new Cperson();

let n2 = new Cperson();

避免JavaScript的“先创建再补充”式的动态属性赋值,并在构造函数中一次性声明所有属性。

  示例如下:下面代码在不考虑 hasOwnProperty的返回值,可以共享一个隐藏类,从而带来潜在的性能提升。

function Cperson(sex){

    this.name = 'java script';

    this.person = sex;

}

let n1 = new Cperson();

let n2 = new Cperson('man');

     最佳方案是把不想要的属性设置为null,这样可以保持隐藏类不变和继续共享,同时也能达到删除引用值供垃圾回收的效果:如下示例:

function Cperson(){

    this.name = 'java script';

    this.person = 'php hello';

}

let n1 = new Cperson();

let n2 = new Cperson();

n1.person = null;


4,内存泄漏:

         内存泄漏大部分是由不合理的引用导致的;

  >> 意外声明全局变量师最常见的内存泄漏问题,

         如下代码示例:

function evetPerson(){

    name = 'java';

}

     解释器会把变量name当做window的属性来创建(相当于window.name = ‘java’)。在window对象上创建属性,只要window对象本身不被清理就不会消失,只要在变量声明前加上 var  let 或者 const关键字即可。这样变量就会在函数执行完毕后离开作用域。

 >> 定时器也可能会导致内存泄漏。如下代码定时器的回调通过闭包引用了外部变量:

let name = 'java';

setInterval(()=>{

    console.log(name);

},100)

  只要定时器一直运行,回调函数中引用的name就会一直占用内存,垃圾回收程序就不会清理外部去变量。

  >> 使用JavaScipt闭包很容易在不知不觉间造成内存泄漏:

     如下示例:

let outer = function(){

    let name = 'java';

    return function(){

        return name;

    }

}

  调用outer()会导致分配给name的内存被泄漏,以上代码创建了一个内部闭包,只要返回的函数存在就不能清理name,闭包一直在引用着它。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容

  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 10,544评论 0 11
  • 彩排完,天已黑
    刘凯书法阅读 4,176评论 1 3
  • 表情是什么,我认为表情就是表现出来的情绪。表情可以传达很多信息。高兴了当然就笑了,难过就哭了。两者是相互影响密不可...
    Persistenc_6aea阅读 123,811评论 2 7