如何获得与 Chrome 性能监视器中相同的节点答案

【问题标题】：How to get the same nodes like in Chrome Performance Monitor如何获得与 Chrome 性能监视器中相同的节点
【发布时间】：2018-01-25 18:52:56
【问题描述】：

Chrome 64 带来新功能：Performance Monitor

在我的应用中，这个数字一直在增加，所以我需要修复它。

我不知道哪些节点在增加。我写了一个小的 javascript 函数来收集所有的 dom 节点，但它最后没有得到相同的数字。

为什么函数找到的数字与性能监视器提供的不一样？

function allNodes(node, result) {
    var nodes = Array.prototype.slice.call(node.childNodes);
    result = result.concat(nodes);
    for (var i = 0; i < nodes.length; i++) {
      var child = nodes[i];
      result = allNodes(child, result);
    }
    return result;
}

这是我尝试使用的 HTML：

<html>
<header><title>This is title</title></header>
<body>
Hello world
</body>
</html>

【问题讨论】：

函数的预期结果是什么？
我期望文档的所有节点。
你怎么知道函数执行时document的节点总数不是399？
因为650永远稳定，永不改变
“在我的应用程序中，这个数字一直在增加，所以我需要修复它。”是什么意思？您能否在问题中包含您尝试使用 JavaScript 的 HTML？

标签： javascript google-chrome web-inspector

【解决方案1】：

这不是 DOM 树的视图，它是浏览器渲染过程的视图。我不知道这到底是什么意思，但它会计算实际上不是“节点”的东西，它还取决于垃圾收集器的行为。

使用您的 HTML 的 sn-p，我可以始终在性能监视器中获得 8 个节点，但仅在新的渲染器中。我还可以通过以下查询准确找到 8 个节点：

> queryObjects(EventTarget)
Array(8)
0: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
1: Window {frames: Window, …}
2: Window {TEMPORARY: 0, PERSISTENT: 1, constructor: ƒ, Symbol(Symbol.toStringTag): "Window"}
3: WindowProperties {constructor: ƒ, Symbol(Symbol.toStringTag): "WindowProperties"}
4: Node {ELEMENT_NODE: 1, ATTRIBUTE_NODE: 2, TEXT_NODE: 3, CDATA_SECTION_NODE: 4, ENTITY_REFERENCE_NODE: 5, …}
5: Document {…}
6: document
7: HTMLDocument {constructor: ƒ, Symbol(Symbol.toStringTag): "HTMLDocument"}
length: 8
__proto__: Array(0)

之所以选择EventTarget，是因为它似乎是各种Node的通用基础原型。所以这是我对这个数字代表什么的最佳猜测：比你想象的更通用的 Node 类型，加上很多垃圾。

因此，如果您真的想计算文档中的节点数，我会继续使用 queryObjects 调用。

只要我将鼠标移到上面的输出上，或者打开元素选项卡，或者执行任何操作，性能监视器中的数字 8 就会立即上升数十、数百个节点。调试器本身会导致渲染器变慢并产生更多垃圾，并且可能没有任何解决办法。

为了具体解决您的问题，是否可以找到这些节点？假设这些对象正在等待垃圾收集，或者在渲染器的内部被引用但无法从文档中访问，如果没有用于访问垃圾收集器信息的 API，答案必须是否定的.

这是推测，但请记住，V8 有孤立的世界，它们共享底层 C++ DOM 对象，但有自己的 DOM 包装器对象。此性能监视器可能正在计算无法直接访问的底层 C++ DOM 对象。

【讨论】：

该功能的命名约定令人困惑？
感谢queryObjects(EventTarget) 的技巧，我认为这将有助于解决我原来的问题。我认为 DOM 节点还计算不再附加到 DOM 的元素。 childNodes 忽略它们。