Com HTML5, obtemos dois novos atributos booleanos para a tag <script>: async e defer. O Async permite a execução de scripts de forma assíncrona e o defer permite a execução somente após o documento inteiro ter sido analisado.
Estes dois atributos são um must para aumentar a velocidade e performance de websites. Eles permitem a eliminação do JavaScript de bloqueio de renderização onde a página teria que carregar e executar scripts antes de terminar para renderizar a página. Aqui está um exemplo de uso:
<script defer src="https://www.digitalocean.com/js/jquery.min.js"></script>Async vs Defer
Com async, o arquivo é baixado de forma assíncrona e executado assim que é baixado.
Com defer, o arquivo é baixado de forma assíncrona, mas executado apenas quando a análise do documento é concluída. Com o defer, os scripts serão executados na mesma ordem em que são chamados. Isto faz com que o atributo de escolha seja adiado quando um script depende de outro script. Por exemplo, se você estiver usando jQuery, bem como outros scripts que dependem dele, você usaria adiar sobre eles (jQuery incluído), certificando-se de chamar jQuery antes dos scripts dependentes.
Uma boa estratégia é usar async quando possível, e depois adiar quando async não for uma opção.
👉Note que ambos os atributos não têm qualquer efeito nos scripts em linha.
Suporte do navegador
Posso usar script-async? Dados sobre o suporte para o recurso script-async nos principais navegadores do caniuse.com.