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.

[crayon]

  • Sígueme en Twitter

  • Entradas recientes

  • Comentarios recientes

  • Meta