w3schools script llamar example ejemplos desde javascript html5

javascript - llamar - Etiqueta de script-asíncrono y diferido



script javascript html (7)

Enfrentamos el mismo tipo de problema y ahora entendemos claramente cómo funcionarán ambos. Espero que este enlace de referencia sea útil ...

Asíncrono

Cuando agregue el atributo asíncrono a su etiqueta de script, sucederá lo siguiente.

<script src="myfile1.js" async></script> <script src="myfile2.js" async></script>

  1. Hacer solicitudes paralelas para recuperar los archivos.
  2. Continúe analizando el documento como si nunca hubiera sido interrumpido.
  3. Ejecute los scripts individuales en el momento en que se descarguen los archivos.

Aplazar

El aplazamiento es muy similar a async con una diferencia importante. Esto es lo que sucede cuando un navegador encuentra una secuencia de comandos con el atributo de aplazamiento.

<script src="myfile1.js" defer></script> <script src="myfile2.js" defer></script>

  1. Hacer solicitudes paralelas para recuperar los archivos individuales.
  2. Continúe analizando el documento como si nunca hubiera sido interrumpido.
  3. Termine de analizar el documento incluso si los archivos de script se han descargado.
  4. Ejecute cada script en el orden en que se encontraron en el documento.

Referencia: Diferencia entre Async y Defer.

Tengo un par de preguntas sobre los atributos async y defer de la etiqueta <script> que, a mi entender, solo funcionan en navegadores HTML5.

Uno de mis sitios tiene dos archivos JavaScript externos que actualmente se encuentran justo encima de la etiqueta </body> ; el primero es jquery procedente de google y el segundo es un script externo local.

Con respecto a la velocidad de carga del sitio

  1. ¿Hay alguna ventaja en agregar async a los dos scripts que tengo al final de la página?

  2. ¿Habría alguna ventaja en agregar la opción async a los dos scripts y colocarlos en la parte superior de la página en el <head> ?

  3. ¿Esto significa que se descargan a medida que se carga la página?
  4. Supongo que esto causaría retrasos en los navegadores HTML4, pero ¿aceleraría la carga de páginas para los navegadores HTML5?

Usando <script defer src=...

  1. ¿Cargar los dos scripts dentro de <head> con el atributo defer el mismo efecto que tener los scripts antes </body> ?
  2. Una vez más, asumo que esto ralentizaría los navegadores HTML4.

Utilizando <script async src=...

Si tengo dos scripts con async habilitado

  1. ¿Se descargarían al mismo tiempo?
  2. ¿O una a la vez con el resto de la página?
  3. ¿El orden de los guiones se convierte entonces en un problema? Por ejemplo, una secuencia de comandos depende de la otra, por lo que si una descarga más rápido, la segunda podría no ejecutarse correctamente, etc.

Finalmente, ¿es mejor dejar las cosas como están hasta que HTML5 se use más comúnmente?

Esta imagen explica la etiqueta de secuencia de comandos normal, asincrónica y diferida.

  • Los scripts asíncronos se ejecutan tan pronto como se carga el script, por lo que no garantiza el orden de ejecución (un script que incluyó al final puede ejecutarse antes del primer archivo de script)

  • Los scripts diferidos garantizan el orden de ejecución en el que aparecen en la página.

Ref. Este enlace: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

Guarde sus scripts justo antes </body> . Async se puede usar con scripts ubicados allí en algunas circunstancias (consulte la discusión a continuación). La demora no supondrá una gran diferencia para los scripts que se encuentran allí porque el trabajo de análisis de DOM ya se ha hecho prácticamente de todos modos.

Aquí hay un artículo que explica la diferencia entre async y aplazado: http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/ .

Su HTML se mostrará más rápido en los navegadores antiguos si mantiene los scripts al final del cuerpo justo antes de </body> . Por lo tanto, para preservar la velocidad de carga en navegadores antiguos, no desea colocarlos en ningún otro lugar.

Si su segunda secuencia de comandos depende de la primera secuencia de comandos (por ejemplo, su segunda secuencia de comandos usa el jQuery cargado en la primera secuencia de comandos), entonces no puede convertirlos en asíncronos sin código adicional para controlar el orden de ejecución, pero puede hacerlos diferir porque las secuencias de comandos diferidas aún se ejecutará en orden, pero no hasta que el documento haya sido analizado. Si tiene ese código y no necesita los scripts para ejecutarse de inmediato, puede hacerlos asíncronos o diferidos.

