前端工程师必备之----内存泄露

什么是内存

     内存是计算机中重要的部件之一，它是与CPU进行沟通的桥梁。计算机中所有程序的运行都是在内存中进行的，因此内存的性能对计算机的影响非常大。

 造成内存泄露的原理：

    new了一个对象之后，它申请占用了一块堆内存，当把这个对象指针置为null时

或者离开作用域导致被销毁，那么这块内存没有人引用它了在JS里面就会被自动垃圾回收。

但是如果这个对象指针没有被置为null，且代码里面没办法再获取到这个对象指针了，就会导致无法释放掉它指向的内存，也就是说发生了内存泄露。

内存泄露的原因:

1.循环引用

   第一种：多个对象循环引用

       var a=new Object;

        var b=new Object;

        a.r=b;

        b.r=a;

    第二种：循环引用自己

       var a=new Object;

        a.r=a;

2.闭包

3.全局变量

4.没有清理的DOM元素引用

5.被遗忘的定时器以及其中的引用

 

如何排查：

      google 调试工具 Memory Profiles

 

如何处理：

      避免循环引用等发生源

      变量导致的内存泄露，将变量清除 a = null

      事件监听导致的内存泄露，监听后移除

 

VUE

  v-if指令产生的内存泄露:

     就是非常常见的比如我们通过v-if删除了父级元素，但是并没有移除父级元素里的dom片段。通常产生于使用第三方库的时候，比如下面的示例中，我们加载了一个带有非常多选项的选择框，然后我们用到了一个显示/隐藏按钮，通过一个 v-if 指令从虚拟 DOM 中添加或移除它。这个示例的问题在于这个 v-if 指令会从 DOM 中移除父级元素，但是我们并没有清除由第三方库 新添加的 DOM 片段，从而导致了内存泄漏。