Question

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>

Answer 1

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

使用HTML代码片段，我可以在性能监视器中始终获得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对象。

如何获取Chrome Performance Monitor中的相同节点

1 个答案: