详解Vue依赖收集引发的问题


Posted in Javascript onApril 22, 2019

问题背景

在我们的项目中有一个可视化配置的模块,是通过go.js生成canvas来实现的。但是,我们发现这个模块在浏览器中经常会引起该tab页崩溃。开启chrome的任务管理器一看,进入该页面内存和cpu就会暴涨,内存经常会飙到700多M。但是我们的canvas实际的像素只有约500x500,根据一些粗略的计算,大概只占了1M的内存,这个计算过程可参考100*100的 canvas 占多少内存。那么我们这700M内存是哪里来的呢?

定位问题

我们可以使用chrome开发者工具来分析我们的调用栈。这边我是先通过Performance来帮助我们定位问题,它会帮我们生成一段过程中一些数据的变化,包括js堆内存、dom节点数量、动画帧等数据,如图:

详解Vue依赖收集引发的问题

这是切换至一个canvas画布较大的一个模块的performance分析表现,可以看到占用了472M的内存。下面折线图蓝色部分是js堆内存的变化,而Main下面黄色与紫色的矩形框就是我们的调用栈,上下两部分是按照时间一一对应的。可以看到,蓝色的折线呈高低起伏的态势,GC回收之后低点基本和高点持平,因此可以断定几乎不存在内存泄漏的问题。然后我们可以放大去看一看,内存升高的时候,js做了些什么事情,找一找规律。

 详解Vue依赖收集引发的问题

我们随机找一段内存增长的区域,可以看到在内存增长的过程中,最为频繁调用的就是Observer相关的代码。但是就这么看,我们不能够明白Observer是在干什么。此时我们可以借用Memory选项中的Allocation Sampling按照javascript function来查看内存分配,我们同样录制以上的一段操作。

详解Vue依赖收集引发的问题

此时我们能够清楚的看到,的确是这个Observer在作怪。同时,我们可以看到这是vue的代码,点击右边的文件查看source code,就可以清楚的明白这就是vue在执行依赖收集的操作,此时会给属性添加watcher。那我们这里为什么会有如此多的属性被添加了watcher呢?看了一下代码,原来是我把go.js的一个实例挂到了vue的data选项中,放到data中的属性会被vue执行依赖收集的相关操作,而这个实例拥有非常多的嵌套属性,全部都会被添加watcher。其实,我们只是想单纯的存储一下这个实例,供我们后续调用其相关的方法,添加watcher对我们来说完全没有意义,那我们如何避免这样的问题呢?

解决问题

上网搜索了相关的解决方案,大概有如下几种:

  1. 在data中定义的属性前面加上$,即通知vue该属性不需要被依赖收集,例如:javascript data() { return { $goDiagram: null } }但是这样声明,在template中引用时会报找不到$goDiagram属性的错误,具体的原因我还没深究,有空可以研究一下。
  2. 不在data中声明,直接在赋值的时候声明this.goDiagram = diagram。这同样会遇到第一种方案的问题,模板中会提示找不到goDiagram属性。
  3. 不在data中声明,而是利用$options来存储goDiagram,例如:
export default {
 goDiagram: null,
 mounted() {
  this.$options.goDiagram = xxx
 }
}

 这应该是比较好的一个方法,vue官方中也说明了$options用来包含自定义属性,例如我们平时引入的常量或是枚举类型,我们也不希望它们被添加无意义的watcher,因此可以通过这种方式来定义,在template中引用时只需要{{$options.xxx}}即可。这种方式唯一的缺点就是不能像data那样一眼望去就能清楚地知道你定义了什么属性。
项目中我采用了第一种方式,经过修改后内存占用量减少到原来的1/5到1/6,可以说效果非常好,再也不会出现浏览器崩溃的情况了。

总结

通过这样的一个问题,我们主要能够学习到两点:

  1. 如何通过chrome的开发者工具,去快速地定位代码中存在的内存问题
  2. 不要盲目的将属性都挂载到data选项中,一些常量我们可以采取上面提到的几种方式来定义,以此来作为一种优化手段

以上所述是小编给大家介绍的Vue依赖收集引发的问题详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
详解webpack性能优化——DLL
Oct 20 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 #Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 #Javascript
深入理解vue中的slot与slot-scope
Apr 22 #Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 #Javascript
详解50行代码,Node爬虫练手项目
Apr 22 #Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 #Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 #Javascript
You might like
PHP中的超全局变量
2006/10/09 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
php实现word转html的方法
2016/01/22 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
Flask框架信号用法实例分析
2018/07/24 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
如何利用python生成MD5并去重
2020/12/07 Python
简述DNS进行域名解析的过程
2013/12/02 面试题
党校学习自我鉴定
2014/02/24 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
访谈节目策划方案
2014/05/15 职场文书
个人委托书
2014/07/31 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
pandas提升计算效率的一些方法汇总
2021/05/30 Python
使用Python开发冰球小游戏
2022/04/30 Python