javascript - DOM 解析器 Chrome 扩展内存泄漏

Question

问题

我开发了一个扩展程序，可以拦截 Web 请求、获取 Web 请求来源的 HTML 并对其进行处理。我使用 DOMParser 来解析 HTML，并且我意识到 DOMParser 正在导致大量内存泄漏问题，最终导致 chrome 扩展崩溃。

这是导致问题的代码。 https://gist.github.com/uche1/20929b6ece7d647250828c63e4a2ffd4

我尝试过的

开发工具记录的性能

我在拦截请求时记录了 chrome 扩展，并且我注意到，当调用 DOMParser.parseFromString 方法时，创建了更多未销毁的节点和文档。

开发工具截图 /image/C8mVi.png

任务管理器内存占用

我查看了 chrome 上的任务管理器，发现它有巨大的内存占用，并且不会随着时间的推移而减少(因为垃圾收集应该在一段时间后启动)。当内存占用太大时，扩展会崩溃。

任务管理器内存占用截图 /image/F3f3k.png

堆快照

我拍摄了一些堆前后的屏幕截图，我可以看到问题似乎源于正在分配但未被垃圾收集的 HTMLDocuments。

快照(之前) /image/17LYh.png

快照(之后) /image/Jtg1X.png

预期结果

我想了解为什么 DOMParser 会导致此类内存问题，为什么它没有被垃圾收集器清理，以及如何解决它。

谢谢

Answer 1

我已经解决了这个问题。问题似乎是因为 DOMParser 类由于某种原因将其解析的 HTML 文档的引用保留在内存中并且没有释放它。因为我的扩展程序是在后台运行的 Chrome 扩展程序，所以夸大了这个问题。

解决方案是使用另一种解析 HTML 文档的方法，即使用

let parseHtml = (html) => {
    let template = document.createElement('template');
    template.innerHTML = html;
    return template; 
}

这有助于解决问题。