Cargar Scripts en HTML5

Cuando desarrollamos una página web solemos introducir scripts (normalmente javascript) o librerías para darle ciertas funcionalidades y hacerla más dinámica. Ésto se puede conseguir incluyendo los scripts dentro de la página o importando ficheros externos. Cuando se añaden estos códigos se puede ralentizar la carga de la página o se pueden producir errores cuando se ejecuta el javascript, ésto es debido a la forma que tienen los navegadores de tratar la etiqueta script, y éste suele ser un problema importante en el desarrollo de una página web.

Pero, ¿cómo tratan los navegadores la etiqueta script? Los navegadores parsean el código html que tiene nuestra página y lo hacen de modo secuencial, es decir, van leyendo y tratando las etiquetas, desde la etiqueta <html> a </html>, según van apareciendo en el código. Cuando el navegador se encuentra una etiqueta <script> con el atributo src, el navegador carga el archivo y lo ejecuta. Ésto provoca que si el script es muy lento la página se cargara lentamente o si el script se encarga de modificar algún elemento de la página y el elemento no se ha cargado todavía, no se ejecutará correctamente el script. Este problema se solía solucionar en HTML4 poniendo nuestros scripts al final de la página.

Para mejorar la carga de los archivos javascript, la etiqueta script tiene dos atributos async (incluido en HTML5) y defer (disponible desde la versión 4.01 de HTML). Ambos atributos son booleanos y sirven para indicar como se deben ejecutar los scripts. Sólo deben especificarse si el atributo src esta presente.

Existen tres modos en los que se puede seleccionar estos atributos. Si el atributo async esta presente, el script será ejecutado asíncronamente, tan pronto como este disponible. Si async no esta presente pero aparece defer, el script se cargará cuando la página termine de cargarse. Si ninguno de los dos esta presente el script se ejecutará en el momento de ser leído, antes de que se continúe mostrando el documento.

De esta manera cuando esta presente el atributo async, los scripts se ejecutarán en la primera oportunidad que tengan después de ser cargados completamente y antes de que se ejecute el evento load de la ventana. Esto significa que el atributo async no garantiza el orden de ejecución de los scripts. De otra manera el atributo defer garantiza que los scripts se ejecuten el el orden en que fueron cargados en la página, cuando un elemento script aparece en la página, y contiene el atributo defer, es añadido a la lista de scripts que serán ejecutados cuando el documento termine de cargarse. Esta ejecución empieza cuando se ha parseado la página completamente, pero antes de que se ejecute el evento DOMContentLoaded.

Desde mi punto de vista, una buena practica a la hora de cargar scripts en nuestra página podría ser la siguiente: si el script es una librería o contiene funciones en las que no nos importa el orden en que se cargue podríamos utilizar el atributo async. Pero si necesitamos que los scripts sean ejecutados en un cierto orden deberemos utilizar el atributo defer y colocar la etiqueta script en el orden en el que queramos que se carguen.