30

Para um único script, a ordem de carga/execução na presença ou não dos atributos async e defer é clara: sem nada, carrega e executa imediatamente, com async carrega em paralelo e executa ao final da carga, com defer carrega em paralelo e executa ao final da renderização:

Minha dúvida é o que acontece quando há mais de um script na página, em especial se o uso ou não dos atributos acima for combinado:

<script src="A.js" defer></script> <!-- Grande -->
<script src="B.js" defer></script> <!-- Pequeno -->
<script src="C.js" async></script> <!-- Grande -->
<script src="D.js" async></script> <!-- Pequeno -->
<script src="E.js"></script>       <!-- Grande -->
<script src="F.js"></script>       <!-- Pequeno -->

Pelo meu entendimento, pode-se fazer algumas afirmações com certa segurança (corrijam-me se eu estiver enganado):

  • E executará antes de F;
  • A e B executarão depois de E e F;
  • C e D podem executar antes ou depois de E e F (inclusive entre um e outro);
  • D pode executar antes de C, se sua carga for mais rápida.

Mas para outras eu não sei a resposta:

  • 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?
  • Se D for carregado enquanto E está carregando (mas não executando), ele executará antes de E ou não? (i.e. quando a carga de um script síncrono começou, é preciso esperar sua execução terminar para executar um script assíncrono?)
  • C e D podem executar depois de A e B? Em outras palavras, se a carga de C por exemplo demorar demais, e tanto a renderização da página quanto a carga de A e B concluírem primeiro, estes podem executar imediatamente, ou é necessário que todos os scripts async executem antes que qualquer script defer execute?

Gostaria de saber se possível o que está especificado em relação à ordem de execução dos scripts e o que pode variar com a implementação (sem necessidade de fazer testes, embora estes sejam bem-vindos como complemento).

8
  • 1
    possível duplicata de Sobre o atributo booleano defer e async vs otimização Commented 4/09/2015 às 18:09
  • da uma lida aqui pt.stackoverflow.com/a/46475/12032 Commented 4/09/2015 às 18:09
  • 1
    Na resposta do re22 diz que não tem como saber a execução dos defers. Mas aqui entendi que é por ordem de ocorrência.
    – Franchesco
    Commented 4/09/2015 às 18:16
  • 1
    Na prática recomenda-se compactar tudo num script só, tanto para diminuir latência quanto para evitar estas "questões de ordem". Aí você pode usar defer e async ao mesmo tempo.
    – epx
    Commented 5/09/2015 às 4:28
  • 1
    @SneepSNinjA Como ninguém respondeu, fiz umas pesquisas, uns testes, e dei uma auto-resposta. De fato, no HTML 4 a ordem dos defers não era especificada, e os browsers podiam executá-los na ordem que eles quisessem (como a resposta que você linkou - de 2011 - também afirma). Já o HTML5 impõe sim uma ordem, e os browsers modernos aparentemente a respeitam.
    – mgibsonbr
    Commented 13/09/2015 às 8:04

1 Resposta 1

8
+50

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

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>

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.

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .