Nomak | 8:54
Ejecución asincrónica de Javascript
Ejecución Async & Defer
"Carga no bloqueada"
Cuando cargamos una página web con imágenes y otros elementos dentro de ella los mismos son cargados por el navegador simultáneamente a la carga del código HTML de la página, por lo tanto mientras vamos viendo la carga se producen varias "sub-cargas" en segundo plano. Con la mayoría de los archivos pasa esto, pero con los archivos Javascript, el código Javascript y otros archivos que no vamos a mencionar no sucede esto. En este caso cuando el navegador encuentra por ejemplo un archivo Javascript lo que hace es detener el resto de las cargas hasta terminar con la carga de dicho archivo haciendo que si el código del script es lento la página se cargue lenta también. Por suerte hay una solución desde hace un tiempo con variantes y consiste en cargar Javascript al finalizar la carga de la página o lo que se llama de manera asincrónica:
Atributo Javascript Async
Con tan solo agregar este atributo nos garantizamos que el código Javascript se ejecutará ni bien termine la carga del script pero simultáneamente a la carga de la página. No establece orden de carga de los scripts y se cargan antes del evento load().
Ejemplo:
<script async type="text/javascript" src="archivo.js"></script>
Atributo Javascript Defer
Este atributo es muy parecido al anterior que casi no se puede hablar de diferencias. La gran diferencia es que con este atributo el script no se ejecuta hasta que no haya finalizado la descarga de la página, en cambio en anterior lo hacia mientras se cargaba. Al igual que en el atributo anterior el script se carga antes del evento load() pero respetando el orden de aparición.
Ejemplo:
<script defer type="text/javascript" src="archivo.js"></script>
En simples palabras podemos repasar la definición de:
- Ejecución normal <script>
Este es el comportamiento por defecto del elemento <script>. Parsing del código HTML, se detiene mientras el script se ejecuta. Para los servidores lentos y scripts pesados, esto significa que la visualización de la página web se retrasará. - Ejecución Diferida <script defer>
En pocas palabras: retrasar la ejecución del script hasta que el analizador de HTML ha terminado. Un efecto positivo de este atributo es que el DOM estará disponible para su guión. - Ejecución asincrónica <script async>
No me importa cuando el guión estará disponible? Asíncrona es lo mejor de ambos mundos: análisis de HTML puede continuar y la secuencia de comandos se ejecutará tan pronto como esté listo. Me gustaría recomendar este para scripts como Google Analytics.
Sin comentarios