vue 如何清除浏览器的内存_浏览器垃圾回收

浏览器垃圾回收

• 什么是垃圾不在需求，即为垃圾全局变量随时可能用到，所以一定不是垃圾
• 如何捡垃圾标记空间中[可达]值从根节点(root)触发，遍历所有的对象可以遍历到的对象，是可达的(reachable)没有被遍历到的对象，不可达的(unreachable)回收「不可达」的值所占据的内存做内存整理
• 什么时候捡垃圾前端有其特殊性，垃圾回收的时候会造成页面卡顿分代收集、增量收集、闲时收集

浏览器中不同类型变量的内存都是何时释放？

• Javascritp 种类型：值类型，引用类型。
• 引用类型在没有引用之后，通过 V8 自动回收。
• 值类型如果处于闭包的情况下，要等闭包没有引用才会被 V8 回收。非闭包的情况下，等待 V8 的新生代切换的时候回收。

哪些情况会导致内存写到？如何避免？

内存泄漏是指你【用不到】(访问不到)的变量，依然占据着内存空间，不能被再次利用起来。

以 Vue 为例，通常有这些情况：

• 监听在 window/body 等事件没有解绑
• 绑在 EventBus 的事件没有解绑
• Vuex 的 $store，watch 了之后没有 unwatch
• 使用第三方库创建，没有调用正确的销毁函数

解决办法：beforeDestroy 中及时销毁

• 绑定了 DOM/BOM 对象中的事件 addEventListener ，removeEventListener。
• 观察者模式 ，off处理。
• 如果组件中使用了定时器，应销毁处理。
• 如果在 mounted/created 钩子中使用了第三方库初始化，对应的销毁。
• 使用弱引用 weakMap、weakSet

weakMap weakSet 和 Map Set 有什么区别？

在 ES6 中为我们新增了两个数据结构 WeakMap、WeakSet，就是为了解决内存泄漏的问题。
它的键名所引用的对象都是弱引用，就是垃圾回收机制遍历的时候不考虑该引用。
只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。
也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。

更多请查看原文：https://juejin.im/post/6861967094318284814#heading-13