Puede poner los scripts en la etiqueta <head> y configurarlos para defer y la carga de los scripts se diferirá hasta que el DOM se haya analizado y se obtenga una visualización rápida de la página en nuevos navegadores que admiten diferir, pero no Lo ayudamos en todos los navegadores más antiguos y no es realmente más rápido que simplemente colocar los scripts justo antes </body> que funciona en todos los navegadores. Entonces, puedes ver por qué es mejor ponerlas justo antes </body> .

Async es más útil cuando realmente no le importa cuándo se carga el script y nada más que depende del usuario depende de la carga de ese script. El ejemplo más citado para usar async es un script analítico como Google Analytics que no quiere que espere nada y no es urgente que se ejecute pronto y está solo, por lo que nada más depende de él.

Por lo general, la biblioteca jQuery no es un buen candidato para async porque otros scripts dependen de ella y desea instalar controladores de eventos para que su página pueda comenzar a responder a los eventos del usuario y es posible que deba ejecutar algún código de inicialización basado en jQuery para establecer el estado inicial de la pagina. Se puede usar asíncrono, pero otros scripts deberán codificarse para que no se ejecuten hasta que se cargue jQuery.

HTML5: async , defer

En HTML5, puedes decirle al navegador cuándo ejecutar tu código JavaScript. Hay 3 posibilidades:

<script src="myscript.js"></script> <script async src="myscript.js"></script> <script defer src="myscript.js"></script>

  1. Sin async ni defer , el navegador ejecutará su script inmediatamente, antes de mostrar los elementos que están debajo de su etiqueta de script.

  2. Con async (asynchronous), el navegador continuará cargando la página HTML y la renderizará mientras el navegador carga y ejecuta el script al mismo tiempo.

  3. Con la defer , el navegador ejecutará su script cuando la página haya finalizado el análisis. (No es necesario terminar de descargar todos los archivos de imagen. Esto es bueno.)

Parece que el comportamiento de diferir y async depende del navegador, al menos en la fase de ejecución. NOTA, el aplazamiento solo se aplica a scripts externos. Supongo que async sigue el mismo patrón.

En IE 11 y más abajo, el orden parece ser así:

  • async (podría ejecutarse parcialmente mientras se carga la página)
  • ninguno (podría ejecutarse mientras se carga la página)
  • aplazar (se ejecuta después de cargar la página, todos aplazan en orden de ubicación en el archivo)

En Edge, Webkit, etc., el atributo asíncrono parece ser ignorado o colocado al final:

  • data-pagespeed-no-diferir (se ejecuta antes que cualquier otro script, mientras se carga la página)
  • ninguno (podría ejecutarse mientras se carga la página)
  • aplazar (espera hasta que se cargue DOM, todos aplazan en orden de ubicación en el archivo)
  • asíncrono (parece esperar hasta que se cargue el DOM)

En los navegadores más nuevos, el atributo data-pagespeed-no-diferir se ejecuta antes que cualquier otro script externo. Esto es para scripts que no dependen del DOM.

NOTA: use la opción de aplazamiento cuando necesite un orden explícito de ejecución de sus scripts externos. Esto le indica al navegador que ejecute todos los scripts diferidos en orden de ubicación en el archivo.

ASIDE: El tamaño de los javascripts externos fue importante al cargar ... pero no tuvo ningún efecto en el orden de ejecución.

Si le preocupa el rendimiento de sus scripts, puede considerar la minimización o simplemente cargarlos dinámicamente con un XMLHttpRequest.

Tanto los scripts async como los defer comienzan a descargarse inmediatamente sin pausar el analizador y ambos admiten un controlador onload opcional para abordar la necesidad común de realizar la inicialización, que depende del script.

La diferencia entre async y defer centra cuando se ejecuta el script. Cada script async ejecuta en la primera oportunidad después de que finaliza la descarga y antes del evento de carga de la ventana. Esto significa que es posible (y probable) que los scripts async no se ejecuten en el orden en que aparecen en la página. Mientras que los scripts de defer , por otro lado, están garantizados para ejecutarse en el orden en que aparecen en la página. Esa ejecución comienza después de que el análisis haya finalizado por completo, pero antes del evento DOMContentLoaded del documento.

Fuente y más detalles: here .

async y defer descargarán el archivo durante el análisis HTML. Ambos no interrumpirán el analizador.

  • El script con atributo async se ejecutará una vez que se haya descargado. Mientras que el script con el atributo de defer se ejecutará después de completar el análisis DOM.

  • Los scripts cargados con async no garantizan ningún orden. Mientras que los scripts cargados con el atributo de defer mantienen el orden en el que aparecen en el DOM.

Use <script async> cuando el script no se base en nada. Cuando el script dependa de uso.

La mejor solución sería agregarla en la parte inferior del cuerpo. No habrá ningún problema con el bloqueo o la representación.

ACTUALIZAR

La respuesta ha sido corregida en base a los comentarios.