Vue依赖收集过程中可能引发哪些复杂问题？

本文共计1144个文字，预计阅读时间需要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下面黄色与紫色的矩形框就是我们的调用栈，上下两部分是按照时间一一对应的。