Atributo async en etiqueta script en Firefox

eduardobpe · #1 (**permalink**) 17/07/2012, 02:06

Hola a tod@s.
Estoy probando cómo funciona todo lo relacionado con scripts no bloqueantes. 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 la carga de los elementos de la página ni la ejecución de otros scripts de Javascript.

El caso es que estoy probando en Firefox el siguiente código y no funciona correctamente:

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <title>Exercise 1</title>
        <script type="text/javascript" async src="example1.js"></script>
        <script type="text/javascript" async src="example4.js"></script>
        <script type="text/javascript" src="example3.js"></script>
    </head>
    <body>
        <p>Hello world</p>
    </body>
</html>

El código de los archivos Javascript enlazados en el código HTML anterior es el siguiente:

//example1.js:

Código Javascript:

Ver originalalert("I'm the example 1");

//example3.js

Código Javascript:

Ver originalalert("I'm the example 3");

//example4.js

Código Javascript:

Ver originalalert("I'm the example 4");

Cuando abro un archivo .html en Firefox con el código de más arriba ocurre lo siguiente en este orden:

1. Se muestra un pop-up con el texto "I'm the example 3".
2. Se muestra un pop-up con el texto "I'm the example 4".
3. Se muestra un pop-up con el texto "I'm the example 1".

Y después de todo esto, se debería mostrar el contenido de la página, que sólo tiene el párrafo con el texto "Hello World", pero no se muestra.
El área del navegador donde se visualizan las páginas aparece en blanco, y el anillo naranja que aparece en una pestaña de Firefox cuando una página se está cargando no para de girar y no desaparece.

¿Alguna idea de por qué ocurre esto?.

maycolalvarez · #2 (**permalink**) 17/07/2012, 08:16

el ser asíncrono implica que el DOM no debe esperar a que se cargue para completar, por lo tanto algunos elementos no tendrán acceso a él, o no estarán disponibles, es ideal para apis externas como like de facebook que puede cargarse al final del dom

claro, no lo he probado aún, de todas formas se debe de documentar muy bien antes de usar estas nuevas propiedades, sobre todo por la compatibilidad sobre los navegadores que aún no lo soporten

eduardobpe · #3 (**permalink**) 17/07/2012, 09:23

Gracias por tu respuesta maycolalvarez.
Sé que todavía el uso de async puede no ser del todo recomendable porque forma parte de HTML5 que no es un estándar todavía.
De todas formas, he podido ver en la web caniuse.com que Firefox sí soporta el uso del atributo async para la etiqueta <script>, con lo que no adivino porqué el código que escribí en el primer post de este hilo no muestra el contenido de la página (el contenido de dentro de <body>), pero sí ejecuta correctamente los scripts de Javascript.

En Chrome sí se muestra el contenido de la página (un simple párrafo donde pone el texto Hello World), peroen Firefox, después de ejecutar los tres scripts, se queda cargando la página y el contenido de ésta no aparece en el navegador.

No tengo ni idea de porqué ocurre esto. ¿Alguna idea más?.

eduardobpe · #4 (**permalink**) 08/08/2012, 03:46

Por si alguien ha tenido el mism problema, un usuario en stackoverflow me comentó que hay un bug en Firefox cuando se utiliza la función alert() desde un script asíncrono. Dicho bug puede verse en bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=692754