详解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 相关文章推荐
Ajax 数据请求的简单分析
Apr 05 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
纯js简单日历实现代码
Oct 05 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
JS实现炫酷轮播图
Nov 15 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
日本十大惊悚动漫
2020/03/04 日漫
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
php并发加锁示例
2016/10/17 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
javascript 写类方式之四
2009/07/05 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
Python实现爬取逐浪小说的方法
2015/07/07 Python
python 上下文管理器使用方法小结
2017/10/10 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
python3中rank函数的用法
2019/11/27 Python
Python 从attribute到property详解
2020/03/05 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
python模拟实现分发扑克牌
2020/04/22 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
python 多线程中join()的作用
2020/10/29 Python
瑞士国际航空官网:SWISS
2016/07/21 全球购物
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
请假条格式范文
2014/04/10 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
建筑安全员岗位职责
2015/02/15 职场文书