Explorando los tipos de script async, defer y dynamic.
Hoy en día los scripts pueden ser más pesados que el HTML y su tamaño de descarga es mayor, y el tiempo de procesamiento también es mayor.
Pero puede haber algunos problemas importantes como:
- Los scripts no pueden ver los elementos del DOM por debajo de ellos
- Si hay un script voluminoso en la parte superior de la página, «bloquea la página». Los usuarios no pueden ver el contenido de la página hasta que se descarga y se ejecuta.
Podemos resolver este problema colocando el script al final (después del html), pero esa solución forzará al script a cargarse después de que se cargue el html. Para documentos HTML largos, eso puede ser un retraso notable si la gente tiene un internet lento.
Por suerte, hay dos atributos <script> que nos resuelven el problema: defer y async.
Con el atributo defer el navegador carga el script en modo ‘background’ y lo ejecuta cuando se carga.
Así el modo defer evita el bloqueo de la página y los scripts con defer siempre se ejecutan cuando el DOM está listo, pero antes del evento DOMContentLoaded.
El evento DOMContentLoaded se dispara cuando el documento HTML inicial se ha cargado y analizado completamente, sin esperar a que las hojas de estilo, las imágenes y los subframes terminen de cargarse.
Los scripts en diferido mantienen su orden relativo, igual que los scripts normales. Así, si tenemos primero un script largo y luego uno más pequeño, este último espera.
Pero el atributo deferse ignora si la etiqueta <script>no tiene src.
Async
El atributo async significa que ayuda a que el script se cargue en modo ‘independiente’.
El navegador carga las páginas sin esperar a que se carguen los scripts async. Los scripts DOMContentLoaded y async no se esperan entre sí (orden «load-first»).
Los demás scripts no esperan a los scripts async, y los scripts async no los esperan a ellos. El modo asíncrono (como el modo diferido) no bloquea la página.
Los scripts asíncronos son geniales cuando integramos un script independiente de terceros en la página: contadores, anuncios, herramientas analíticas y demás, ya que no dependen de nuestros scripts, y nuestros scripts no deben esperar por ellos.
Dinámico
También podemos añadir un script de forma dinámica utilizando JavaScript:
El script comienza a cargarse en cuanto se anexa al documento y se comporta como scripts «async» por defecto.
Significa:
- Que no esperan nada, nada los espera.
- El script que se carga primero – se ejecuta primero (orden «load-first»).
Pero podemos desactivar el modo asíncrono para los scripts dinámicos configurando script.async = false antes de anexarlo al html.
Resumen
Tanto async como defertienen una cosa en común: la descarga de dichos scripts no bloquea la renderización de la página. Así que el usuario puede leer el contenido de la página y familiarizarse con ella inmediatamente.
Gracias por leer. Espero que te haya gustado 😎