Como exatamente <script adiar = "adiar"> funciona?

Eu tenho alguns <script> elementos, e o código em alguns deles depende do código em outros <script>elementos. Vi que o deferatributo pode ser útil aqui, pois permite que os blocos de código sejam adiados na execução.

Para testá-lo, executei isso no Chrome: http://jsfiddle.net/xXZMN/ .

<script defer="defer">alert(2);</script>
<script>alert(1)</script>
<script defer="defer">alert(3);</script>

No entanto, ele alerta 2 - 1 - 3. Por que não alerta 1 - 2 - 3?

ATUALIZAÇÃO: 19/02/2016

Considere esta resposta desatualizada. Consulte outras respostas nesta publicação para obter informações relevantes para a versão mais recente do navegador.

Basicamente, o adiamento diz ao navegador para aguardar "até que esteja pronto" antes de executar o javascript nesse bloco de scripts. Geralmente, isso ocorre depois que o DOM termina o carregamento e o documento.readyState == 4

O atributo defer é específico para o Internet Explorer. No Internet Explorer 8, no Windows 7, o resultado que estou vendo na sua página de teste do JS Fiddle é 1 - 2 - 3.

Os resultados podem variar de navegador para navegador.

http://msdn.microsoft.com/en-us/library/ms533719(v=vs.85).aspx

Ao contrário da crença popular, o IE segue os padrões com mais frequência do que as pessoas deixam transparecer. Na verdade, o atributo "adiar" é definido na especificação do nível 1 do DOM http://www.w3.org/TR/REC-DOM-Level-1/level -one-html.html

A definição de adiamento do W3C: http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer :

"Quando definido, esse atributo booleano fornece uma dica ao agente do usuário de que o script não irá gerar nenhum conteúdo do documento (por exemplo, nenhum" document.write "em javascript) e, portanto, o agente do usuário pode continuar analisando e processando".

Alguns trechos da especificação HTML5: http://w3c.github.io/html/semantics-scripting.html#element-attrdef-script-async

Os atributos defer e async não devem ser especificados se o atributo src não estiver presente.

Existem três modos possíveis que podem ser selecionados usando esses atributos [assíncrono e adiado]. Se o atributo async estiver presente, o script será executado de forma assíncrona, assim que estiver disponível. Se o atributo async não estiver presente, mas o atributo defer estiver presente, o script será executado quando a página terminar de analisar. Se nenhum atributo estiver presente, o script será buscado e executado imediatamente, antes que o agente continue analisando a página.

Os detalhes exatos de processamento para esses atributos são, por razões históricas, um tanto não triviais, envolvendo vários aspectos do HTML. Os requisitos de implementação são, portanto, necessariamente espalhados por toda a especificação. Os algoritmos abaixo (nesta seção) descrevem o núcleo desse processamento, mas esses algoritmos referenciam e são referenciados pelas regras de análise para tags de início e fim de script em HTML, conteúdo estrangeiro e XML, as regras para o document.write (), o tratamento de scripts etc.

Se o elemento tiver um atributo src, e o elemento tiver um atributo defer, e o elemento tiver sido marcado como "inserido pelo analisador", e o elemento não tiver um atributo assíncrono:

O elemento deve ser adicionado ao final da lista de scripts que serão executados quando o documento concluir a análise associada ao documento do analisador que criou o elemento.

A resposta real é: porque você não pode confiar no adiamento.

No conceito, adiar e assíncrono diferem da seguinte forma:

assíncrono permite que o script seja baixado em segundo plano sem bloquear. Em seguida, no momento em que termina o download, a renderização é bloqueada e esse script é executado. A renderização é retomada quando o script é executado.

adiar faz o mesmo, exceto reivindicações para garantir que os scripts sejam executados na ordem em que foram especificados na página e que serão executados após o término da análise do documento. Portanto, alguns scripts podem terminar o download e aguardar os scripts que foram baixados mais tarde, mas que apareceram antes deles.

Infelizmente, devido ao que é realmente uma briga de gato de padrões, a definição de adiamento varia de especificação para especificação, e mesmo nas especificações mais recentes não oferece uma garantia útil. Como as respostas aqui e esse problema demonstram, os navegadores implementam o adiamento de maneira diferente:

