C贸mo llega un script al navegador

4/42
Recursos
Transcripci贸n

El **DOM **es la representaci贸n que hace el navegador de un documento HTML.

El navegador interpreta el archivo HTML y cuando termina de transformarlo al DOM se dispara el evento DOMContentLoaded lo que significa que todo el documento est谩 disponible para ser manipulado.

Todo script que carguemos en nuestra p谩gina tiene un llamado y una ejecuci贸n.

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 deferir la ejecuci贸n del Javascript hasta el final de que se cargue todo el documento.

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.

Aportes 183

Preguntas 29

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

apuntes de la clase:

URGENTE PLATZI TEAM. Se necesita un curso exclusivo de manipulaci贸n del DOM con Javascript para poder aprovechar mucho m谩s toda esta ruta. Este es un conocimieno elemental de Java Script, que est谩 sorprendentemente ausente de esta ruta. Lo digo por experiencia propia. Tuve que estudiar por fuera de Platzi esta materia, para volver a este curso. Lo que hablaba el profe en esta clase (para mi un primerizo que viene siguiendo la ruta de la Escuela de JS), era chino.
Por ejemplo es important铆simo y vital saber manejar herramientas b谩sicas de DOM scripting como selectores, traversing,y eventos.

Ey chicos me tome el tiempo para traerles las mejores notas del curso, denle una checada porfavor a mis notas, y si son de su agrado dejenme un like en github. Saludos 馃槃
Notas o https://github.com/JasanHdz/javascript-professional/tree/master/notes

驴C贸mo llega un script al navegador?

Anteriormente lo usamos con la etiqueta <script >, pero hay muchas m谩s formas de traer un script.

DOM

Es una representaci贸n de un documento HTML, por ejemplo:

Cuando el navegador recibe este archivo lo tiene que convertir en una estructura parecida a un 谩rbol.

Es una estructura f谩cil de procesar. Luego que el documento es le铆da y cargado ocurre el DOMContentLoaded.

DOMContentLoaded

A partir de este punto tenemos la garant铆a de que todo nuestro documento se ha cargado.

Scripts externos o embebido

Cuando abrimos etiquetas scripts lo hacemos como un elemento m谩s del HTML, pero no todos son iguales. Veamos este ejemplo:

Primero tenemos un script que trae a google analytics con una fuente externa, luego tenemos un script embebido de cuatro l铆neas. Cuando tenemos un c贸digo embebido provoca que el navegador detenga el proceso de carga hasta que todo el c贸digo que est茅 dentro de ese script se ejecute por completo. Pasar铆a algo as铆:

Nuestro navegador estar铆a leyendo el HTML y luego se encuentra con el script. En este caso el script es muy corto, el navegador se detendr谩 all铆 pero se cumplir谩 muy r谩pido.

驴Donde colocar el script?

Es muy importante saber esto, por eso vamos a ver un ejemplo:

Tenemos primero el script con las funcionalidades que quisi茅ramos tener en un formulario. Luego tenemos el formulario.

驴Qu茅 pasar铆a si ejecutamos este c贸digo? No dar谩 el famoso error:

Cuando tenemos el script por arriba del formulario sucede que nuestro navegador detiene la lectura y creaci贸n de elemento cuando ve la etiqueta script. En nuestro navegador no existe la ID que usamos en el JavaScript, tampoco existen nuestro formulario. La soluci贸n es colocar elemento que vamos a tratar con el script en la parte de arriba para que se cargue primero. Por esto es que siempre nos han aconsejado colocarla antes de cerrar la etiqueta </body>, esto para que el navegador encuentre todos los elementos antes de ejecutar el script.

Scripts externos

Con estos scripts sucede lo mismo, nuestro navegador detendr谩 el proceso hasta que la petici贸n a la fuente y el script lleguen a manos de el.

Ahora existe un atributo que le podemos dar a los scripts externos.

Con este atributo logramos el la carga del HTML no se interrumpa cuando el script fetching est谩 sucediendo, esto quiere decir que la petici贸n va a ocurrir as铆ncronamente. Cuando ya tenemos el script y pasamos al script execution s铆 nos detenemos.

