使用Timeline Chrome开发者工具了解节点数量

Gib*_*boK 5 javascript google-chrome google-chrome-devtools

我正在开发一个Web应用程序,其中在每个mousemove事件上创建一个div .

使用Chrome开发者工具时间线进行性能分析时,我看到节点计数(绿线)的增加,但Detached DOM tree移动鼠标时的数量非常少.当鼠标未移动时,节点计数稳定,永不减少/增加.

我想知道:

  • 节点计数(绿线)的工作原理是什么?是否累计提供记忆信息的开始记录?
  • 我被怀疑是一个DOM内存泄漏,但是我认为很少见Detached DOM tree.节点数量稳步增加可能会出现什么问题?
  • Node计数会影响JS应用程序的总内存吗?
  • Document DOM tree / xxx entries和之间有什么区别Object Count

在此输入图像描述

在此输入图像描述

编辑:

经过一些研究,我怀疑Node Counts上升并不代表内存泄漏在这种情况下(也运行Chrome /任务管理器我看到JS内存稳定而不是持续增加).它很可能代表浏览器在内存中的使用情况,实际上我没有移动鼠标30秒或打开另一个选项卡/窗口,垃圾收集器启动并且内存被清除,如下图所示.顺便说一句,任何专家建议非常欢迎:)

在此输入图像描述

有趣:

Javascript内存和泄漏问题

https://developers.google.com/web/tools/chrome-devtools/profile/memory-problems/memory-diagnosis