15.11.2024

Carregamento Assíncrono de Arquivos .js e .css: Otimização de Websites

Resposta Rápida

Para habilitar o carregamento assíncrono de scripts em HTML, adicione o atributo async na tag <script>:

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

Isso permite que seus scripts sejam carregados sem interromper a renderização da página. Se a ordem de execução dos scripts for importante, mas você quiser evitar "bloqueios", utilize a seguinte função JavaScript:

function loadScriptSequentially(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false; // O carregamento ocorre estritamente em ordem
  document.head.appendChild(script);
}

loadScriptSequentially('primeiro.js');  // Será carregado primeiro
loadScriptSequentially('segundo.js'); // Será carregado em segundo

Nota: Scripts assíncronos são carregados em uma ordem aleatória. Use a função fornecida quando a ordem de execução dos scripts for importante.

Implementando Promessas e Recursos Modernos

Carregando Scripts através de Promessa

Para gerenciar o carregamento assíncrono de scripts, você pode usar o objeto Promise, que oferece um controle mais confiável sobre o processo:

function loadScript(src) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Ocorreu um erro ao carregar o script ${src}`));
    document.head.appendChild(script);
  });
}

loadScript("seu-script.js")
  .then(() => console.log("Script carregado com sucesso!"))
  .catch(err => console.error(err));

Melhores Práticas para Carregamento de Scripts

Colocação Adequada dos Scripts

Coloque as tags <script> logo antes da tag de fechamento </body>. Isso permite que o parser HTML carregue a página sem interrupções.

Suporte à Interatividade

Aguarde o carregamento completo do DOM usando o evento document.ready para vincular manipuladores de eventos e evitar "condições de corrida" entre o carregamento do HTML e a execução do JavaScript.

Usando Carregamento Diferido

Para scripts não críticos, use carregamento diferido. Isso ajuda a reduzir o tempo de inicialização da página e economiza largura de banda. Utilize o IntersectionObserver em navegadores modernos e considere métodos alternativos para navegadores mais antigos.

Cuidado com Funções Críticas

Inicialize funções críticas após o evento onload para garantir que elas continuem funcionando.

Manejo de Problemas e Armadilhas

Compatibilidade de Protocólos de Rede

Use URLs relativas a protocolos para carregar scripts, garantindo compatibilidade tanto com HTTP quanto com HTTPS.

Evitando Substituições Completas

Evite substituir completamente o conteúdo de index.html com conteúdo carregado via AJAX. Considere atualizações parciais para uma experiência do usuário mais suave.

Injeção Controlada de Scripts

Para uma inserção precisa de scripts, use métodos como parentNode.insertBefore. A ordem de execução desempenha frequentemente um papel significativo.

Preparando para a Implantação Pública

Antes da implantação pública, lembre-se de remover os console.log de depuração para reduzir o tamanho total do script e mitigar potenciais ameaças de segurança.

Visualização

Comparação do Carregamento de Scripts:

Carregamento Tradicional:
A execução ocorre uma após a outra, mas lentamente.

Com Carregamento Assíncrono:
O carregamento começa simultaneamente — é mais rápido e eficiente.

No carregamento assíncrono:

<script async src='primeiro-construtor.js'></script>  <!-- Começa imediatamente -->
<script async src='segundo-construtor.js'></script> <!-- Começa imediatamente -->
<script async src='terceiro-construtor.js'></script>  <!-- Começa imediatamente -->

O processo de carregamento se torna rápido, produtivo e contínuo!

Recursos Úteis

1. Padrão HTML: O Elemento 'script' — a especificação oficial para o elemento <script> em HTML.
2. MDN Web Docs: Atributos async e defer para Tags 'script' — um guia detalhado sobre como usar os atributos async e defer.
3. Google Developers: Carregando JavaScript com async e defer — recomendações para otimizar o carregamento de páginas usando async e defer.
4. W3Schools: JavaScript Async e Defer — tutoriais e exemplos sobre como usar async e defer.
5. Análise Profunda do Carregamento Assíncrono de Scripts — uma visão analítica dos métodos para carregamento assíncrono de scripts.
6. Scripts: async, defer — um tutorial sobre carregamento dinâmico de scripts no JavaScript.info.
7. Stack Overflow: Diferença Entre os Atributos 'async' e 'defer' — uma discussão sobre o uso de async e defer na comunidade de desenvolvedores.

Video

Navigation