js造成内存泄漏的几种情况
1、介绍js的垃圾回收机制
js的垃圾回收机制就是为了防止内存泄漏的，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。所以这里又涉及到变量的生命周期，当一个变量的生命周期结束之后它所指向的内存就应该被释放。JS有两种变量，全局变量和在函数中产生的局部变量。局部变量的生命周期在函数执行过后就结束了，此时便可将它引用的内存释放（即垃圾回收），但全局变量生命周期会持续到浏览器关闭页面。所以当我们过多的使用全局变量的时候也会导致内存泄漏的问题
2、主要存在内存泄漏的问题点
- BOM / DOM对象泄漏
- scipt中存在对BOM / DOM对象的引用
- javaScript对象泄漏
- 闭包函数导致的泄漏
3、主要关注的代码点
- DOM中的addEventLisner 函数及派生的事件监听， 比如Jquery 中的on 函数， vue 组件实例的 $on 函数，第三方库中的初始化函数
- BOM对象的事件监听，比如webSocket的监听事件
- 避免不必要的函数引用
- 如果是要render函数，避免在html标签中DOM / BOM事件
4、在vue中如何处理内存泄漏的
- 如果在mounted/created 钩子中绑定了DOM/BOM 对象中的事件，需要在beforeDestroy 中做对应解绑处理
- 如果在mounted/created 钩子中使用了第三方库初始化，需要在beforeDestroy 中做对应销毁处理
- 如果组件中使用了定时器，需要在beforeDestroy 中做对应销毁处理
- 模板中不要使用表达式来绑定到特定的处理函数，这个逻辑应该放在处理函数中
- 如果在mounted/created 钩子中使用了$on，需要在beforeDestroy 中做对应解绑($off)处理
- 某些组件在模板中使用 事件绑定可能会出现泄漏，使用$on 替换模板中的绑定
Vue官网讲解避免内存泄露https://cn.vuejs.org/v2/cookbook/avoiding-memory-leaks.html
另外，vue 在IE edge浏览器下，父子组件的场景，子组件依赖父组件的状态，子组件控制父组件状态变化从而反馈给子组件的展示变化，子组件通过v-if模式存在于视图中，父组件通过状态控制子组件的v-if状态变换。子组件控制父组件状态完成子组件数据填充后，父组件切换子组件的v-if状态，子组件占用dom结构被清理。此时，子组件存在时的内存占用未被释放，当父组件再次回切v-if状态时，子组件重新展示，内存飙升，重复几次切换后，内存飙升明显，页面卡顿。
