Otimize o carregamento de scripts em suas páginas com async e defer
Quando carregamos um script em uma página, o navegador para de carregar o conteúdo da página até que o script seja baixado e executado. Isso pode afetar negativamente o tempo de carregamento da página, especialmente se o script for grande ou demorar muito para ser carregado.
Para evitar esse problema, podemos usar as tags async e defer para indicar ao navegador como deve tratar o script. Vamos ver como cada uma dessas tags funciona.
Async
A tag async indica ao navegador que o script deve ser baixado e executado assincronamente, ou seja, enquanto o navegador continua carregando o conteúdo da página. Isso significa que o script não vai parar o carregamento da página e será executado assim que for baixado.
Vejamos um exemplo de como usar a tag async:
<script src="script.js" async></script>No exemplo acima, adicionamos a tag async ao script para indicar ao navegador que ele deve ser carregado e executado assincronamente.
Defer
A tag defer também indica ao navegador que o script deve ser baixado e executado assincronamente, mas com uma diferença importante: o script só será executado quando todo o conteúdo da página tiver sido carregado.
Vejamos um exemplo de como usar a tag defer:
<script src="script.js" defer></script>No exemplo acima, adicionamos a tag defer ao script para indicar ao navegador que ele deve ser baixado assincronamente, mas só deve ser executado quando todo o conteúdo da página tiver sido carregado.
Qual a diferença entre async e defer?
A principal diferença entre async e defer é que a tag async indica ao navegador que o script deve ser executado assim que for baixado, enquanto a tag defer indica que o script só deve ser executado quando todo o conteúdo da página tiver sido carregado.
Outra diferença é que os scripts marcados com defer são executados na ordem em que aparecem na página, enquanto os scripts marcados com async podem ser executados em qualquer ordem. Isso pode ser importante se você tiver scripts que dependem uns dos outros.
