100字范文 > js垃圾回收机制内存泄露和内存溢出解决闭包产生的内存泄露详解

js垃圾回收机制内存泄露和内存溢出解决闭包产生的内存泄露详解

时间：2019-02-11 20:27:43

一、内存的周期和回收机制

分配内存----->使用内存----->释放内存

1.JS 环境中分配的内存有如下声明周期：

内存分配：当我们声明变量、函数、对象的时候，系统会自动为他们分配内存内存使用：即读写内存，也就是使用变量、函数等内存回收：使用完毕，由垃圾回收机制自动回收不再使用的内存

2.JS 的内存回收

JS 有自动垃圾回收机制，那么这个自动垃圾回收机制的原理是什么呢？其实很简单，就是找出那些不再继续使用的值，然后释放其占用的内存。

大多数内存管理的问题都在这个阶段。在这里最艰难的任务是找到不再需要使用的变量。

①不再需要使用的变量也就是生命周期结束的变量，局部变量，局部变量只在函数的执行过程中存在，当函数运行结束，变量就没有存在的必要了，没有其他引用(闭包)，那么该变量会被回收。

②对于全局变量，很难判断什么时候不用这些变量，无法正常回收，所以全局变量的生命周期直至浏览器卸载页面才会结束，也就是说全局变量不会被当成垃圾回收。

因为自动垃圾回收机制的存在，开发人员可以不关心也不注意内存释放的有关问题，但对无用内存的释放这件事是客观存在的。不幸的是，即使不考虑垃圾回收对性能的影响，目前最新的垃圾回收算法，也无法智能回收所有的极端情况。

二、内存泄露(内存浪费)

官方解释：内存泄漏（memory leak）是指程序中己动态分配的内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。

通俗点就是指由于疏忽或者错误造成程序未能释放已经不再使用的内存，不再用到的内存却没有及时释放，从而造成内存上的浪费。

例子:

使用闭包产生的内存浪费来举例，不懂闭包的可以先去看我的另一篇文章

JS---JS中的闭包详解_Cirrod的博客-CSDN博客

注意点：

new Array()用于创建数组，存放在堆中，变量arr是对这个数组的引用，指向数组，放在栈中

在浏览器查看程序占用堆的内存

ps：可以看到此时堆内存占用81mb，也就是存在两个Array(10000000)

修改代码进行内存释放：

在浏览器查看程序占用堆的内存

ps：可以看到此时堆内存占用1.4mb，也就是两个Array(10000000)已经被浏览器进行回收

三、内存溢出

当程序运行需要的内存超过了剩余的内存时, 就出抛出内存溢出的错误。

for (let index = 0; index < 10000000000; index++) {let element = new Array(10000000)}

四、常见的js内存泄露

1.意外的全局变量（就是上面所说的全局变量不能被js垃圾回收机制回收）

在js中，一个未声明变量的使用，会在全局对象中创建一个新的变量；在浏览器环境下，全局对象就是window

function test() {names = 'hsq'}test();console.log(names);//hsq

相当于

function test() {window.names = 'hsq'}test();console.log(window.names);//hsq

解决办法：

①使用js严格模式

未声明但直接赋值的变量将失败

//js文件"use strict";function test() {names = 'hsq'}test();console.log(names);//报错

②变量使用完后将变量的内存释放

function test() {names = 'hsq'}test();console.log(names);//hsqnames = nullconsole.log(names);//null

2、计时器和回调函数

定时器setinterval或者settimeout在不需要使用的时候，没有被clear，定时器无法被内存回收，导致定时器的回调函数及其内部依赖的变量都不能被回收，这就会造成内存泄漏。

案例：

<script>let serverData = '后端返回数据';window.setInterval(() => {let renderer=document.getElementById('renderer');if(renderer){renderer.innerText=serverData}},5000)//每5秒更新后端返回的数据</script>

图解：

如果后续 renderer 元素被移除，整个定时器实际上没有任何作用。但如果你没有回收定时器，整个定时器依然有效, 不但定时器无法被内存回收，定时器的回调函数和回调函数中的依赖也无法回收。在这个案例中定时器的回调函数和回调函数里面的的依赖变量（serverData）也无法被回收。

解决方案：当不需要interval定时器或者timeout定时器的时候，调用clearinterval或者cleartimeout清除定时器

<script>let serverData = '后端返回数据';let timer = window.setInterval(() => {let renderer = document.getElementById('renderer');if (renderer) {renderer.innerText = serverData}//清除定时器，防止内存泄露clearInterval(timer)}, 5000)//每5秒更新后端返回的数据</script>

3、DOM引用

虽然我们将dom元素已经移除，但是对dom元素的引用没有清除，也会造成内存泄露

案例：

let img=document.getElementById('img')img.src='http://image.png'document.body.removeChild(img)// 这时我们对于 #image 仍然有一个引用, Image 元素, 仍然无法被内存回收.

ps:

变量img存储的是dom元素（#img）的引用，我们将dom元素（#img）在文档树中清除掉后，dom元素（#img）已经不存在了，但对dom元素（#img）的引用还存在，也就是变量img还是存储着对dom元素（#img）的引用，也会造成内存泄露

解决方案：

利用null释放内存

let img=document.getElementById('img')img.src='http://image.png'document.body.removeChild(img)// 这时我们对于 #image 仍然有一个引用, Image 元素, 仍然无法被内存回收.img=null;//清空dom元素的引用

注意点：

另外需要注意的一个点是，对于一个 Dom 树的叶子节点的引用。举个例子: 如果我们引用了一个表格中的td元素，一旦在 Dom 中删除了整个表格，我们直观的觉得内存回收应该回收除了被引用的 td 外的其他元素。但是事实上，这个 td 元素是整个表格的一个子元素，并保留对于其父元素的引用。这就会导致对于整个表格的引用都无法进行内存回收。所以我们要小心处理对于 Dom 元素的引用。