谈谈JavaScript中的垃圾回收机制


Posted in Javascript onSeptember 17, 2020

JavaScript 具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。

在编写 JavaScript 程序时,开发人员不用再关心内存使用问题,所需内存的分配以及无用内存的回收完全实现了自动管理。

这种垃圾收集机制的原理其实很简单:找出那些不再继续使用的变量,然后释放其占用的内存。为此,垃圾收集器会按照固定的时间间隔(或代码执行中预定的收集时间), 周期性地执行这一操作。

具体到浏览器中的实现,则通常有两个策略,分别为标记清除和引用计数。

一、标记清除

JavaScript 中最常用的垃圾收集方式是标记清除(mark-and-sweep)。当变量进入环境(例如,在函数中声明一个变量)时,就将这个变量标记为“进入环境”。而当变量离开环境时,则将其标记为“离开环境”。

垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。可以使用任何标记方式,比如,可以通过翻转某个特殊的位来记录一个变量何时进入环境, 或者使用一个“进入环境的”变量列表及一个“离开环境的”变量列表来跟踪哪个变量发生了变化。

然后,它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了。

最后,垃圾收集器完成内存清除工作,销毁那些带标记的值并回收它们所占用的内存空间。

二、引用计数

另一种不太常见的垃圾收集策略叫做引用计数(reference counting)。引用计数的含义是跟踪记录每个值被引用的次数。

当声明了一个变量并将一个引用类型值赋给该变量时,则这个值的引用次数就是 1。 如果同一个值又被赋给另一个变量,则该值的引用次数加 1。相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数减 1。

当这个值的引用次数变成 0 时,则说明没有办法再访问这个值了,因而就可以将其占用的内存空间回收回来。

这样,当垃圾收集器下次再运行时,它就会释放那些引用次数为零的值所占用的内存。

存在的问题:只要在 IE 中涉及 COM(Component Object Model,组件对象模型)对象,就会存在循环引用的问题。如下面代码所示:

var element = document.getElementById("some_element");
var 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;

将变量设置为 null 意味着切断变量与它此前引用的值之间的连接。当垃圾收集器下次运行时,就会删除这些值并回收它们占用的内存。

三、管理内存

确保占用最少的内存可以让页面获得更好的性能。而优化内存占用的最佳方式,就是为执行中的代码只保存必要的数据。

一旦数据不再有用,最好通过将其值设置为 null 来释放其引用——这个做法叫做解除引用(dereferencing)。

这一做法适用于大多数全局变量和全局对象的属性。局部变量会在它们离开执行环境时自动被解除引用,如下面这个例子所示:

function createPerson(name){
 var localPerson = new Object();
 localPerson.name = name;
 }
var globalPerson = createPerson("Nicholas");
globalPerson = null; // 手工解除globalPerson 的引用

   变量 globalPerson 取得了 createPerson()函数返回的值。在 createPerson() 函数内部,我们创建了一个对象并将其赋给局部变量localPerson,然后又为该对象添加了一个名为 name 的属性。最后,当调用这个函数时,localPerson 以函数值的形式返回并赋给全局变量 globalPerson。

由于 localPerson 在 createPerson()函数执行完毕后就离开了其执行环境,因此无需我们显式地去为它解除引用。

但是对于全局变量 globalPerson 而言,则需要我们在不使用它的时候手工为它解除引用,这也正是上面例子中最后一行代码的目的。

以上就是谈谈JavaScript中的垃圾回收机制的详细内容,更多关于JavaScript 垃圾回收的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript 函数式编程的原理
Oct 16 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 #Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 #Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 #Javascript
原生js+css实现tab切换功能
Sep 17 #Javascript
vue使用screenfull插件实现全屏功能
Sep 17 #Javascript
Vue使用screenfull实现全屏效果
Sep 17 #Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 #Javascript
You might like
用PHP来计算某个目录大小的方法
2014/04/01 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
python新手经常遇到的17个错误分析
2014/07/30 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
wxPython实现画图板
2020/08/27 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
python中entry用法讲解
2020/12/04 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
2014年销售助理工作总结
2014/12/01 职场文书
加强党性修养心得体会
2016/01/21 职场文书
2019新员工心得体会
2019/06/25 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python