Estoy probando cómo funciona todo lo relacionado con scripts no bloqueantes o también llamados asíncronos. En HTML5 existe un nuevo atributo para la etiqueta <script> llamado async.
Este atributo hace que el archivo Javascript enlazado mediante esta etiqueta no bloquee el renderizado de la página (no impide que se construya el árbol DOM ni que el contenido de la página sea cargado) ni la ejecución de otros scripts de Javascript.
El caso es que estoy probando en Firefox el siguiente código y no funciona como yo me esperaba:
Código HTML :
<!DOCTYPE html> <html> <head> <title>Ejercicio 2</title> <script type="text/javascript" async src="ejemplo1.js"></script> <script type="text/javascript" async src="ejemplo2.js"></script> <script type="text/javascript" src="ejemplo3.js"></script> </head> <body> <p>Hola mundo</p> </body> </html>
El código correspondiente a los scripts de Javascript es el siguiente:
//example1.js:
Código Javascript :
alert("Soy el ejemplo 1");//example2.js:
Código Javascript :
alert("Soy el ejemplo 2");//example3.js:
Código Javascript :
alert("Soy el ejemplo 3");Si abro en Firefox 13 el archivo que contiene el código HTML de más arriba el orden de ejecución es el siguiente:
1º) Aparece un pop-up con el texto "Soy el ejemplo 3"
2º) Aparece un pop-up con el texto "Soy el ejemplo 2"
3º) Aparece un pop-up con el texto "Soy el ejemplo 1"
La ejecución de los scripts aparece en el orden esperado, pero, después de que todos ellos se ejecuten debería aparecer el contenido de la página en el navegador, que sólo consiste en un párrafo con el texto "Hola mundo", pero no es así, no aparece. La página se queda como si estuviera cargando y se queda totalmente en blanco.
De hecho, si utilizo Firebug para inspeccionar el código de la página cuando se está cargando, y después de que los tres scripts se hayan ejecutado, sucede lo que se ve en la imagen que pongo a continuación:
El navegador no recibe el body y todo su contenido.
Lo curioso es que este mismo ejemplo me funciona correctamente en Chrome.
¿Saben a qué se debe que en Firefox no se cargue el contenido de la página y en Chrome sí?.
Por cierto, Firefox sí soporta el uso del atributo async en la etiqueta <script>.
