Vue中依赖收集机制可能导致哪些问题详解？

本文共计1148个文字，预计阅读时间需要5分钟。

问题背景：在我们的项目中，有一个可可视化的配置模块，是通过go.js生成canvas来实现的。但是，我们发现这个模块在浏览器中经常会导致该tab页面崩溃。

解决方案：打开Chrome的任务管理器，查看该页面。

问题背景

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

定位问题

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

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

我们随机找一段内存增长的区域，可以看到在内存增长的过程中，最为频繁调用的就是Observer相关的代码。但是就这么看，我们不能够明白Observer是在干什么。