知名网站建设定制前端内存泄漏详解（一）

🐱作者简介：猫先生，知名网站建设定制专注前端领域各种技术，热衷分享，知名网站建设定制期待你的关注哦❤️
💫系列专栏：
📝 个人签名：不破不立

🥙一、什么是

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对象
1
2
3
4
5
6
7
8
9

• 不正当的闭包情况

function bibao(){    let a = 0;    return function(){        return a    }}let func = bibao()func()
1
2
3
4
5
6
7
8

return的函数中对bibao函数中的a变量有引用，故而a并不会被垃圾回收，造成内存泄漏，解决办法为当不使用bibao函数时，将func置空：

function bibao(){    let a = 0;    return function(){        return a    }}let func = bibao()func()func = null;
1
2
3
4
5
6
7
8
9

另外，全局变量可以重复使用，但是容易造成变量污染。不同的地方定义了相同的全局变量,这样就会产生混乱。局部变量仅在局部作用域内有效，不可以重复使用，不会造成变量污染。而闭包结合了全局变量和局部变量的优点，可以重复使用变量，并且不会造成变量污染

• 隐式全局变量
  全局变量除非被取消或者重新分配之外也是无法回收的。

function ImplicitGlobalVariables(){    a= 0;    this.b = 3;}
1
2
3
4

• 子元素存在引用

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18