计算出的 DOM 节点/事件数与 Chrome 开发工具中的数字不一致

Question

我注意到在我的网站上，Google Chrome 开发人员工具“性能监视器”显示的数字与通过getEventListeners()和确定的数字不同document.querySelectorAll('*')。

正如您在下面的屏幕截图中看到的，控制台中计算的事件数量明显高于 Chrome 开发工具中规定的数量，而 DOM 节点的数量则明显较低。

知道如何解释吗？

function countDomEventListeners (elements) {
    return Array.from(elements).reduce((count, node) => {
        const listeners = getEventListeners(node)
        for (var eventName in listeners) {
            count += listeners[eventName].length
        }
        return count
    }, 0)
}
elements = document.querySelectorAll('*')
console.log('DOM Nodes:', elements.length)
console.log('DOM event listeners:', countDomEventListeners(elements))

Answer 1

我构建了一个小示例，其中包含大约 1020 个 DOM 节点和<li/>元素上的 1000 个事件。每次单击都会删除自己的事件侦听器，单击 10 次后，所有事件侦听器都会被删除。

Google Chrome 性能监视器确实以意想不到的方式运行。它有时会显示大约 35、50、150 或更多事件以及 ~2000 或 ~4000 个 DOM 节点，而countDomEventListeners()原始问题中的函数始终计算预期数量（~1020 个 DOM 节点和恰好 1000 个事件）。

当使用 Google Chrome 开发工具中的“Elements”选项卡并将鼠标悬停在其中的 DOM 节点上时，性能监视器中的 DOM 节点和事件计数都会剧烈波动并上升，这使我得出结论：开发工具本身存在泄漏进入性能监视器统计数据。

我已经在这里报告了这个问题。