CPJS: ¿Cómo llega el script al navegador?

DOM

DOM = Document object model
Es la representación que hace el navegador de un documento HTML.

...
<!DOCTYPE html>
<html>
   <head>
      <title>DOOM</title>
   </head>
   <body>
         <h1>DOM</h1>
         <p>Cuando llega el HTML al navegador (browser), este lo empieza a
a 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.

EN RESUMEN: DOMContentLoaded – el navegador HTML está completamente cargado y el árbol DOM está construido, pero es posible que los recursos externos como <img> y hojas de estilo aún no se hayan cargado. load – no solo se cargó el HTML, sino también todos los recursos externos: imágenes, estilos, etc.


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, porque
        el 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.

No hay comentarios.:

Con tecnología de Blogger.