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