Adiar a análise de javascript, carregando scripts de forma assíncrona

Adiar a análise de JavaScript é simplesmente diminuir a quantidade de scripts necessária para processar o carregamento da página, reduzindo o tempo de renderização. Enquanto o download de todos os scripts não tiver terminado, o navegador fica impedido de realizar o processo de parser do DOM, então se o seu projeto tiver muitos arquivos JS (Jquery, JqueryUI, AngularJS, ExtJS e etc) o Adiar a análise de JavaScriptbrownser terá que baixar cada um, parsear e executar antes de qualquer outra coisa, fazendo com que o usuário tenha que esperar um tempo maior para ter acesso ao conteúdo.

Às vezes esse tipo de comportamento é desejável, devido a alguma funcionalidade específica do seu sistema, mas na maioria das vezes não é, já que ter que ficar esperando não é nada agradável.

Uma forma bem conhecida por todos (ou pelo menos deveria ser) de minimizar esse problema é colocar todos os JavaScripts no rodapé do site, dessa forma eles serão os últimos a serem baixados e não vão bloquear o carregamento da página. Porém é possível melhorar isso ainda mais fazendo o carregando dos scripts de forma assíncrona e é disso que vamos falar a seguir.

Jeito fácil

Fazer o adiamento da análise de JavaScript pode ser mais fácil do que você imagina, veja:


    <script async defer src="meu-arquivo.js"></script>

  </body>
</html>

Note que existem dois atributos novos na tag script: async e defer.

async informa ao navegador que o download do meu-arquivo.js deve ser feito de forma assíncrona, enquanto acontece o processo de renderização da página. O script será executado só depois que o download dele tiver terminado.

O defer tem a mesma função, porém o script só será executado depois que todo o processo de renderização estiver concluído.

Por quê eu devo usar os dois?  Simples, nem todos os navegadores suportam o async, dessa forma o defer fica como um fallback para os brownsers que não tem suporte para o outro atributo.

O outro jeito

A outra forma de carregar os seus scripts de forma assíncrona é bem mais trabalhosa. Você precisará centralizar todas as suas funções JavaScript que não são usadas pelo documento antes do evento onload em um arquivo JS separado (minhas_funcoes.js). Depois crie uma função no cabeçalho da página que obrigue o arquivo com as demais funções ser carregado após o evento onload (downloadJSAtOnload()). Veja no código abaixo:

<script type="text/javascript">
 /* Adiciona o elemento script como filho do body */
 function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "minhas_funcoes.js";
   document.body.appendChild(element);
 }

 /* Verifica se o navegador tem suporte para os eventos e chama a função */
 if (window.addEventListener)
   window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
   window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
</script>

Tome cuidado com as dependências entre seus arquivos JS ao usar esse método, pode ser necessário algum refatoramento do seu código.

Conclusão

Independente do método utilizado, usar o carregamento assíncrono de scripts é uma excelente  prática de performance, que pode diminuir muito o tempo de carregamento da sua página, te fazer ganhar muitos pontos no PageSpeed e consequentemente com o seu usuário.

javascript

Referências

Defer loading of JavaScript
HTML5 – ASYNC SCRIPTS
Experimente o async & defer

  • Raildo

    Eu sou o Raildo.

  • prns27

    bela dica !!!

  • alan

    serve para opencart ?
    onde eu coloco ?

  • Ed Work

    É. está difícil.

    Tenho um site em wordpress e gostaria de uma simples informação:

    Eu tenho procurado, há dias, informações sobre como:

    Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda

    Porém, todo mundo diz, “tem esse código”, você pode usar esse código”, “você verifica onde está seu javaScript”.

    Mas, o que eu faço com “esse código?”

    Onde eu acho o JavaScript no wordpress?

    Até hoje não encontrei ninguém que diz:

    Vá em “tal pasta”, encontre “tal código”, “substitua por esse”. “coloque tal código em tal lugar”.

    Estou começando a achar que ninguém sabe exatamente:

    Como Eliminar “o maldito” JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda.

    Abraço a todos.

    • Darlei Zillmer

      Ola amigo,
      JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda

      nada mais são do que arquivos JS e css que atrapalham o carregamento inteiro do código html, por isso justamente recebe esse nome bloqueio de renderização. Por se tratar de um site em wordpress existem disponiveis diversos plugins e técnicas que podem ser utilizadas, como por exemplo tornar o carregamento dos Javascripts assincronos, jogar os css para serem carregados no final da pagina deixando somente as folhas de estilo mais importantes para serem carregadas no inicio.
      Espero ter ajudado, e infelizmente não existe uma fórmula mágica para resolver todos problemas que surgem, caso tenha alguma duvida pode entrar em contato darleizillmer@hotmail.com

      Abraço, boa sorte.

  • Rodrigo Carlos

    Olá pessoal,

    Ao utilizar as tags “async” e “defer” no javascript, não haveria mais a necessidade de colocar o js no rodapé da página, ou mesmo assim é bom e melhora ainda mais a renderização?

    Outro coisa… as duas tags tem a tarefa de adiar o carregamento do js. Agora, para adiar o carregamento do css, como é feito?

    E vocês conhecem algum plugin wp, que facilite esse trabalho, e que seja otimizado e leve?

    Agradeço pelo ajuda.