19

O uso de async e defer para otimização é um bom assunto a tocarmos quando queremos páginas carregadas de forma mais rápida e também sem problemas de bloqueamento.

Dúvidas:

  • Usando async, se o navegador não der suporte, ele ignora o atributo e baixa/executa o script normalmente, ou ele simplesmente o ignora, não carregando-o?
  • Considerando que o objetivo do async e do defer, é realizar o carregamento dos scripts sem interromper/bloquear a renderização da página, não seria a mesma coisa que coloca-los(os scripts) antes do </body>? Ou por carregar assincronamente, ele é mais rápido já que não depende que a renderização seja concluída?
  • As bibliotecas para carregamento assíncrono, como o LABjs, ainda são úteis, tendo em vista estes atributos(async/defer)? Ou eles são de certa maneira mais seguros, garantindo o carregamento assíncrono independendo da versão do navegador?
  • Considerando que o defer permite que o script seja carregado de forma assíncrona, mas só permite sua execução após a renderização, ele pode ser melhor que o async, já que este executa após o carregamento, mesmo que ainda esteja ocorrendo a renderização?

1 Resposta 1

21
+50

Usando async, se o navegador não der suporte, ele ignora o atributo e baixa/executa o script normalmente, ou ele simplesmente o ignora, não carregando-o?

Ele ignora somente o atributo, o script é baixado normalmente como se não houvesse defer ou async, isto é, bloqueando o parse da página. Você pode verificar melhor quais navegadores suportam esses atributo por meio dos links: async e defer.

O async é um atributo novo já o defer, se não me engano foi implementado pela Microsoft há muito tempo e então os demais navegadores passaram a dar suporte nas versões mais novas. Você pode usar a técnica de combinar os dois atributos para impedir o bloqueio da renderização e continuar baixando os scripts em segundo plano:

<script src='meuscript-js' async defer></script>

Se o navegador do usuário suportar ambos os atributos, async prevalecerá. Caso não suporte async, o atributo será ignorado e então defer será utilizado. Importante: A ordem de execução após o download é diferente e será explicada na próxima pergunta.

Considerando que o objetivo do async e do defer, é realizar o carregamento dos scripts sem interromper/bloquear a renderização da página, não seria a mesma coisa que coloca-los (os scripts) antes do </body>? Ou por carregar assincronamente, ele é mais rápido já que não depende que a renderização seja concluída?

Não deve levar em consideração somente o "carregar assincronamente", vale ressaltar que cada atributo tem um comportamento e serve para um propósito.

Execução
Referência

async deve ser usado para scripts que podem ser executados independente do documento estar pronto ou não. O script será baixado sem interromper o parse da página e executado logo em seguida. No link de referência acima, um exemplo que bem simples para ilustrar são os scripts do Google Analytics. Não é preciso que o DOM esteja pronto para que eles sejam executados.

defer deve ser usado para scripts que devem ser executados somente quando o documento estiver pronto. Para exemplificar, um script que manipula o evento de click em uma tag <a> no DOM.

E só para deixar mais claro que não é a mesma coisa. Antes de </body>:

<script src='a.js'></script> <!-- será baixado e executado. -->
<script src='b.js'></script> <!-- será baixado depois de 'a.js' e executado. -->
<script src='c.js'></script> <!-- será baixado depois de 'b.js' e executado. -->

Já com async:

<!--
  Serão baixados todos ao mesmo tempo e executados após o download.
  Eles serão requisitados paralelamente e executados na sequência.
-->
<script async src='a.js'></script>
<script async src='b.js'></script>
<script async src='c.js'></script>

E com defer:

<!--
  Serão baixados todos ao mesmo tempo e executados somente quando a
  renderização do documento estiver concluída. Assim como o 'async',
  eles serão requisitados paralelamente e executados na sequência.
-->
<script defer src='a.js'></script>
<script defer src='b.js'></script>
<script defer src='c.js'></script>

As bibliotecas para carregamento assíncrono, como o LABjs, ainda são úteis, tendo em vista estes atributos(async/defer)? Ou eles são de certa maneira mais seguros, garantindo o carregamento assíncrono independendo da versão do navegador?

Aqui vai a questão de compatibilidade. Não conheço essas bibliotecas mas certamente elas tem como propósito (além do "carregamento assíncrono") suprir a incompatibilidade dos navegadores. Se você não quer ter surpresas com async e defer, use uma biblioteca que trate isso.
Veja esse artigo no CSS-tricks

Considerando que o defer permite que o script seja carregado de forma assíncrona, mas só permite sua execução após a renderização, ele pode ser melhor que o async, já que este executa após o carregamento, mesmo que ainda esteja ocorrendo a renderização?

Não vejo um sendo melhor que o outro pois não servem para a mesma coisa, embora ambos fazem o download do script sem interromper a renderização mas o modo como esses scripts serão executados funciona de forma diferente.

Scripts que utilizam atributo async e defer fazem uma diferença maior quando eles não estão localizados tão no final do documento. Como a análise do HTML ocorre da esquerda para direita, de cima para baixo, começando pelo o primeiro elemento declarado <html>, até quando ele seja fechado. Se algum script está localizado logo antes do elemento </body>, torna-se redundante o uso dos atributos async e defer.

Como a análise do documento já está quase completa naquele momento, esses elementos script não tem muito o que bloquear.

4
  • 4
    Sua resposta está bem mais correta que a minha (que acabei de excluir). Pelo que andei lendo, nenhum dos atributos determina como o script será carregado, somente o momento em que será executado. O "carregamento assíncrono" que se obtém com eles é um efeito colateral, já que eliminam a necessidade de bloquear imediatamente o processamento do documento para executar o script. Foi o que entendi da especificação e de outros artigos que li.
    – bfavaretto
    Commented 11/01/2015 às 1:05
  • Boa resposta, coincidiu com o que li, ambos carregam de forma assíncrona, um executa após a renderização o outro após o carregamento. Bom a ressalva que cada um tem seu propósito, se eu for executar um script que necessita que a renderização esteja completa para sim executa-lo, então usaria defer, ao invés de async.
    – Ale
    Commented 11/01/2015 às 1:12
  • Relacionada: Ao usar async e defer, a ordem dos scripts é respeitada?. Commented 10/02/2016 às 17:27
  • 1
    Link quebrado do Test drive demo: HTML5 async a MS deve ter tirado do ar já. :/ Commented 23/04/2018 às 12:44

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 .