详解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
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
vue实现简单图片上传
Jun 30 Javascript
Node.js 深度调试方法解析
Jul 28 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数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
python3写爬取B站视频弹幕功能
2017/12/22 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
详解python polyscope库的安装和例程
2020/11/13 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
中专毕业生自我鉴定
2013/11/21 职场文书
面试后感谢信
2014/02/01 职场文书
求职简历自我评价范例
2014/03/12 职场文书
80后婚前协议书范本
2014/10/24 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
祝酒词范文
2015/08/12 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
Python基础之数据结构详解
2021/04/28 Python
JavaScript获取URL参数的方法分享
2022/04/07 Javascript