¿Es útil el atributo/propiedad "asincrónico" si un script se agrega dinámicamente al DOM?

Question

Esta pregunta es una especie de tangente a Which browsers support <script async="async" />?.

que he visto unos cuantos scripts últimamente que hacer algo como esto:

var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://www.example.com/script.js'; 
document.getElementsByTagName('head')[0].appendChild(s); 

Esta es una forma común para agregar una secuencia de comandos para el DOM dinámicamente, lo que, IIRC del libro de Steve Souders "Even Faster Web Sites" solicita a todos los navegadores modernos que carguen el script de forma asíncrona (es decir, que no bloqueen el procesamiento de la página ni la descarga de los activos posteriores).

Si estoy en lo correcto en eso, ¿tiene alguna utilidad la declaración s.async = true? ¿No sería redundante, incluso para los navegadores que admiten esa propiedad, ya que una secuencia de comandos adjunta dinámicamente debería desencadenar la descarga asincrónica?

Answer 1

La pregunta es qué s.async = true tienen un uso para los scripts insertados de forma dinámica, o se trata de cargar de forma asíncrona ya. La respuesta es que no se cargan de forma asíncrona en todos los navegadores, como se explica here (gracias a Markus Olsson para el enlace)

guiones Script-insertada ejecutar de forma asincrónica en IE y WebKit, pero de forma sincrónica en Opera y pre-4.0 Firefox. En Firefox 4.0, la propiedad DOM asíncrona se establece de forma predeterminada en "verdadera" para los scripts creados por script, por lo que el comportamiento predeterminado coincide con el comportamiento de IE y WebKit.

En los navegadores que admiten async pero que todavía no son predeterminados para la carga asíncrona (por ejemplo, Firefox 3.6), async = true hace la diferencia.

(El enlace anterior confirma que asíncrono se apoya en Gecko 1.9.2, el motor de renderizado utilizado por Firefox 3.6)

Answer 2

Creo que estás en lo cierto.

En Steve's own examples no establece el atributo async antes de adjuntar la etiqueta de script al elemento principal.

Mi comprensión del async atttribute es que es una forma de señalizar al navegador que no tiene la intención de manipular la página utilizando document.write para que pueda continuar la representación en lugar de detenerse para cargar el script. Consulte la documentación del script element at mdc que contiene un poco más sobre los problemas document.write/async.

Tenga en cuenta que con su técnica no debe usar document.write de todos modos, ya que no tiene forma de saber en qué parte de la vida de la página se cargará la secuencia de comandos.

Answer 3

Interesante - Creo que me equivoqué en mis suposiciones.

Sobre la base de este hilo en el foro de los desarrolladores de jQuery:

http://forum.jquery.com/topic/jquery-ajax-async-vs-html5-script-async

parece que la propiedad async se ha descubierto que tienen un efecto sobre los scripts adjuntas dinámicamente, al menos en Firefox (y potencialmente Opera, aunque todavía no es compatible con la propiedad).

El hilo del foro también cita la implementación del código de seguimiento asíncrono de Google, que, aunque parece hacer uso de la propiedad async en el contexto apropiado, en realidad parece tener la sintaxis incorrecta. Google usa:

ga.async = true; 

cuando aparentemente eso no funciona; el método adecuado sería utilizar ya sea:

ga.async = 'async'; 

o

ga.setAttribute('async', 'async'); 

Por lo tanto, basado en mi conocimiento actual, no todos los navegadores realmente ejecutar secuencias de comandos adjuntas dinámicamente inmediatamente después de su inserción en el DOM en todos los casos; Firefox (y eventualmente Opera) necesitarán que la propiedad async se configure para garantizar que esto siempre suceda.

Más información sobre la aplicación de async aquí de Firefox:

https://bugzilla.mozilla.org/show_bug.cgi?id=503481

Última pregunta

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Cuestiones relacionadas

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.