javascript - page - ¿Es útil el atributo/propiedad "asincrónico" si un script se agrega dinámicamente al DOM?
onload javascript (4)
Creo que estás en lo correcto
En los ejemplos de Steve, él no establece el atributo async antes de adjuntar la etiqueta del script al elemento principal.
Mi comprensión del atributo asincrónico es que es una forma de indicarle al navegador que no tiene la intención de manipular la página utilizando document.write para que pueda continuar renderizando en lugar de detenerse para cargar el script. Consulte la documentación del here 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á el script.
Esta pregunta es una especie de tangente a qué navegadores son compatibles <script async = "async" />? .
Recientemente he visto algunos guiones que hacen 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 de agregar un script al DOM dinámicamente, que, IIRC del libro de Steve Souders " Incluso sitios web más rápidos ", solicita a todos los navegadores modernos que carguen el script de forma asíncrona (es decir, que no bloqueen el procesamiento de páginas ni la descarga de activos posteriores) .
Si estoy en lo correcto, ¿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?
Interesante: creo que resultó que estaba equivocado en mis suposiciones.
Basado en este hilo en el foro de desarrolladores de jQuery:
http://forum.jquery.com/topic/jquery-ajax-async-vs-html5-script-async
parece que se ha descubierto que la propiedad async tiene un efecto en los scripts añadidos dinámicamente, al menos en Firefox (y potencialmente en 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 obtener la sintaxis incorrecta. Google usa:
ga.async = true;
cuando aparentemente eso no funciona; el método correcto sería usar:
ga.async = ''async'';
o
ga.setAttribute(''async'', ''async'');
Por lo tanto, de acuerdo con mi conocimiento actual, no todos los navegadores ejecutarán scripts con scripts dinámicos inmediatamente después de su inserción en el DOM en todos los casos; Firefox (y eventualmente Opera) necesitarán establecer la propiedad async para garantizar que esto siempre suceda.
Más información sobre la implementación de async de Firefox aquí:
La pregunta es si s.async = true tiene un uso para scripts insertados dinámicamente, o ya están cargados asíncronamente. La respuesta es que no se cargan de forma asíncrona en todos los navegadores, como se explica here (gracias a Markus Olsson por el enlace).
Los scripts insertados en scripts se ejecutan de forma asincrónica en IE y WebKit, pero de forma síncrona en Opera y Firefox pre-4.0. 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 compatibles con async pero que no tienen una carga asincrónica predeterminada (por ejemplo, Firefox 3.6), async = true hace la diferencia.
(El enlace anterior confirma que Async es compatible con Gecko 1.9.2, el motor de diseño utilizado por Firefox 3.6)
La respuesta aceptada a partir de este escrito está desactualizada. La specification ahora dicta que un elemento script que no está insertado en el analizador es asíncrono; la propiedad async es irrelevante para los elementos de script insertados sin analizador:
El tercero es una bandera que indica si el elemento " forzará asincrónicamente ". Inicialmente, los elementos de
scriptdeben tener este indicador establecido. No está establecido por el analizador HTML y el analizador XML en los elementos descriptque insertan. Además, cada vez que un elemento de script cuyo indicador " force-async " está configurado tiene agregado un atributo de contenidoasync, el indicador " force-async " del elemento debe estar desactivado.
Tener el atributo de contenido async , por supuesto, significa que el script se ejecutará de forma asincrónica. El lenguaje de especificación parece dejar una oportunidad para forzar la ejecución sincrónica del guión (estableciendo el atributo y luego eliminándolo), pero en la práctica eso no funciona y es probablemente solo un poco vago en la especificación. Los elementos de script insertados sin analizador son asincrónicos.
Este comportamiento específico es lo que IE y Chrome siempre han hecho, Firefox lo ha hecho durante años, y el actual Opera también (no tengo idea de cuándo cambió el comportamiento anterior en la respuesta vinculada anteriormente).
Se prueba fácilmente:
var script = document.createElement("script");
script.src = "script.js";
console.log("a");
document.body.appendChild(script);
console.log("b");
... con script.js siendo
console.log("script loaded");
... registrará
a b script loaded