• Em certas situações, alguns navegadores têm um bug que causa a falha deferde execução dos scripts.
• Alguns navegadores atrasam o DOMContentLoadedevento até depois que os deferscripts foram carregados, e outros não.
• Alguns navegadores obedecem defera <script>elementos com código embutido e sem srcatributo, e outros o ignoram.

Felizmente, a especificação especifica pelo menos que as substituições assíncronas sejam adiadas. Assim, você pode tratar todos os scripts como assíncronos e obter uma ampla variedade de suporte ao navegador da seguinte forma:

<script defer async src="..."></script>

98% dos navegadores em uso no mundo todo e 99% nos EUA evitarão o bloqueio com essa abordagem.

(Se você precisar esperar até que o documento termine de analisar, ouça o evento do DOMContentLoadedevento ou use a .ready()função útil do jQuery . Você desejaria fazer isso de qualquer maneira para voltar normalmente aos navegadores que não são implementados defer.)

defersó pode ser usado na <script>tag para inclusão de script externo . Portanto, recomenda-se que seja usado nas <script>tags <head>-seção.

O atributo adiar funciona apenas com a tag scripts com src. Foi encontrada uma maneira de imitar o adiamento de scripts embutidos. Use o evento DOMContentLoaded.

<script defer src="external-script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
    // Your inline scripts which uses methods from external-scripts.
});
</script>

Isso ocorre porque o evento DOMContentLoaded é acionado após o adiamento de scripts atribuídos ser completamente carregado.

O atributo defer é apenas para scripts externos (só deve ser usado se o atributo src estiver presente).

Também deve ser observado que pode haver problemas no IE <= 9 ao usar script deferem determinadas situações. Mais sobre isso: https://github.com/h5bp/lazyweb-requests/issues/42

Veja este excelente artigo Mergulhe nas águas turvas do carregamento de scripts pelo desenvolvedor do Google Jake Archibald escrito em 2013.

Citando a seção relevante desse artigo:

Adiar

<script src="//other-domain.com/1.js" defer></script>
<script src="2.js" defer></script>

Spec diz : Faça o download juntos, execute em ordem imediatamente antes de DOMContentLoaded. Ignore "adiar" em scripts sem "src".

O IE <10 diz : Eu posso executar o 2.js na metade da execução do 1.js. Isso não é divertido?

Os navegadores em vermelho dizem : não tenho idéia do que é esse "adiamento", vou carregar os scripts como se não estivessem lá.

Outros navegadores dizem : Ok, mas talvez eu não ignore "adiar" em scripts sem "src".

_{(Acrescentarei que as versões anteriores do Firefox acionam o DOMContentLoaded antes que os deferscripts terminem de ser executados, de acordo com este comentário .)}

Os navegadores modernos parecem oferecer suporte asyncadequado, mas você precisa estar bem com os scripts esgotados e possivelmente antes do DOMContentLoaded.

Este atributo booleano é definido para indicar a um navegador que o script deve ser executado após a análise do documento. Como esse recurso ainda não foi implementado por todos os outros principais navegadores, os autores não devem assumir que a execução do script será realmente adiada. Nunca chame document.write () a partir de um script de adiamento (desde o Gecko 1.9.2, isso acabará com o documento). O atributo defer não deve ser usado em scripts que não possuem o atributo src. Desde o Gecko 1.9.2, o atributo defer é ignorado em scripts que não possuem o atributo src. No entanto, no Gecko 1.9.1, mesmo scripts em linha são adiados se o atributo defer estiver definido.

adiar trabalha com chrome, firefox, ou seja,> 7 e Safari

ref: https://developer.mozilla.org/en-US/docs/HTML/Element/script

O atributo defer é um atributo booleano.

Quando presente, especifica que o script é executado quando a página termina de analisar.

Nota: O atributo defer é apenas para scripts externos (deve ser usado apenas se o atributo src estiver presente).

Nota: Existem várias maneiras de executar um script externo:

Se o assíncrono estiver presente: O script é executado de forma assíncrona com o restante da página (o script será executado enquanto a página continua a análise) Se o assíncrono não estiver presente e o adiamento estiver presente: O script será executado quando a página terminar de analisar Se nem assíncrono ou adiado está presente: o script é buscado e executado imediatamente, antes que o navegador continue analisando a página