Tropezando con un contador de elementos DOM de Javascript aquí y aquí (cortesía de lingtalfi) Quiero acelerar mi sitio web. Aparentemente, la cantidad, la longitud y la profundidad de los elementos DOM parecen tener un impacto en la velocidad . Quiero contar la sobrecarga de DOM y mostrarla en el HTML sin necesidad de presionar una tecla. Esto podría hacerse 5 segundos después de que la página se haya cargado para no interferir con la velocidad del sitio web.
<a href=" javascript: (function() {alert(document.getElementsByTagName('*').length); }()); ">Count DOM nodes of a page </a> <script> (function() { document.write(document.getElementsByTagName('*').length); }()); </script>En mi sitio, el primer método muestra 814, mientras que el segundo método escribe 142. ¡Gran diferencia!
Mi pregunta es: ¿hay alguna manera de (retrasar y) generar la cantidad correcta de elementos DOM solo en HTML sin la necesidad de hacer clic en una ventana emergente para contar los elementos DOM?
(function () {document.write(document.getElementsByTagName('*').length); }()); body { font-size: 5em; font-family: "Arial"; }¡No estoy absolutamente seguro de tu pregunta! ¿Estás buscando algo así?
Tenga en cuenta que el número en la demostración puede ser mayor que el que muestra el código. Stack Overflow agrega más elementos detrás de escena.
document.addEventListener("DOMContentLoaded", () => { setTimeout(() => { document.querySelector('aside').textContent = document.getElementsByTagName('*').length; }, 5000) }); <html> <head> </head> <body> <div class="header"> <div class="pages"> <div class="page">index</div> <div class="page">contact</div> </div> </div> <div class="main-content"> <div class="section-1"> </div> <div class="section-2"> </div> <div class="section-3"> </div> </div> <footer> </footer> <aside></aside> </body> </html>