前端内存泄漏详解
🐱作者简介:猫先生,专注前端领域各种技术,热衷分享,期待你的关注哦❤️
📝 个人签名:不破不立
🥙一、什么是内存泄漏
JavaScript 通过自动内存管理实现内存分配和闲置资源回收。基本思路很简单:确定哪个变量不会再使用,然后释放它占有的内存。这个过程是周期性的,即垃圾回收程序每隔一定时间(或者说在代码执行过程中某个预订的收集时间)就会自动运行。垃圾回收是一个近似且不完美的方案,因为某块内存是否还有用,属于“不可判定的”问题,意味着靠算法是解决不了的。
——《JavaScript 高级程序设计(第4版)》4.3 垃圾回收
我们知道了JS对内存管理是自动的,并没特殊的机制去实现。那么为什么有时候会出现内存泄漏的情况呢?主要原因在于应用程序分配内存之后,由于程序设计错误,导致无法对分配的内存进行管理,无法垃圾回收(GC)、释放内存,情况严重则会导致系统卡死。==内存泄漏就是未能释放不在使用的内存==
垃圾回收过程是不实时进行的,因为JavaScript是一门单线程的语言,每次执行垃圾回收,会使程序应用逻辑暂停,执行完垃圾后回收再执行应用逻辑,这种行为称为全停顿,所以 ==一般垃圾回收会在cpu闲时进行== 。
🥪二、内存生命周期
我们在创建变量、函数或者其他任何内容的时候,JS引擎会自动为我们分配内存,并且在不需要的时候释放内存。一共需要经历三个阶段:
- 内存分配:当我们创建变量或函数时,JS引擎会为我们分配一些内存空间来存放该变量的内容
- 内存使用:使用分配得到内存,就可以在js中读取并写入变量或者对象的属性值
- 内存释放:在不需要变量或者函数时候,JS引擎会自动清除(闭包、程序bug除外)
当然内存分配包括了静态分配和动态分配,我们在这里暂且不谈论。
🌮三、导致内存泄漏可能存在的情况以及解决方法
- addEventListener
addEventListener添加在全局变量比如:window、body等时,组件销毁时,就会导致内存泄漏;如果在组件dom上进行监听便不会导致内存泄漏,因为dom销毁时候监听器会自动移除。使用addEventListener导致内存泄漏时,需要使用removeEventListener移除。 - setTimeout/setTimeInterval
使用定时器时候一定要记得在不需要使用时候用clearTimeout、clearInterval清除掉。 - URL.createObjectURL
每次调用URL.createObjectURL时候都会创建一个新的对象,在不需要使用该对象的时候,一定要用URL.revokeObjectURL()清除掉创建的对象。
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', filename)
document.body.appendChild(link)
link.click()
document.body.removeChild(link); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
- 不正当的闭包情况
function bibao(){
let a = 0;
return function(){
return a
}
}
let func = bibao()
func()
return的函数中对bibao函数中的a变量有引用,故而a并不会被垃圾回收,造成内存泄漏,解决办法为当不使用bibao函数时,将func置空:
function bibao(){
let a = 0;
return function(){
return a
}
}
let func = bibao()
func()
func = null;
另外,全局变量可以重复使用,但是容易造成变量污染。不同的地方定义了相同的全局变量,这样就会产生混乱。局部变量仅在局部作用域内有效,不可以重复使用,不会造成变量污染。而闭包结合了全局变量和局部变量的优点,==可以重复使用变量,并且不会造成变量污染==
- 隐式全局变量
全局变量除非被取消或者重新分配之外也是无法回收的。
function ImplicitGlobalVariables(){
a= 0;
this.b = 3;
}
- 子元素存在引用
div id="root">
<ul id="ul">
<li></li>
<li id="li"></li>
</ul>
</div>
<script>
let root = document.querySelector('#root')
let ul = document.querySelector('#ul')
let li = document.querySelector('#li')
// 由于ul变量存在,整个ul及其子元素都不能被回收
root.removeChild(ul)
// 虽置空了ul变量,但由于li3变量引用ul的子节点,所以ul元素依然不能被回收
ul = null
// 已无变量引用,此时可以回收
li = null
</script>
- 点赞
- 收藏
- 关注作者
评论(0)