Количество узлов / событий DOM, рассчитанное не в соответствии с числами в инструментах разработчика Chrome
Я заметил, что на моем сайте инструменты разработчика 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.info('DOM Nodes:', elements.length)
console.info('DOM event listeners:', countDomEventListeners(elements))
Ответы 1
Я построил маленький пример примерно с 1020 узлами DOM и 1000 событиями на элементах <li/>. Каждый щелчок удаляет свой собственный прослушиватель событий, а после 10 щелчков удаляются все прослушиватели событий.
Монитор производительности Google Chrome действительно ведет себя неожиданным образом. Иногда он показывает около 35, 50, 150 или более событий и ~ 2000 или ~ 4000 узлов DOM, в то время как функция countDomEventListeners() в исходном вопросе всегда вычисляет ожидаемые числа (~ 1020 узлов DOM и ровно 1000 событий).
При использовании вкладки «Элементы» в инструментах разработчика Google Chrome и при наведении указателя мыши на узлы DOM, как узлы DOM, так и количество событий в мониторе производительности сильно колеблются и увеличиваются, что подводит меня к выводу, что сами инструменты разработки просачиваются в статистику монитора производительности.
Я сообщил о проблеме здесь.