Cargue JavaScript de forma eficiente con diferir y asincrónico

Al cargar un script en una página HTML, debe tener cuidado de no dañar el rendimiento de carga de la página. Dependiendo de dónde y cómo agregue sus scripts a una página HTML, influirá en el tiempo de carga

Al cargar un script en una página HTML, debe tener cuidado de no dañar el rendimiento de carga de la página.

Un script se incluye tradicionalmente en la página de esta manera:

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

siempre que el analizador HTML encuentre esta línea, se realizará una solicitud para recuperar el script y se ejecutará el script.

Una vez que se realiza este proceso, se puede reanudar el análisis y se puede analizar el resto del HTML.

Como puedes imaginar, esta operación puede tener un gran impacto en el tiempo de carga de la página.

Si la secuencia de comandos tarda un poco más en cargarse de lo esperado, por ejemplo, si la red es un poco lenta o si está en un dispositivo móvil y la conexión es un poco descuidada, es probable que el visitante vea una página en blanco hasta que la secuencia de comandos esté lista. cargado y ejecutado.

La posición importa

Cuando aprende HTML por primera vez, se le dice que las etiquetas de secuencia de comandos se encuentran en el<head>etiqueta:

<html>
  <head>
    <title>Title</title>
    <script src="script.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

Como le dije antes, cuando el analizador encuentra esta línea, va a buscar el script y lo ejecuta.Entonces, una vez que ha terminado con esta tarea, pasa a analizar el cuerpo.

Esto es malo porque se introducen muchos retrasos. Una solución muy común a este problema es poner elscriptetiqueta en la parte inferior de la página, justo antes del cierre</body>etiqueta.

Al hacerlo, el script se carga y ejecuta después de que toda la página ya esté analizada y cargada, lo cual es ungran mejorasobre elheadalternativa.

Esto es lo mejor que puede hacer si necesita admitir navegadores más antiguos que no admiten dos características relativamente recientes de HTML:asyncydefer.

Asíncrono y aplazado

Tanto async como defer son atributos booleanos. Su uso es similar:

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

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

si especifica ambos,asynctiene prioridad en los navegadores modernos, mientras que los navegadores más antiguos que admitendeferpero noasyncvolverá adefer.

Para obtener información sobre la tabla de soporte, consulte caniuse.com para obtener información asíncrona.https://caniuse.com/#feat=script-asyncy para aplazarhttps://caniuse.com/#feat=script-defer

Estos atributos solo tienen sentido cuando se utiliza el script en elheadparte de la página, y son inútiles si pones el guión en elbodypie de página como vimos arriba.

Comparación de rendimiento

Sin aplazamiento o asincrónico, en la cabeza

Así es como una página carga una secuencia de comandos sin aplazar ni asincronar, poner en elheadparte de la página:

Without defer or async, in the head

El análisis se detiene hasta que se obtiene y ejecuta el script. Una vez hecho esto, se reanuda el análisis.

Sin aplazamiento o asincrónico, en el cuerpo

Así es como una página carga una secuencia de comandos sin aplazamiento ni asincrónica, colocada al final de labodyetiqueta, justo antes de que se cierre:

Without defer or async, in the body end

El análisis se realiza sin pausas y, cuando finaliza, se recupera y ejecuta el script. El análisis se realiza incluso antes de que se descargue el script, por lo que la página aparece al usuario mucho antes que el ejemplo anterior.

Con async, en la cabeza

Así es como una página carga un script conasync, Ponlo enheadetiqueta:

With async

El script se recupera de forma asincrónica y, cuando está listo, el análisis de HTML se detiene para ejecutar el script y luego se reanuda.

Con aplazamiento, en la cabeza

Así es como una página carga un script condefer, Ponlo enheadetiqueta:

With defer

La secuencia de comandos se obtiene de forma asincrónica y se ejecuta solo después de que se realiza el análisis de HTML.

El análisis finaliza como cuando colocamos el script al final delbody, pero en general la ejecución del script termina mucho antes, porque el script se ha descargado en paralelo con el análisis de HTML.

Entonces esta es la solución ganadora en términos de velocidad 🏆

Bloqueo de análisis

asyncbloquea el análisis de la página mientrasdeferno.

Bloqueo de renderizado

Ninguno de los dosasyncnidefergarantizar cualquier cosa sobre el bloqueo de la representación. Esto depende de usted y su secuencia de comandos (por ejemplo, asegurarse de que sus secuencias de comandos se ejecuten después de laonLoad) evento.

domInteractive

Guiones marcadosdeferse ejecutan justo después de ladomInteractiveevento, que ocurre después de que el HTML se carga, analiza y elDOMestá construído.

El CSS y las imágenes en este punto aún deben analizarse y cargarse.

Una vez hecho esto, el navegador emitirá eldomCompleteevento, y luegoonLoad.

domInteractivees importante porque su sincronización se reconoce como una medida de la velocidad de carga percibida.Ver el MDNpara más.

Manteniendo las cosas en orden

Otro caso prodefer: guiones marcadosasyncse ejecutan en orden casual, cuando están disponibles. Guiones marcadosdeferse ejecutan (después de que se completa el análisis) en el orden en el que se definen en el marcado.

Solo dime la mejor manera

Lo mejor que puede hacer para acelerar la carga de su página cuando usa scripts es ponerlos en elheady agregue undeferatribuir a tuscriptetiqueta:

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

Este es el escenario que desencadena el más rápidodomInteractiveevento.

Considerando las ventajas dedefer, parece una mejor opción queasyncen una variedad de escenarios.

A menos que esté de acuerdo con retrasar el primer renderizado de la página, asegúrese de que cuando se analice la página, el JavaScript que desea ya esté ejecutado.

Descarga mi gratisManual para principiantes de JavaScript