借助MicrosoftEdge分离的元素面板分析内存泄漏问题

原先loader中的选项配置可以使用资源模块相应的配置项代替

jielu2022-11-14

这是基于chromium内核的Edge浏览器，为开发者提供的一个用来分析网页DOM内存泄漏的工具，目前Chrome上还没有类似的工具。

这个面板的界面如下，左上方四个按钮功能分别为获取分离的DOM，手动执行GC，生成内存分析以及销毁分离树内的父子链接。

一个DOM节点只有在没有被引用时才会被GC，当DOM节点不在DOM树中，但是却被JS代码保留着引用，这种情况下会造成内存泄漏。

我们可以把分离的DOM当作一个标志，通过分离的DOM节点，定位到具体导致了内存泄漏发生的JS代码。

对于Vue项目而言，因为Vue实例保存着DOM的引用，定位到DOM的内存泄漏，也就定位到了Vue实例级别的内存泄漏，通常这种级别的内存泄漏影响是会是比较大的。

在Chrome提供的内存分析套件中，对于DOM内存泄漏问题，我们可以通过记录前后内存快照比对的方式去分析。但快照分析结果并不直观，同时记录快照并分析的整个流程也很繁琐，不便于排查阶段的快速调试。

相比之下，Edge的这个面板就很直观，首先通过分离的DOM的类名可以快速定位到有问题的Vue组件，其次获取分离的DOM的操作很快，我们可以很方便的使用注释法去定位问题。

下面这个例子展示如何使用该工具定位内存泄漏问题

打开分离元素工具，在执行一组操作后，获取分离的元素，发现整个表单页的DOM都是分离的，尝试根据内存快照去定位问题，发现引用路径都是webpack或vue内部的文件，对于定位问题没有什么帮助。

这样只能用比较笨的方法去定位了，以表单页DOM为标志，先定位到问题文件，将全部代码注释，之后再逐个将代码块取消注释，执行操作看表单页DOM是否还会分离。第一步定位到是FormFrame组件引用的FullScreenContainer组件，接着进一步定位到是FullScreenContainer组件中动态的style标签引起的问题。

动态的style标签会导致整个组件内存泄漏，这个问题十分奇怪，不过粗暴的解决办法是有的—改变一下代码写法，使用操作DOM的方式动态添加style。

改动后，执行一组操作，发现表单页的DOM不在是分离的了，但是又出现了新的奇怪问题，但是本应通过document.body.removeChildstyle标签，却成为了分离的元素。

这时使用内存分析工具，发现style元素引用路径中的assets-retry.umd.js非常可疑，指向了近期添加的资源重试机制而引入的依赖。

分析该依赖包的源码发现，该包使用定时器查询样式表，不断将style元素加入缓存，但是当style元素从dom中移除时，该包并没有其从缓存中移除，导致style元素无法被GC。