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 dodefer
, é 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.
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 oasync
, 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.