dom - 计算出的 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

我建了一个 little example在 <li/> 上有大约 1020 个 DOM 节点和 1000 个事件元素。每次单击都会删除其自己的事件监听器，并且在单击 10 次后，所有事件监听器都会被删除。

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

当使用 Google Chrome 开发工具中的“元素”选项卡并将鼠标悬停在那里的 DOM 节点上时，性能监视器中的 DOM 节点和事件计数都会大幅波动并上升，这使我得出结论 开发工具本身会泄漏到性能监视器统计信息中。

我已报告问题 here .