加入收藏 | 设为首页 | 会员中心 | 我要投稿 常州站长网 (https://www.0519zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

浏览器垃圾回收机制与 Vue 项目内存泄漏场景分析

发布时间:2019-09-12 16:54:07 所属栏目:优化 来源:全栈高手
导读:副标题#e# 1. 介绍 浏览器的 Javascript 具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存。其原理是:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。但是这个过程不是实时的

调用 addEventListener 添加事件监听后在 beforeDestroy 中调用 removeEventListener移除对应的事件监听。为了准确移除监听,尽量不要使用匿名函数或者已有的函数的绑定来直接作为事件监听函数。

  1. mounted() { 
  2.  const box = document.getElementById('time-line') 
  3.  this.width = box.offsetWidth 
  4.  this.resizefun = () => { 
  5.  this.width = box.offsetWidth 
  6.  } 
  7.  window.addEventListener('resize', this.resizefun) 
  8.  }, 
  9.  beforeDestroy() { 
  10.  window.removeEventListener('resize', this.resizefun) 
  11.  this.resizefun = null 
  12.  } 

4.5 观察者模式引起的内存泄漏

在 spa 应用中使用观察者模式的时候如果给观察者注册了被观察的方法,而没有在离开组件的时候及时移除,可能造成重复注册而内存泄漏;

举个栗子:进入组件的时候 ob.addListener("enter",_func),如果离开组件 beforeDestroy 的时候没有 ob.removeListener("enter",_func),就会导致内存泄漏。

更详细的栗子参考:德州扑克栗子

4.6 上下文绑定引起的内存泄漏

有时候使用 bind/apply/call 上下文绑定方法的时候,会有内存泄漏的隐患。

  1. var ClassA = function(name) { 
  2.  this.name = name 
  3.  this.func = null 
  4. var a = new ClassA("a") 
  5. var b = new ClassA("b") 
  6. b.func = bind(function() { 
  7.  console.log("I am " + this.name) 
  8. }, a) 
  9. b.func() // 输出: I am a 
  10. a = null // 释放a 
  11. //b = null; // 释放b 
  12. //b.func = null; // 释放b.func 
  13. function bind(func, self) { // 模拟上下文绑定 
  14.  return function() { 
  15.  return func.apply(self) 
  16.  } 

使用 chrome dev tool>memory>profiles 查看内存中 ClassA 的实例数,发现有两个实例, a和 b。虽然 a 设置成 null 了,但是 b 的方法中 bind 的闭包上下文 self 绑定了 a,因此虽然 a释放,但是 b/b.func没有释放,闭包的 self 一直存在并保持对 a 的引用。

(编辑:常州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读