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

Posted 2023-03-07

【中文标题】计算的 DOM 节点/事件数与 Chrome 开发工具中的数字不一致

【英文标题】：Number of DOM nodes/events calculated inconsistent with numbers in Chrome dev tools

【发布时间】：2018-10-22 16:49:16

【问题描述】：

我注意到，在我的网站上，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))

【参考方案1】：

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

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

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

我已将问题报告here。