O atributo "assíncrono" é útil se um script for adicionado dinamicamente ao DOM?

Question

Esta questão é uma espécie de tangente a Que navegadores apoiam u003Cscript async="async" />?.

Eu já vi alguns scripts ultimamente que fazem algo assim:

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 é uma maneira comum de adicionar um script ao Dom dinamicamente, que, IIRC do livro de Steve Souders "Sites ainda mais rápidos, "solicita todos os navegadores modernos a carregar o script de forma assíncrona (ou seja, sem bloquear a renderização ou download da página de ativos subsequentes).

Se estou correto nisso, faz o s.async = true declaração tem algum uso? Não seria redundante, mesmo para o (s) navegador (s) que suporta essa propriedade, já que um script dinamicamente anexado já deve desencadear download assíncrono?

Answer 1

o especificação (agora) determina que um script elemento isso não é Parser-inserido é assíncrono; a async A propriedade é irrelevante para não inseguro script Elementos:

O terceiro é uma bandeira indicando se o elemento vai "Force-async". Inicialmente, script Os elementos devem ter esse sinalizador. Não se está definido pelo analisador HTML e pelo analisador XML no script elementos que eles inserem. Além disso, sempre que um elemento de script cujo "Force-async"A bandeira está definida tem um async Atributo do conteúdo adicionado, o elemento "Force-async"A bandeira deve ser não definida.

Tendo o async O atributo de conteúdo significa, é claro, que o script seria executado de forma assíncrona. A linguagem da especificação parece deixar a oportunidade de forçar a execução síncrona do script (definindo o atributo e depois removê -lo), mas na prática que não funciona e provavelmente é apenas um pouco de imprecisão nas especificações. Não-paria-inseguro script Os elementos são assíncronos.

Esse comportamento especificado é o que o IE e o Chrome sempre fizeram, o Firefox fez há anos e a ópera atual também faz (não tenho idéia quando mudou do comportamento antigo na resposta vinculada acima).

É facilmente testado:

var script = document.createElement("script");
script.src = "script.js";
console.log("a");
document.body.appendChild(script);
console.log("b");

...com script.js ser

console.log("script loaded");

... irá logar

a
b
script loaded

Answer 2

A questão é s.async = true Faça um uso para scripts inseridos dinamicamente ou já são carregados de forma assíncrona. A resposta é eles não são carregado de forma assíncrona em todos os navegadores, conforme explicado aqui (Obrigado a Markus Olsson pelo link)

Os scripts inseridos por scripts são executados de forma assíncrona no IE e no WebKit, mas de forma síncrona na ópera e no Firefox pré-4.0. No Firefox 4.0, a propriedade ASYNC DOM padrão para true para scripts criados por scripts, para que o comportamento padrão corresponda ao comportamento do IE e do WebKit.

Em navegadores que apóiam async Mas já não é padrão para o carregamento assíncrono (por exemplo, Firefox 3.6), async = true faz a diferença.

(O link acima confirma que o Async é suportado no Gecko 1.9.2, o mecanismo de layout usado pelo Firefox 3.6)

Answer 3

Interessante - acho que isso estava errado em minhas suposições.

Com base neste tópico no fórum JQuery Developers ':

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

parece o async Foi descoberto que a propriedade tem um efeito nos scripts nomeados dinamicamente, pelo menos no Firefox (e potencialmente ópera, embora ainda não suportem a propriedade).

O tópico do fórum também cita a implementação de código de rastreamento assíncrono do Google, que, embora pareça fazer uso do async Propriedade no contexto apropriado, na verdade, parece errar a sintaxe. Google usa:

ga.async = true;

quando aparentemente isso não funciona; O método adequado seria usar:

ga.async = 'async';

ou

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

Portanto, com base no meu entendimento atual, nem todos os navegadores executam scripts nomeados dinamicamente imediatamente após sua inserção no DOM em todos os casos; Firefox (e eventualmente ópera) precisará do async Propriedade a ser configurada para garantir que isso sempre aconteça.

Mais informações sobre a implementação do Firefox de async aqui:

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

Answer 4

Eu acredito que você está correto.

Dentro Exemplos de Steve Ele não define o atributo assíncrono antes de anexar a tag de script ao elemento da cabeça.

Minha compreensão do atttribute assíncrono é que é uma maneira de sinalizar para o navegador que você não pretende manipular a página usando o document.write para que ele possa continuar se renderizando em vez de interromper para carregar o script. Veja a documentação para o Elemento de script no MDC que contém um pouco mais no documento.

Observe que, com sua técnica, você não deve usar o documento.Write de qualquer maneira, pois não tem como saber onde na vida a vida útil seu script será carregado.