CPJS: ¿Cómo llega el script al navegador?
DOM
...<!DOCTYPE html>
<html>
<head>
<title>DOOM</title>
</head>
<body>
<h1>DOM</h1>
<p>Cuando llega el HTML al navegador (browser), este lo empieza aa pasar: va leyendo cada etiqueta y va creando el DOM.Cuando este proceso termina por completo es cuando obtenemos el evento<code>DOMContentLoaded</code></p>
</body>
</html>...Cuando el navegador recibe este archivo lo tiene que convertir en una estructura parecida a un árbol.
Cuando termina el navegador de convertirlo al DOM, ocurre el evento: DOMContentLoaded, a partir de este punto tenemos la garantía de que todo nuestro documento se ha cargado.
SCRIPTS EXTERNOS O EMBEBIDOS
Todo script que carguemos en nuestra página tiene un llamado y una ejecución. Cuando el DOM se está procesando va a detener todo el procesamiento, siempre y cuando se encuentre la etiqueta <script>
...<body> <script>
Estos script pueden ser externos o internos
</script>
/*Cuando esto ocurre no se va a leer ningún otro tipo de elementos***del HTML, hasta que acabemos con el script. */ <p>
Soy un párrafo que no se puede ejecutar, hasta que acabe
el script de arriba.
</p></body>...
Por lo tanto es muy importante en qué lugar colocamos nuestros scripts.
...<body><H1>Hola que hace, cargando rapido</H1><p>Soy un párrafo que si se puede ejecutar, porqueel script está abajo.</p><script>El mejor lugar para colocar cualquier script, antes del cierre del body</script></body>...Tanto con async como defer podemos hacer llamados asíncronos, pero tiene sus
diferencias:
- async. Con async podemos hacer la petición de forma asíncrona y no vamos a detener la carga del DOM hasta que se haga la ejecución del código.
- defer. La petición es igual, asíncrona como en el async pero va a diferir la
- ejecución del Javascript hasta el final de que se cargue todo el documento.
- scripts embebidos: el navegador carga línea a línea el HTML y cuando se
- encuentra un código entre scripts va a detener su ejecución hasta que haya
- procesado todo el script.
Hay que tener en cuenta que, cuando carga una página y se encuentra un script a
ejecutar, toda la carga se detiene. Por eso se recomienda agregar tus scripts justo
antes de cerrar el body para que todo el documento esté disponible.
.png)
No hay comentarios.: