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:
- 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.