驴Qu茅 sucede si tenemos dos script que son as铆ncronos?

Supongamos que tenemos un script que es de tama帽o inmenso y el otro s铆 es un poco reducido.

Ambas peticiones salen pero no necesariamente se contestan en el mismo orden, en este caso primero responde el primer script, cuando se termina de cargar inmediatamente se ejecuta. Cuando llega el segundo script pasa lo mismo, se ejecuta inmediatamente interrumpiendo al HTML.

Scripts externos con defer

Tenemos esta tercera forma de traer scripts externos. Esto lo que haces es posponer la ejecuci贸n del JavaScript hasta el final de la carga del HTML.

Es similar al async ya que funciona as铆ncronamente sin detener el HTML. La gr谩fica muestra que la petici贸n ocurre y se responde muy temprano, pero no se ejecuta hasta el final.

隆Vamos al c贸digo

Ahora en nuestro c贸digo lo que haremos es crear un archivo index.js en nuestra carpeta assets. Luego cortaremos el script que ten铆amos en nuestro HTML y lo pegamos en el archivo creado, no tenemos que pasar las etiquetas </script>. Quedar谩 as铆:

Ahora a las etiquetas <script> que quedaron en nuestro HTML le agregaremos el atributo src con el path de nuestro nuevo archivo index.js.

<script  src="./assets/index.js"></script>

No usaremos async ni defer por que ya lo tenemos al final y no interrumpir谩 con el HTML.

Terminolog铆a importante

  • DOM: Estructura de 谩rbol jer谩rquica que lee el navegador
  • DOMContentLoaded: Se garantiza que ya est谩 cargado todo el documento y est谩 disponible para manipular

Lectura de los scripts por el browser

Cuando el browser encuentra una etiqueta la lee y detiene la ejecuci贸n del c贸digo hasta terminar, 茅sto significa que:

  1. Hay que leerlo
  2. Hay que ejecutarlo

Cuando tenemos un script previo al contenido, y se ejecuta, todav铆a no est谩 cargado lo dem谩s del DOM, por lo que no podemos acceder a los elementos, por lo tanto, se recomienda que el script se corra despu茅s de que se cargue el elemento

Cuando llamamos a un archivo, el browser detiene la ejecuci贸n del c贸digo a menos de que utilicemos la propiedad async o defer.

Async
En caso de usar async no se va a detener la ejecuci贸n del DOM, hasta que llegue la respuesta

<script async src=鈥渟cript.js鈥>

Al trabajar con respuestas as铆ncronas es dif铆cil predecir cu谩l se responder谩 primero, normalmente el m谩s peque帽o o con mejor respuesta de servidor llegar谩 primero y detendr谩 la ejecuci贸n y no se responder谩 otro script antes de que termine

Defer
En caso de usar defer, la respuesta suceder谩 as铆ncronamente, pero no se llamar谩 hasta que no termine de leer el DOM

<script defer src=鈥渟cript.js鈥>

Recuerdan el $(document).ready(function(){}); de jQuery? Les dejo la versi贸n en Vanilla JS

document.addEventListener('DOMContentLoaded', function(){});

donde estas Sacha!!!

RESUMEN
DOM: Representa el codigo HTML.
DOMContentLoaded: El documento esta disponible para manipularlo.

En la interpretaci贸n de los scripts, hay varias formas:

Async: Ejecuta el html y la carga del DOM al mismo tiempo.
defer: Ejecuta primero el DOM y luego el script.
Embebidos: Cuando est谩n dentro del .html, va leyendo linea por linea del DOM, al llegar al script, ejecuta el script y continua con el DOM.
Por la carga y para que todo sea m谩s r谩pido, se recomienda agregar los scripts antes de cerrar el body, porque asi tambi茅n todo lo que el necesita (Id, clases, tags) ya est谩n en el DOM.

Buenisima clase, desconocia el 鈥榙efer鈥 y el 鈥榓sync鈥 para usarlo en HTML

Me gusto este tema, la verdad hay que estar preparado con lo fundamental para entender este curso ya que no se para a explicar puntos ya antes vistos, para eso se debe seguir la siguiente ruta y ensayar con lo que aprenden (como hacer una agenda con JavaScript):

  1. Fundamentos de JavaScript

  2. Curso de ECMAScript 6+

  3. Curso B谩sico de JavaScript

  4. Curso de JavaScript Engine (V8) y el Navegador

  5. Philip Roberts: 驴Que diablos es el 鈥渆vent loop鈥 (bucle de eventos) de todos modos? | JSConf EU

  6. Curso de Asincronismo con JavaScript

  7. Curso de Frontend Developer

Les ayudara a comprender mejor todo y no tendran problemas para enterderle al profe Richard.

Las gr谩ficas con las explicaciones de los diferentes llamados est谩n buen铆simas, me ayudaron a entender la diferencia que en puro c贸digo me costaba trabajo. 隆Gracias!

Creo que tendr茅 que regresas a fundamentos de javascript 馃槃

estupendo, ahora si entend铆 lo de async y el defer, estupendooo

Por fin entend铆 muchas cosas sobre el DOM. Que buen profesor, no asume, simplemente explica.

En consola pueden **BAJAR EL VOLUMEN **del video con:

player.media.volume = 0.5

Lo mejor es agregar los scripts justo antes de cerrar la etiqueta body. Es recomendable para poder tener el documento completo antes de iniciar la carga de los scripts.

disculpe profe pero en verdad me es muy complicado entenderlo 馃槮

para iniciar este curso clone el repositorio y segui los siguientes pasos.
espero les sirva.

1. git clone url_repo
2. git checkout ff1badc05e00be6bb018bf3e5705ba672e20821f
3. git branch nueva_rama
4. git checkout nueva_rama 

Notas de la clase

  • La 茅tica
        <script></script>

detiene la ejecuci贸n del DOM hasta que se ejecute todo su c贸digo, no carga mas HTML

  • El atributo async
        <script async src="index.js"></script>

en una declaraci贸n de script externo permite que el script se descargue mientras el DOM se sigue ejecutando , pero el DOM se deja de ejecutar para ejecutar el script una vez la descarga a terminado

  • El atributo defer
        <script defer src="index.js"></script>

igual que async permite la descarga as铆ncrono del script pero este no se ejecutara hasta que la cargar del DOM se all谩 ejecutado en su totalidad

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 deferir la ejecuci贸n del Javascript hasta el final de que se cargue todo el documento.

Hola chicos, por lo visto a muchas personas le gustaron los apuntes que fui realizando en el curso. Lastimosamente cuando las hice no tenia mi cuenta de Platzi, ahora que la pude adquirir les comparto el link donde sub铆 a github todos los apuntes en pdf para que los tengan a la mano siempre.

repositorio: https://github.com/Boogst/javascript

Si le gustaron esos apuntes los invito tambi茅n a mirar los que hice para docker: https://github.com/Boogst/docker

Nunca pares de aprender !!

Cuando vi esto por primera vez, me imagin茅 que era un atributo forzoso que el desarrollador de la librer铆a requer铆a para poder trabajar.

Ahora s茅 como administrar la petici贸n de mis scripts de terceros para optimizar la carga de mi documentos HTML.

Explicado de forma interactiva en :
https://manzdev.github.io/script-type/

Dom ==> Dominic Toreto???

Apuntes de la clase鈥

Entonces el defer es bueno usar en g maps?

Buen dato acerca de async y defer, no los conoc铆a.

Geniall la explicaci贸n de los scripts externos 馃槃

Muy buenos ejemplos de cuando hay que insertar los script con async y defer

que genial que justifique cada linea de c贸digo, buenisimo!

genial son los atributos
async: descargar el script sin detener la ejecuci贸n del HTML y cuando ya esta listo es que lo ejecuta.
defer: descargar el script sin detener la ejecuci贸n del HTML pero solo lo ejecuta cuando el HTML se a terminado de ejecutar.

