<!--
Serão baixados todos ao mesmo tempo e executados após o download.
Não tem comoEles saberserão emrequisitados queparalelamente ordeme elesexecutados serãona executadossequência.
-->
<script async src='a.js'></script>
<script async src='b.js'></script>
<script async src='c.js'></script>
<!--
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 comoeles saberserão emrequisitados queparalelamente ordeme elesexecutados serãona executadossequência.
-->
<script defer src='a.js'></script>
<script defer src='b.js'></script>
<script defer src='c.js'></script>
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.