Como carregar um script de forma assíncrona para otimizar o desempenho de sua página

Como carregar um script de forma assíncrona?

Em JavaScript, a carga de scripts pode ser feita de diferentes maneiras, e uma das mais importantes para otimizar o desempenho é o carregamento assíncrono. Ao carregar um script de forma assíncrona, você garante que o carregamento e a execução do script não bloqueiem o restante da página, permitindo que outros recursos, como HTML e CSS, sejam carregados e renderizados enquanto o script está sendo baixado.

O comportamento padrão de scripts em uma página da web é bloqueante, o que significa que o navegador para de processar o restante do conteúdo enquanto o script é baixado e executado. Isso pode prejudicar a experiência do usuário, especialmente se o script for grande ou se houver muitos scripts para carregar.

Como funciona o carregamento assíncrono?

O carregamento assíncrono permite que o navegador continue carregando outros recursos enquanto o script é baixado em segundo plano. Isso é possível utilizando os atributos async ou defer na tag <script>. Esses atributos são os métodos mais comuns para implementar o carregamento assíncrono de scripts em páginas web.

Usando o atributo async

O atributo async permite que o script seja carregado e executado de maneira assíncrona, ou seja, sem bloquear o carregamento da página. O script será baixado de maneira assíncrona e executado assim que for totalmente carregado.

Exemplo de como usar o atributo async:

<script src="script.js" async></script>

O que o código está fazendo: O atributo async permite que o script seja carregado em segundo plano e executado assim que for completamente baixado, sem interromper o carregamento do restante da página.

Vale ressaltar que a execução do script pode ocorrer a qualquer momento, portanto, a ordem dos scripts carregados com async não é garantida.

Usando o atributo defer

Já o atributo defer também carrega o script de forma assíncrona, mas com a diferença de que ele aguarda até que o HTML tenha sido completamente analisado antes de executar o script. Isso é útil quando você precisa garantir que o DOM esteja completamente carregado antes de rodar o script.

Exemplo de como usar o atributo defer:

<script src="script.js" defer></script>

O que o código está fazendo: O atributo defer garante que o script será carregado de maneira assíncrona, mas só será executado após a análise completa do HTML. Isso permite que o carregamento da página não seja bloqueado, enquanto ainda se garante que o script seja executado após a estrutura da página estar pronta.

Diferença entre async e defer

A principal diferença entre os atributos async e defer está na ordem de execução dos scripts:

• async: Os scripts podem ser executados assim que forem baixados, sem respeitar a ordem em que aparecem no código.
• defer: Os scripts são executados após a análise completa do HTML, respeitando a ordem em que aparecem no código.

Quando usar cada um?

• Use async quando o script não depender de outros scripts ou não interferir na renderização da página. Isso é ideal para scripts de analytics ou de publicidade.
• Use defer quando o script depender do conteúdo da página (como o DOM) e você quiser garantir que o script seja executado após o carregamento do HTML, mas antes de carregar outros scripts que podem depender dele.

Conclusão

Carregar scripts de forma assíncrona em JavaScript é uma técnica essencial para otimizar o desempenho das suas páginas web. Ao usar os atributos async e defer, você pode evitar o bloqueio do carregamento de outros recursos e garantir que a página seja renderizada de forma mais rápida, melhorando a experiência do usuário e a performance geral do seu site.

Carregamento assíncrono de scripts em JavaScript: Melhore a performance da sua página

O carregamento assíncrono de scripts é uma das práticas mais importantes para otimizar a performance de páginas web. Com os atributos async e defer, você pode garantir que o carregamento dos scripts não bloqueie a renderização da página, tornando sua aplicação mais eficiente e rápida.

Algumas aplicações:

• Uso do async para carregar scripts que não dependem do conteúdo da página, como análises e scripts de publicidade.
• Uso do defer para garantir que os scripts sejam carregados após o HTML ser totalmente processado, sem bloquear a renderização da página.
• Otimização da performance de websites, garantindo que scripts sejam carregados e executados de forma eficiente.

Dicas para quem está começando

• Entenda quando usar async e defer para não bloquear o carregamento da página, especialmente em sites que dependem de muitos scripts.
• Teste o comportamento do seu site com e sem esses atributos para ver a diferença na performance e entender como cada um afeta o carregamento.
• Use async para scripts independentes e defer para scripts que precisam esperar o carregamento completo do HTML antes de rodar.
• Lembre-se de que os scripts com async não respeitam a ordem de execução, enquanto os com defer mantêm a ordem correta.

Compartilhe este tutorial