DOM
DOM, es la representacion que hace el navegador de un documento HTML

Cuando recibe el documento HTML lo convierte en una estructura de arbol

DOMContentLoader es el evento que ocurre cuando el navegador termina de convertir al DOM

SCRIPT
Cunado el DOM se este procesando va a detener todo el procesamiento cuando se encuentre la etiqueta <script>. Es importante colocar el script en el lugar correcto (por ej, el final del body).

ASYNC Y DEFER

Nos permiten hacer llamadas asincronas

  • Async: nos permite realizar peticiones de forma asincrona y no detiene la carga del dom hasta que se pueda ejecutar el script

  • Defer: El script se ejecutara cuando termine de cargar el codiog HTML

Excelente curso, se tiene que llegar con bases muy s贸lidas en JavaScript: POO con JavaScript, Promesas, Scope, 鈥 para todo ello existen cursos en la escuela de desarrollo web.

Un objecto que explica un poco mas breve lo que el profesor hizo

const mediaPlayer = {
    media: video,
    play: function() {
        this.media.play();
    },
    pause: function() {
        this.media.pause();
    },
    togglePlay: function() {
        (this.media.paused)
            ? this.play()
            : this.pause();
    }
}

button.onclick = () => mediaPlayer.togglePlay();

Me est谩 gustando mucho este profesor!

Definitivamente esta clase ha sido de mucha informaci贸n nueva 馃く馃く馃く

Es la primera clase de todas las que tengo vistas en Platzi que antes que termine, vuelvo a verlo porque me di cuenta que me quedaba mucha informaci贸n si anotar.
Genial clase y me cierra mucha informaci贸n que ten铆a suelta.
Realmente se nota que me van profesionalizando en esta carrera jeje.

Debe mejorar la explicacion

Es buena practicar validar si e documento de termino de cargar para ejecutar nuestra js? o no hace falta porque nuestra etiqueta script esta de ultima? He visto que algunos desarrolladores si lo validan.

excelente, no sabia del async y el defer

Esta clase me gusto mucho mas, buenos datos.

S煤per buenas las clases de este curso. Pero s铆 hay que tener claro los fundamentos del lenguaje. Si te sientes muy perdido recomiendo repasar primero el curso de JavaScript b谩sico y Fundamentos de JavaScript y con los conocimientos adquiridos construir un proyecto propio desafiante con puro HTML (css opcional) y JavaScript. Con ello despu茅s le sacar谩s el m谩ximo provecho a este curso. Saludos.

Las propiedades async y defer solo aplican cuando la etiqueta contiene tambi茅n el atributo src de lo contrario no funcionara, ejemplo:

<!DOCTYPE  html>
<html  lang="es">
<head>
	<meta  charset="UTF-8">
	<title>驴Donde colocar mis scripts?</title>
</head>
<body>
	
	<script> 
		//Aqui no funciona el atributo async o defer
		let h1 = document.querySelector('#main-title')
		h1.textContent =  "Titulo principal"
	</script>	
	<script src="url..." async></script><!--El atributo funcionara-->
	<script src="url..." defer></script><!--El atributo funcionara-->
	<h1  id="main-title"></h1>
</body>
</html>

