# 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][1]: > **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`][1] de [início][2] e [fim][3] no HTML, em [conteúdo estrangeiro][4], e [em XML][5], as regras para o método [`document.write()`][6], o manuseio do processo de [*scripting*][7], 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: > 15. 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. <!-- language: lang-html --> <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> **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][13], 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. ## 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][14] that the [networking task source][15] places on the task queue once the [fetching algorithm][16] has completed must [execute the script block][17] and then remove the element from the [set of scripts that will execute as soon as possible][18]. Em contraste, os elementos **sem** `async` possuem um comportamento diferente: > The element is the [pending parsing-blocking script][19] of the [Document][12] of the parser that created the element. (There can only be one such script per [Document][12] at a time.) > The [task][14] that the [networking task source][15] places on the task queue once the [fetching algorithm][16] has completed must set the element's ["ready to be parser-executed"][20] 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`][21] do Python: <!-- language: lang-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: <!-- language: lang-html --> <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. [1]: http://www.w3.org/TR/html5/scripting-1.html#the-script-element [2]: http://www.w3.org/TR/html5/syntax.html#scriptTag [3]: http://www.w3.org/TR/html5/syntax.html#scriptEndTag [4]: http://www.w3.org/TR/html5/syntax.html#scriptForeignEndTag [5]: http://www.w3.org/TR/html5/the-xhtml-syntax.html#scriptTagXML [6]: http://www.w3.org/TR/html5/webappapis.html#dom-document-write [7]: http://www.w3.org/TR/html5/webappapis.html#scripting [8]: http://www.w3.org/TR/html5/scripting-1.html#attr-script-src [9]: http://www.w3.org/TR/html5/scripting-1.html#attr-script-defer [10]: http://www.w3.org/TR/html5/scripting-1.html#parser-inserted [11]: http://www.w3.org/TR/html5/scripting-1.html#attr-script-async [12]: http://www.w3.org/TR/html5/dom.html#document [13]: http://www.w3.org/TR/html401/interact/scripts.html#adef-defer [14]: http://www.w3.org/TR/html5/webappapis.html#concept-task [15]: http://www.w3.org/TR/html5/webappapis.html#networking-task-source [16]: http://www.w3.org/TR/html5/infrastructure.html#fetch [17]: http://www.w3.org/TR/html5/scripting-1.html#execute-the-script-block [18]: http://www.w3.org/TR/html5/scripting-1.html#set-of-scripts-that-will-execute-as-soon-as-possible [19]: http://www.w3.org/TR/html5/scripting-1.html#pending-parsing-blocking-script [20]: http://www.w3.org/TR/html5/scripting-1.html#ready-to-be-parser-executed [21]: https://docs.python.org/2/library/simplehttpserver.html