Skip to main content
Commonmark migration
Fonte Link

To prepare a script, the user agent must act as follows:

 
  1. Then, the first of the following options that describes the situation must be followed:

    Then, the first of the following options that describes the situation must be followed:

    • If the element has a src attribute, and the element has a defer attribute, and the element has been flagged as "parser-inserted", and the element does not have an async attribute

      The element must be added to the end of the list of scripts that will execute when the document has finished parsing associated with the Document of the parser that created the element.

* **If the element has a [`src`][8] attribute, and the element has a [`defer`][9] attribute, and the element has been flagged as ["parser-inserted"][10], and the element does not have an [`async`][11] attribute**
    The element must be added to the end of the **list of scripts that will execute when the document has finished parsing** associated with the [`Document`][12] of the parser that created the element.

The element is the pending parsing-blocking script of the Document of the parser that created the element. (There can only be one such script per Document at a time.)

 

The task that the networking task source places on the task queue once the fetching algorithm has completed must set the element's "ready to be parser-executed" flag. The parser will handle executing the script.

To prepare a script, the user agent must act as follows:

 
  1. Then, the first of the following options that describes the situation must be followed:
* **If the element has a [`src`][8] attribute, and the element has a [`defer`][9] attribute, and the element has been flagged as ["parser-inserted"][10], and the element does not have an [`async`][11] attribute**
    The element must be added to the end of the **list of scripts that will execute when the document has finished parsing** associated with the [`Document`][12] of the parser that created the element.

The element is the pending parsing-blocking script of the Document of the parser that created the element. (There can only be one such script per Document at a time.)

 

The task that the networking task source places on the task queue once the fetching algorithm has completed must set the element's "ready to be parser-executed" flag. The parser will handle executing the script.

To prepare a script, the user agent must act as follows:

  1. Then, the first of the following options that describes the situation must be followed:

    • If the element has a src attribute, and the element has a defer attribute, and the element has been flagged as "parser-inserted", and the element does not have an async attribute

      The element must be added to the end of the list of scripts that will execute when the document has finished parsing associated with the Document of the parser that created the element.

The element is the pending parsing-blocking script of the Document of the parser that created the element. (There can only be one such script per Document at a time.)

The task that the networking task source places on the task queue once the fetching algorithm has completed must set the element's "ready to be parser-executed" flag. The parser will handle executing the script.

Fim da Recompensa com 50 pontos de reputação concedidos por henriquedpereira
adicionou 557 caracteres ao conteúdo
Fonte Link
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334

Mas atenção: Se o browser não dá suporte adequado a HTML5, os scripts defer podem sim executar fora de ordem! Segundo a especificação do HTML 4, o defer é apenas uma "dica" ao browser de que o script não vai produzir nenhum conteúdo ao documento (por ex.: via document.write) e portanto ele pode continuar fazendo o parse e renderizando. Nada mais é especificado, então é seguro assumir que a ordem de execução pode variar de implementação pra implementação.

Mas atenção: Se o browser não dá suporte adequado a HTML5, os scripts defer podem sim executar fora de ordem! Segundo a especificação do HTML 4, o defer é apenas uma "dica" ao browser de que o script não vai produzir nenhum conteúdo ao documento (por ex.: via document.write) e portanto ele pode continuar fazendo o parse e renderizando. Nada mais é especificado, então é seguro assumir que a ordem de execução pode variar de implementação pra implementação.

Fonte Link
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334

TL;DR - async executa a qualquer momento e em qualquer ordem, defer e "normal" executam na ordem que são declarados (mas todos os defer após todos os "normais").

Encontrar uma especificação precisa do comportamento de async e defer é complicado, uma vez que os mesmos têm influência em diversas etapas do processamento do browser. Segundo a especificação do HTML5:

Nota: Os detalhes de processamento exatos para esses atributos são, principalmente por razões históricas, de certo modo não triviais, envolvendo um número de aspectos do HTML. Os requisitos de implementação são portanto por necessidade espalhados pela especificação. Os algoritmos baixo (nesta seção) descrevem o núcleo desse processamento, mas estes algoritmos referenciam e são referenciados pelas regras de parsing para as tags script de início e fim no HTML, em conteúdo estrangeiro, e em XML, as regras para o método document.write(), o manuseio do processo de scripting, etc.

Alguns dos pontos da pergunta são respondíveis pela especificação, entretanto:

B pode executar antes de A, se sua carga for mais rápida? Ou o defer impõe uma ordem aos demais scripts também com defer?

Não, a ordem é respeitada. Segundo essa mesma especificação, há uma lista de scripts a serem executados quando o documento terminar o parsing, e cada script com defer deve ser incluído no final dessa lista:

To prepare a script, the user agent must act as follows:

  1. Then, the first of the following options that describes the situation must be followed:
* **If the element has a [`src`][8] attribute, and the element has a [`defer`][9] attribute, and the element has been flagged as ["parser-inserted"][10], and the element does not have an [`async`][11] attribute**
    The element must be added to the end of the **list of scripts that will execute when the document has finished parsing** associated with the [`Document`][12] of the parser that created the element.

Dessa forma, se um browser age em conformidade com essa especificação (ver testes abaixo) e executa os scripts na ordem que eles foram inseridos nessa lista (i.e. a ordem na qual aparece no código-fonte) então se eu carrego, digamos, o jQuery de um CDN, o Bootstrap de outro, e meu próprio código do meu servidor, todos com defer, eles devem executar nessa mesma ordem, de modo que a dependência de um a outro deve ser satisfeita.

<script src="//code.jquery.com/jquery-2.1.4.min.js" defer></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" defer></script>
<script src="/js/meucodigo.min.js" defer></script>

Se D for carregado enquanto E está carregando (mas não executando), ele executará antes de E ou não?

Acho que sim. A especificação aplicável aos elementos com async (mesmo item 15 acima) diz o seguinte:

The task that the networking task source places on the task queue once the fetching algorithm has completed must execute the script block and then remove the element from the set of scripts that will execute as soon as possible.

Em contraste, os elementos sem async possuem um comportamento diferente:

The element is the pending parsing-blocking script of the Document of the parser that created the element. (There can only be one such script per Document at a time.)

The task that the networking task source places on the task queue once the fetching algorithm has completed must set the element's "ready to be parser-executed" flag. The parser will handle executing the script.

Ou seja, quando o browser encontra um ou mais scripts com async (ex.: C e D), ele os coloca na fila de tarefas e segue adiante. Quando ele encontra um sem async (nem defer) ele também o coloca na fila de tarefas, mas o marca como "bloqueador de parsing". Não entendi muito bem o que isso significa (pois o processo de parsing em geral está descrito em outro documento - não tenho certeza qual), mas na prática deve servir pra interromper a renderização (mas não necessariamente a carga) até que o script tenha acabado de executar.

Entretanto, não está claro se a presença de um script "bloqueador de parsing" é ou não empecilho para que a tarefa de conclusão dos scripts async ("executar o bloco de script") seja executada nesse estado. Na dúvida, vou adotar uma postura conservadora e assumir que "não" (i.e. vou trabalhar com a hipótese de que após a carga de E começar - mas antes de sua execução - C e D talvez possam executar).

Os testes abaixo parecem corroborar essa minha interpretação.

C e D podem executar depois de A e B? (...) ou é necessário que todos os scripts async executem antes que qualquer script defer execute?

Sim, podem executar a qualquer momento. Não encontrei nada na especificação que proibisse scripts na lista de "scripts a serem executados assim que possível" de executarem depois de scripts na lista de "scripts a serem executados quando o documento terminar o parsing". De fato, um simples teste no Chrome (sem webserver, no próprio sistema de arquivos) chegou à ordem "C,E,F,A,B,D" em um dos testes, e "E,F,A,B,C,D" em outros.

Testes

Para testar o comportamento real dos browsers, fiz uma pequena alteração no SimpleHTTPServer do Python:

import SimpleHTTPServer, SocketServer, sys, time
from SimpleHTTPServer import SimpleHTTPRequestHandler

class MeuHTTPServer(SimpleHTTPRequestHandler):
    def do_GET(*args, **kwargs):
        time.sleep(int(sys.argv[2]))
        return SimpleHTTPRequestHandler.do_GET(*args, **kwargs)
        
SocketServer.TCPServer(("", int(sys.argv[1])), MeuHTTPServer).serve_forever()

E abri o programa 7 vezes, um para servir cada arquivo (os 6 scripts e o html em si). Os scripts "grandes" (A,C,E) aguardam 5 segundos antes de retornar, os "pequenos" (B,D,F), 1 segundo. O html usado foi:

<html>
<body>
<script src="http://localhost:8001/a.js" defer></script>
<script src="http://localhost:8002/b.js" defer></script>
<script src="http://localhost:8003/c.js" async></script>
<script src="http://localhost:8004/d.js" async></script>
<script src="http://localhost:8005/e.js"></script>
<script src="http://localhost:8006/f.js"></script>
</body>
</html>

E cada script simplesmente faz um console.log para "se identificar". Os resultados (no Windows 7) foram:

  • Firefox: "D,E,F,A,B,C", demonstrando todos os pontos citados (inclusive, a requisição GET de todos os scripts foi feita antes do d executar - confirmando que um script async pode executar enquanto um "normal" está carregando). Em outro teste, "D,C,E,F,A,B" (também consistente com o resto da resposta). Depois disso, "C,D,E,F,A,B" após os scripts entrarem na cache.
  • Chrome: "D,C,E,F,A,B" em 2 testes, "E,F,A,B,C,D" após os scripts entrarem na cache (notei uma tendência dos scripts async serem executados por último - mesmo após os defer - diferentemente do Firefox, que tende a executá-los na ordem).
  • Internet Explorer 11: "D,E,C,F,A,B" (demonstrando que um script async de fato pode executar entre dois "normais") na primeira vez, "D,C,E,F,A,B" nas seguintes (aparentemente o IE não coloca recursos vindos do localhost em cache nunca).
  • Opera e Safari: "D,C,E,F,A,B" em 1 teste, "E,F,A,B,C,D" nos demais (mesmo que o Chrome).

Minha conclusão é que a interpretação que dei à especificação está correta, e os principais browsers estão em conformidade com essa especificação.