Mi reto terminado

      const video = document.querySelector('video')
      const button = document.querySelector('button')

      function MediaPlayer(config){ 

        this.media = config.el

      }

      MediaPlayer.prototype.play = function ()
      {
        if (this.media.paused){
        this.media.play()
        } else {
          this.media.pause()
        }
      }

      const player = new MediaPlayer({el: video})

      button.onclick = () => player.play()```

驴C贸mo llega un script al browser?

Cu谩ndo el navegador est谩 armando el DOM, y se encuentra con una etiqueta script, detiene el procesamiento de HTML y se encarga de hacer el fetch y execute del Javascript en dicha etiqueta. Una vez termina la ejecuci贸n, se continua el armado del DOM.

Atributos de la etiqueta script:

Async: el procesamiento del DOM va a continuar mientras se ejecuta el fetch del Javascript. Solo va a detenerse cuando este est茅 disponible para su ejecuci贸n.
Defer: el fetch se va a realizar de manera as铆ncrona, igual que con el atributo anterior. Pero va a aplazar la ejecuci贸n del javascript hasta que el DOM est茅 completo.

Genial, ahora entiendo lo del async y defer.

Alguna vez le铆 que siempre era mejor agregar los scripts al final del body.

No entiendo porque el script se considera un asset

C贸digo de la clase:

const video = document.querySelector('video')
const button = document.querySelector('button')

function MediaPlayer(config) {
  this.media = config.el
}

MediaPlayer.prototype.play = function() {
  this.media.play()
}

MediaPlayer.prototype.pause = function() {
  this.media.pause()
}

MediaPlayer.prototype.togglePlay = function() {
  (this.media.paused) 
    ? this.play()
    : this.pause()
}

const player = new MediaPlayer( { el: video } )
button.onclick = () => player.togglePlay()

el Defer me parece bastante util, pues segun entiendo, se podria solicitar un recurso de codigo script virtual. asi que mientras se ejecuta el script va cargando el DOM, es decir, ahorrando tiempo.

muy interesante el async y defer y como se soluciona simplemente.

Esta clase es demasiado importante para un desarrollador JavaScript. Entender esta clase de conceptos te puede ahorrar muchos problemas en el futuro.

No tenia idea que <script> detenia la ejecucion del DOM, creo que eso se deber铆a dar a conocer en lo mas basico de JS, aunque pens谩ndolo bien, creo que no hubiese entendido la importancia que eso tiene

Est谩 muy buena la informaci贸n

7. C贸mo llega un script al navegador

Proceso DOM, CSSOM, Render Tree Tres conceptos fundamentales para entender el renderizado de la web

El navegador por lo general no entiende de manera directa la sintaxis que escribimos tanto en html como css, para entender el c贸digo que escribimos el navegador transforma las etiquetas html y las reglas de css en objetos entendibles para el navegador. Cabe a帽adir que el orden de nuestra estructura html es igual al orden de los objetos que el navegador crea.

  • DOM
    Document Object Model. Es una transformaci贸n del c贸digo HTML escrito por nosotros a objetos entendibles para el navegador.

  • CSSOM
    As铆 como el DOM para el HTML, EL CSSOM es una representaci贸n de objetos de nuestros estilos en CSS.

  • Render Tree
    Es la uni贸n entre el DOM y el CSSOM para renderizar todo el c贸digo de nuestra p谩gina web.

Los pasos que el navegador realiza para transformar el c贸digo en algo que este entienda.

Pasos que ocurre en el DOM

  • El c贸digo lo transforma una serie de Bytes el c贸digo escrito en el lenguaje

  • Transformar los bytes en unos caracteres esto lo realiza tomando en cuenta la codificaci贸n que le indiquemos en la etiqueta chartset=utf-8.

  • Luego transforma esos caracteres en unos tokens. Que son unos elementos html que 茅l entiende, en este punto el navegador identifica que etiqueta abre y que etiqueta cierra. Esto lo especifica la w3c.

  • Luego realiza una transformaci贸n de tokens a nodos y estos nodos son los objetos que entiende el navegador

  • Luego el DOM ser铆a tomar todos esos elementos (nodos) y ponerlos en un 谩rbol y ese 谩rbol va a tener una estructura que depende de la organizaci贸n que tenemos en nuestros sitios web.

Pasos que ocurre en el CSSOM

  • CSSOM lo que va a hacer es la transformaci贸n individual a cada una de su sintaxis y la va a pegar por decirlo as铆 de forma individual en cada nodo del 谩rbol del DOM.

  • Es importante recalcar que si escribimos reglas de manera no estandarizada y con buenas pr谩cticas se ver谩 afectado el rendimiento de la rendermerizaci贸n de nuestra p谩gina web y esto se conoce como performance o rendimiento

Render TREE ,Pasos que sigue el navegador para construir las p谩ginas web

  • Procesa el HTML para construir el DOM.
  • Procesa el CSS para construir el CSSOM.
  • El DOM se une con el CSSOM para crear el Render Tree.
  • Se aplican los estilos CSS en el Render Tree.
  • Se 鈥溾減intan鈥濃 los nodos en la pantalla para que los usuarios vean el contenido de la p谩gina web.

DOM y JavaScript

El **DOM ** es la representaci贸n que hace el navegador de un documento HTML. El navegador interpreta el archivo HTML y cuando termina de transformarlo al DOM se dispara el evento DOMContentLoaded lo que significa que todo el documento est谩 disponible para ser manipulado.
Todo lo anterior es un proceso

Forma de cargas los scripts

Es importante en donde introducimos el un script de nuestra p谩gina web, la mejor opci贸n es introducir los script locales al final del archivo body. La raz贸n de esto es porque el navegador detiene cualquier proceso de carga del DOM si se consigue alg煤n c贸digo de javaScript o script. Entonces es por ello que es recomendable es colocar cualquier scrip local al final del body.

TypeError

TypeError si se coloca un JavaScript que manipule un elemento del DOM y todo esto se hace antes del c贸digo HTML esto dar谩 un error conocido como.
El TypeError es un objeto que representa un error cuando no se pudo realizar una operaci贸n, normalmente (pero no exclusivamente) cuando un valor no es del tipo esperado.

Todo script que carguemos en nuestra p谩gina tiene un llamado y una ejecuci贸n.

  • script locales , son aquellos que est谩n presente en la etiqueta script usando el atributo src (source) de la etiqueta

  • script embebidos el script embebido es aquel c贸digo est谩 presente dentro de la etiqueta script y se encuentra en el c贸digo html.

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 mientras se hace la consulta para obtener el archivo (Script fetching) del script, va cargando elementos del DOM y no se detiene la carga. Este se detiene hasta que el archivo script se obtiene, all铆 va a detener carga del DOM y se realiza la ejecuci贸n del c贸digo (Script Execution).

  • defer. La petici贸n es igual as铆ncrona (Script fetching), como en el async, pero va a deferir la ejecuci贸n del Javascript (Script Execution) hasta el final de que se cargue todo el documento.

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.

Hola Comunidad.
.
En base a lo que dijo el profesor me surgi贸 una duda 馃: 驴Qu茅 es mejor, colocar el script con defer en el head o colocar el script sin defer antes de cerrar la etiqueta body?
.
Seg煤n pude averiguar la respuesta es que colocar el script utilizando defer en el head resulta en una optimizaci贸n de la carga de la web debido a que los navegadores actuales se han preparado para que esta sea la pr谩ctica est谩ndar.
.
Si bien en pasados a帽os era variable, parece ser que en la actualidad esa 鈥渢茅cnica鈥 puede ayudar a optimizar la carga de nuestra p谩gina web al estar siendo tomada como est谩ndar por los navegadores .
.
Revis茅 varios enlaces (varios 馃槕) pero comparto con ustedes los 3 que me parecieron m谩s claros o que citan documentaci贸n oficial:
.
Enlace de Stack Overflow dice: 鈥淭hese days, unless you鈥檙e supporting very old browsers, you should just go ahead and use async/defer in the head鈥.
Enlace de Medium dice: 鈥淏asically this attribute is ideal for all scripts that are guaranteed to access the DOM, and must do so successfully at all costs鈥.
Enlace a Blog de JS dice: 鈥淭he best thing to do to speed up your page loading when using scripts is to put them in the head, and add a defer attribute to your script tag鈥
.
Obviamente solo esas l铆neas no justifican la respuesta, dentro de cada enlace est谩 el detalle del an谩lisis realizado y las pruebas hechas.
.
Espero les sirva este dato que nos puede ayudar a optimizar la carga de nuestras p谩ginas web en alg煤n proyecto.
.
隆Saludos!

Tema: C贸mo llega un script al navegador

  • DOM: Es la representaci贸n que hace el navegador de un documento HTML. El navegador interpreta el archivo HTML y cuando termina de transformarlo al DOM se dispara el evento DOMContentLoaded lo que significa que todo el documento esta disponible para ser manipulado.
    • Cuando el navegador recibe la petici贸n de un html lo muestra de manera de una jerarqu铆a
  • Script embebido: Cuando se esta interpretando el HTML dentro de nuestro navegador, si encuentra una script embebido se va a detener para realizar la ejecuci贸n del script, el tiempo de ejecuci贸n va de acuerdo con el performance del script, luego de eso sigue con las dem谩s etiquetas HTML
  • Script externo: Sucede lo mismo que el Script embebido que al llegar a la etiqueta se detiene el DOM para analizar y ejecutar el script
  • Tanto async como defer son llamados as铆ncronos pero con diferencias:
    • async: Realiza una petici贸n de forma as铆ncrona y no vamos a detener la car del DOM hasta que se haga la ejecuci贸n del c贸digo

      • Cuando hay m谩s scripts as铆ncronos el orden de ejecuci贸n va acorde al performance del script, si este contiene un menor performance se va a analizar y ejecutar primero mientras el otro script continua su proceso de an谩lisis posteriormente al proceso de ejecuci贸n
    • defer: Realiza una petici贸n de forma as铆ncrona como en el async pero va a diferir de la ejecuci贸n del JavaScript hasta el final de que se cargue todo el DOM

    • NOTAS IMPORTANTES:

      • Los Scripts deben colocarse antes del cierre de la etiqueta </body> para que pueda hacer usto de los atributos id y clases que estaremos usando dentro del script
      • El tiempo de ejecuci贸n de un script va de acuerdo a la funcionalidad que este tenga en interacci贸n con el DOM

Los atributos async y defer son similares pero no iguales, la diferencia radica en que defer realiza la ejecuci贸n del script al final del procesamiento del html, mientras que async lo hace inmediatamente despu茅s de obtener la respuesta del archivo

El DOM es la representaci贸n de un documento HTML.
Cuando llega el HTML al browser, este lo empieza a parsear: Va leyendo etiqueta por etiqueta y va creando el DOM. Cuando este proceso termina por completo es cuando obtenemos el evento <code>DOMContentLoaded</code>.
Cuando el navegador encuentra script en medio del HTML va a dejar de leer las etiquetas y ejecutar谩 el script, luego continuar谩 leyendo.

les comparto otro recurso interesante sobre las formas de cargar scripts, y de paso repasan el ingles 鈽
recurso interesante

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 deferir la ejecuci贸n del Javascript hasta el final de que se cargue todo el documento.
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 puedo creer que estuve los 煤ltimos 3 a帽os desarrollando y sin saber esto. La cantidad de veces que me sali贸 el Type Error, y las soluciones que le daba a esto les sorprender铆a ajjajajajaja

esta parte no me gusto , veo codigo modificado que no lo hizo en el video pasado , y me confundo pienso que debio iniciar con un proyecto nuevo el no es el hecho de que sea un curso profesional haga modificaciones y no sepa uno que mal no me gusto

Yo resolv铆 de esta forma el desaf铆o del bot贸n play/pause. Puede alguien darme feedback?

button.onclick = () => {

        if (video.paused === false) {
            player.pause();
        } else {
            player.play();
        }
};```

excelente expliaci貌n

Para una demostraci贸n un poco m谩s gr谩fica de la abstracci贸n del c贸digo JS a un AST (Abstract Syntax Tree) que es el 谩rbol que se menciona aqu铆, tambi茅n se puede ir a este link, donde puedes poner el c贸digo que quieras y te muestra c贸mo lo interpreta.

Orden de ejecuci贸n (async) o vamos a detener la carga del DOM hasta que se haga la ejecuci贸n del c贸digo.

Es com煤n usar el Async o el defer?
Es decir, siempre declaro el script al final

Script externos (defer) la ejecuci贸n del Javascript hasta el final de que se cargue todo el documento.

Script async: Trae los recursos sin detener el procesamiento de HTML y hasta que se traiga todo entonces detiene HTML y ejecuta.
Script Defer: Trase los recursos externos de manera as铆ncrona, solamente que hasta que se haya cargado todo, difiere, lleva al final toda la ejecuci贸n de lo que es necesario para el c贸digo.

DOM es el objeto con el que se puede manipular, el navegador realmente recibe 茅ste objeto por medio de la lectura del documento HTML y es cuandos e dispara DOMContentLoaded para interpretar todo y ahora disponible para manipular

Ya entiendo un poco mas async

Me gust贸 esta clase

Muy buena clase no sab铆a de defer y async dentro de la etiqueta script.

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 deferir la ejecuci贸n del Javascript hasta el final de que se cargue todo el documento.
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.

