内存泄漏

参考 : https://www.jianshu.com/p/12d5209ef882

<style>
    #button{
         100px;
        height: 100px;
        background: red;
        cursor: pointer;
    }
</style>
<body>
   <div id="button"></div>
</body>
<script>

var button = document.getElementById('button');
button.addEventListener('click', function () {
    var a = new Array(100000).fill(1);
    var b = new Array(20000).fill(1);
});
</script>
</html>

1.监听内存情况

不点击的情

最后内存显示的线，都变低了，因为一个，垃圾回收机制会把这部分的变量给回收掉。

第二次点击按钮，然后蓝色的一条线就是js事件的占用内存情况，因为没用刷新页面，所以全局被垃圾回收掉的变量已经不占内存了

浏览器的垃圾回收机制，是每隔3.5秒（差不多，肉眼测量）回收一次不用的内存

var arr = [];
var button3 = document.getElementById('button');
button3.addEventListener('click', function () {
    var a = new Array(100000);
    var b = new Array(20000);
    arr.push(b);
});

等浏览器第一次回收内存以后，疯狂点击按钮，之后，内存会变高,然后浏览器又回收了一次，内存降低了一点

，再疯狂点击几次，就看到内存又变高了，然后浏览器又回收了一次内存，之后就稳定在这个值上面。

值变得越来越高，没用被释放掉，即使垃圾回收了，内存任然被占用不被释放掉。

这样就是内存泄漏。

但是

var b = "sssss";字符串就不会造成内存的泄漏，因为数组是引用，不能被释放。但是变量会被释放掉。

分析一下：

因为点击按钮，以后会生成一个数组，内存会给这个数组分配一个内存空间。执行完毕以后，分配给数组的内存应该被释放掉，但是这个数组被外部的arr数组保存了引用，
它就不会被释放掉了
就一直保存在内存里面，每次点击一次，就会再分配一个新的内存空间。

因为浏览器的内存是有限的，内存不够的时候，就会去释放内存，垃圾回收机制。内存不断被占掉，
然后新的程序变量运行内存不够就会去
不停的释放内存，就会让浏览器越来越卡，甚至崩溃。为啥页面逻辑越写越多，页面越来越卡，还会奔溃，就是内存管理有问题。

查看页面动态内存情况




可以看出内存泄漏的情况

反复执行同个函数，内存却梯状式增长，手动点击 GC 内存也没有下降，说明函数每次执行都有部分内存泄漏了（引用别人的原话）。