Skip to main content
3 de 5
Revisão
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114

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.
  Não tem como saber em que ordem eles serão executados.
-->
<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',
  não tem como saber em que ordem eles serão executados.
-->
<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.

Testes [async]

A Microsoft possui uma página para testes com async para o Internet Explorer, mas que pode ser vista e os testes executados por qualquer outro navegador: Test drive demo: HTML5 async. Nele você pode ver como são executados o mesmo script de modos diferentes pelo uso do atributo.

Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114