El **DOM **es la representaci贸n que hace el navegador de un documento HTML.

El navegador interpreta el archivo HTML y cuando termina de transformarlo al DOM se dispara el evento DOMContentLoaded lo que significa que todo el documento est谩 disponible para ser manipulado.

Todo script que carguemos en nuestra p谩gina tiene un llamado y una ejecuci贸n.

OK:

<form id="loginForm" action="/login" method="POST">

  </form>
  <script>
    let formEl = document.querySelector('#loginForm');
    console.log('formEl');
    console.log(formEl);
    if (formEl) {
      formEl.addEventListener('submit', function (event) {
        alert('hello');
      });
    }
    if (formEl) {
      alert('found object');
    } else {
      alert('error!!!');
    }
  </script>

BAD:

<script>
    let formEl = document.querySelector('#loginForm');
    console.log('formEl');
    console.log(formEl);
    if (formEl) {
      formEl.addEventListener('submit', function (event) {
        alert('hello');
      });
    }
    if (formEl) {
      alert('found object');
    } else {
      alert('error!!!');
    }
  </script>
  <form id="loginForm" action="/login" method="POST">

  </form>

Entendido

script

Con esta clase me quedo super claro el por que de las ubicaciones de la etiqueta <script>, algo que sol铆a hacer sin saber el por que鈥 excelente informaci贸n

Muy buena la clase. excelente. tanto que tengo una pregunta.

驴Por que no es mejor usar 鈥榙efer鈥 al final del head creo que te nos ahorramos un mont贸n de tiempo ?

Con async y defer, si el script llega a un id (o elemento pedido por el script) que el DOM a煤n no ha cargado se genera error, entonces hay que tener cuidado al usarlo.

No se debe abusar el uso de aync y defer ya que como lo explic贸 el profesor puede dar lugar a errores, en su lugar yo siempre que puedo uso mis scripts al final del body.

Excelente clase, no conoc铆a lo de defer.

esta muy bien explicado. mejor que mi instituto actual.

Excelente clase!

me parece importante resaltar esto

<script defer>: el script se descarga de forma as铆ncrona, en paralelo con el an谩lisis HTML, y adem谩s su ejecuci贸n es diferida hasta que termine el an谩lisis HTML. No hay bloqueo en el renderizado HTML. La ejecuci贸n de todos los scripts diferidos se realiza en el mismo orden en el que aparecen en el documento.

Mejor explicaci贸n, Imposible !!!

Bien explicado!

Muy buen dato!! Gracias.

Muy buena clase, importante conocer estos atributos de los Scripts.

Demasiado interesante este concepto de Async y Defer en las etiquetas no lo conocia, pero mi conclusion es:
Async En la etiqueta indica que solo detiene la carga del HTML cuando el fetch del script este completa y se ejecute
Defer En la etiqueta indica que solo se ejecutara cuando la carga del HTML este completa.

Muy interesante.

Interesante defer. No lo sab铆a.

No los conoc铆a.

seria mejor meterlo dentro de una carpeta src todo no?

Incre铆ble explicaci贸n

El DOM es la representaci贸n que hace el navegador de un documento HTML.

El navegador interpreta el archivo HTML y cuando termina de transformarlo al DOM se dispara el evento DOMContentLoaded lo que significa que todo el documento est谩 disponible para ser manipulado.

Todo script que carguemos en nuestra p谩gina tiene un llamado y una ejecuci贸n.

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.