JavaScript的垃圾回收机制与内存管理


Posted in Javascript onAugust 06, 2020

如果我们想要优化性能,首先我们必须得了解JavaScript中的垃圾回收机制,这样可以将很多没有被使用到的变量从内存中清除掉,腾出更多的内存空间,给别的变量分配内存空间。

JavaScript中的垃圾回收机制

引言

本篇文章将讲解一下javascript的垃圾回收机制。同时,我们必须先具备作用域链的概念,不懂的小伙伴可以先花5分钟观看一下这篇文章,简单了解一下作用域链的知识——从零开始讲解JavaScript中作用域链的概念及用途

正文

一、垃圾回收机制

在JavaScript中,具有自动垃圾回收机制,也就是说执行环境会自动负责管理代码执行过程中的内存使用情况,会自动清除一些没有用的变量,以此来释放内存。该机制每隔一段时间会执行一次。

例如下面这段代码,函数 change 在执行时,声明了一个局部变量my_color,然后等函数执行完毕以后,这个局部变量也没有作用了,所以这时垃圾回收机制就会将这个没用的的局部变量my_color给清除掉。

let color = 'red'

function change() {
	let my_color = 'blue'
	color = 'green'
}

change()

JavaScript中能实现这样的垃圾回收的功能的一共有两种方式: 标记清除 、引用计数

(1)标记清除

标记清除是JavaScript中最常用的垃圾回收方式。它的实现方式是这样的,当代码执行在一个环境中时,每声明一个变量,就会对该变量做一个标记,例如标记一个进入执行环境;当代码执行进入另一个环境中时,也就是说要离开上一个环境,这时对上一个环境中的变量做一个标记,例如标记一个离开执行环境,等到垃圾回收执行时,会根据标记来决定要清除哪些变量。

(2)引用计数

引用计数是一种不太常用的垃圾回收方式。顾名思义,就是针对值为引用类型数据的变量进行计数,那么我们先来看一下以下这个例子,来理解一下这个方式的实现方式

let color = [1, 2, 3]

function change() {
	let new_color = [4, 5, 6]
	color = new_color
}

change()

console.log(color) //返回 [4, 5, 6]

这个例子中的函数change内部声明了一个变量new_color,并将一个引用类型值赋值给它,同时又将变量new_color赋值给了全局变量color,那么这种情况下,这个局部变量new_color就不会被当成垃圾回收了,因为此时的变量new_color并不是一个无用的局部变量了,它被全局变量color所引用了。

那么为什么变量new_color不会被当成垃圾回收呢?其实引用计数的垃圾回收方式是这样的,当声明一个变量时,会给该变量设定一个值为0的引用次数,当该变量被别的变量所引用,就将引用次数+1,若取消了原本的引用,则引用次数-1,而垃圾回收机制就是判断一个变量的值的引用数是否为0,如果为0,就被当成无用变量给回收掉,如果不为0,则不对该变量做任何的处理。

二、管理内存

有时我们需要手动管理一下内存的分配和清除,应该很好理解,如果有更大的内存空间,因为可以给更多的变量分配内存,就会提高代码运行的效率,增加线程中能够执行的代码语句的数量。

所以我们要确保占用更少的内存使得页面获得更好的性能,就可以只将需要用到的数据保存到变量中,一旦数据不再使用,我们可以通过给变量赋值null来释放数据的引用,这种方法就叫做解除引用。这种方法大多数是用于全局变量,因为局部变量一般在离开环境以后就会被自动清除。

我们来改变一下上面这个例子,使得变量new_color被引用完后,当成无用变量给清除掉

let color = [1, 2, 3]

function change() {
	let new_color = [4, 5, 6]
	color = new_color
}

change()

console.log(color) //返回 [4, 5, 6]

color = null

在这个例子中,函数change内部声明的变量new_color被全局变量color所引用,所以此时变量new_color的引用次数为1,我们为了让变量new_color被清除,所以在代码的最后一行,赋值一个null给全局变量color,手动解除了变量color对变量new_color的引用,此时变量new_color的引用次数-1,所以啊当前它的引用次数为0了。当垃圾回收机制执行的时候,发现它的引用次数为0,就把该变量当成无用变量给清除了,释放了内存。

结束语

理解了js的垃圾回收机制,我们才能修改代码对性能进行优化 。好了,JavaScript的垃圾回收机制的讲解就讲到这里,希望对大家有所帮助。

我是前端Lpyexplore,原创不易,喜欢我的文章的点个关注,甩个赞,不嫌麻烦的评论支持一下,谢谢大家啦~

到此这篇关于JavaScript的垃圾回收机制与内存管理的文章就介绍到这了,更多相关JavaScript的垃圾回收机制内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
js实现中文实时时钟
Jan 15 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 #Javascript
如何利用javascript接收json信息并进行处理
Aug 06 #Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 #Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 #Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 #Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 #Javascript
javascript读取本地文件和目录方法详解
Aug 06 #Javascript
You might like
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
JS解析XML的实现代码
2009/11/12 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
Python进程间通信Queue实例解析
2018/01/25 Python
python3处理含有中文的url方法
2018/05/10 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
英国在线花园中心:You Garden
2018/06/03 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
成人大专自我鉴定范文
2013/10/19 职场文书
写给女生的道歉信
2014/01/14 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
暑期工社会实践报告
2015/07/13 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL