Ya estamos familiarizados con los eventos que ocurren en respuesta a las acciones de los usuarios. Pero también existen una serie de eventos que están relacionados con el funcionamiento del propio navegador. Estos eventos incluyen los eventos de carga y descarga de la página:
beforeunload- el usuario intenta abandonar la página.load- todos los recursos han sido cargados (imágenes, estilos, scripts, etc.).DOMContentLoaded- el árbol DOM ha sido completamente construido y está listo para ser utilizado, sin esperar la carga completa de hojas de estilo, imágenes y marcos.
Hablemos más en detalle sobre el último evento. Este es un evento importante que se utiliza con frecuencia en el código que depende del DOM.
A veces, los scripts pueden ejecutarse antes de que el DOM esté listo, lo cual puede causar errores. Sin embargo, si se utiliza el evento DOMContentLoaded, se pueden evitar estos errores.
Este evento está vinculado al document:
<script>
document.addEventListener('DOMContentLoaded', () => {
// Si el DOM no estuviera listo, no encontraríamos nada
const coll = document.querySelectorAll('.help');
coll.forEach((el) => el.classList.add('hidden'));
});
</script>
La velocidad de construcción del árbol DOM depende en gran medida de las etiquetas <script>. Según el estándar, cualquier <script> en HTML se ejecutará antes de que se complete la construcción del árbol. Esto significa que la velocidad de ejecución del código en este bloque <script> afectará significativamente la velocidad de carga del sitio y cuándo se activará el evento DOMContentLoaded.
El tema de la optimización de la carga de scripts y la inicialización rápida es bastante complejo. Esto se debe no solo a la gran cantidad de factores que afectan el orden y la velocidad, sino también al hecho de que este mecanismo funciona de manera diferente en diferentes navegadores. No vamos a profundizar en este tema aquí, ya que es de nivel avanzado y hay muchos artículos escritos al respecto.
Mientras tanto, echemos un vistazo a esta captura de pantalla:
Presta atención a la barra roja y azul. La barra roja muestra el momento en que se activa el evento load, mientras que la barra azul muestra el evento DOMContentLoaded. En la parte inferior de la imagen se indica el tiempo de activación de cada evento desde el inicio de la carga de la página.
Desde la imagen se puede observar que el navegador primero descarga el archivo HTML de la página, luego extrae los enlaces a todos los recursos externos y comienza a cargarlos. Para mayor eficiencia, la descarga de recursos se realiza en paralelo tanto como sea posible.
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
