Google Chrome开发人员工具时间轴内存视图中的DOM节点数是多少？
Rob*_*ozo 37 performance google-chrome
我得到了一个"喔,快!" 加载某个网页时出现chrome崩溃.我正在努力弄清楚是什么导致了它并且真的很难过.
在Chrome开发人员的工具中有一个内存选项卡,当查看计数器图表时,我注意到DOM节点计数行逐步上升,下降,然后继续上升.
我理解这意味着我的页面上的DOM元素数量在增加但是在做完之后
document.getElementsByTagName("*").length
在控制台中,我注意到值没有改变.
那么实际显示的DOM节点计数图是什么？如果它继续这样增加,那可能是"Aw,snap!"的原因.崩溃？
小智 30
DOM节点计数图显示了仍保留在内存中的已创建DOM节点的数量,即尚未进行垃圾回收的DOM节点数.这不一定与您通过的元素重合getElementsByTagName.后者也只会获得实际附加到文档树的元素.它不会获得您仍然有参考的任何"离线"项目.
一个容易受到这种特殊金字塔增长困扰的方法是来自Facebook API的Like小部件,其中包含一些运行定时器的代码,这些代码可以创建大量额外的DOM节点.
- 你能解释了在memory`手段仍持有什么`DOM节点？因此,例如,我的页面上有大约700个DOM节点,DOM节点计数图显示~5k.是否有正在修建的HTML创建的中间DOM节点？ (2认同)
小智 6
仍然保存在内存中的DOM 节点称为分离节点。这意味着它们不会显示在您页面的 DOM 树中，但某些 JavaScript 代码仍会在某处引用它们。通读这篇谷歌开发工具帖子，它用简单的代码解释了什么是分离的 DOM 节点以及如何使用 Chrome DevTools 检测它：https : //developers.google.com/web/tools/chrome-devtools/memory-problems/