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 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
JS实现鼠标移动拖尾
Dec 27 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
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
php构造函数实例讲解
2013/11/13 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
Python去除列表中重复元素的方法
2015/03/20 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
一年级学生期末评语
2014/04/21 职场文书
个人融资协议书
2014/10/02 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
英语导游欢迎词
2015/09/30 职场文书
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技