Количество узлов / событий DOM, рассчитанных в соответствии с числами в инструментах разработчика Chrome

Question

Я заметил, что на моем сайте инструменты разработчика Google Chrome «Performance Monitor» отображают цифры, отличные от тех, которые определены с помощью 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 и 1000 событий для элементов <li/>.Каждый щелчок удаляет свой собственный прослушиватель событий, и после 10 щелчков все прослушиватели событий удаляются.

Монитор производительности Google Chrome действительно ведет себя неожиданным образом.Иногда он показывает около 35, 50, 150 или более событий и ~ 2000 или ~ 4000 DOM-узлов, в то время как функция countDomEventListeners() в исходном вопросе всегда вычисляет ожидаемые числа (~ 1020 DOM-узлов и ровно 1000 событий).

При использовании вкладки «Элементы» в инструментах разработчика Google Chrome и наведении на них узлов DOM, как количество узлов DOM, так и количество событий в мониторе производительности сильно меняются и увеличиваются, что приводит меня к выводу, что инструменты dev сами просочились в статистику монитора производительности.

Я сообщил о проблеме здесь .