Defer e Async – Carregamento de arquivos JavaScript

Salve galera, hoje quero abordar sobre otimização de websites, vou abordar duas tags do HTML5 que podem diminuir bem o gargalo do tempo de carregamento dos arquivos de JavaScript, da qual já fiz uma introdução em outro tópico, Alto Desempenho com JavaScript da qual sabemos que um dos principais impasses para tratar o carregamento do nosso website é a chamada correta para os arquivos JavaScript, seja um arquivo externo ou mesmo uma chamada interna, sempre devemos nos atentar sobre isto.

Carregamento do Site

Sabemos que os browser embora evoluíram consideravelmente nessa última década, ainda não há um padrão exato de como ele renderiza todos os nossos arquivos e como ele vai se comportar a cada requisição do usuário, quando se trata de eventos com JavaScript ele trabalha em uma “camada” do browser da qual ele pode escrever, modificar, excluir e inserir elementos no website por isso ele impacta tanto no carregamento do site.

Craig Bucker disse – “Para o usuário pode ser indiferente um segundo ou dois de tempo de resposta de uma requisição, não é perceptível do ponto de vista humano esse “leg” pois o conteúdo principal está sendo exibido. Mesmo que essa solução é inadequada para aplicações client-side ou multi-megabyte. Em casos extremos, é necessário carregar bibliotecas de código grandes usando injeções, tag´s script ou técnicas Ajax, isso evitaria o bloqueio, mas requer um código adicional e testes rigorosos para garantir que os scripts são executados na ordem correta em todos os navegadores.”

O atributo defer

O atributo defer garante ao navegador, que em relação aos arquivos JavaScript que serão executados em seu browser não existe nenhuma tag document.write ou DOM que irá ser executado no instante de “load” do seu site, abaixo está um exemplo de como devemos atribuir em nossos script para fazer referencia que iremos utiliza-lo:

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

Quando você utiliza a tag defer os browser entendem que você irá baixar outros arquivos js em paralelo, isso irá fazer com que todos os arquivos do seu site carreguem no mesmo instante.  Isso evitaria o interrompimento do carregamento do seu site por conta de algum arquivo externo javascript , lembrando que não há um estudo minucioso para isso para utilizarmos essa tag para mobile já que sabemos por default que o jQuery é deveras grande para ser carregado e a cada requisição que o usuario fez ele baixa o arquivo novamente tornando seu site lento, por isso devo ressaltar não utilize jQuery para mobile.

Abaixo estou colocando para quais browser o atributo defer funciona:

Browser que aceitam a tag defer

Browser que aceitam a tag defer

O atributo async

O atributo async foi introduzido junto com o HTML5, ele possui o mesmo funcionamento que o defer as mesmas caracteristicas, carregar arquivos paralelamente porem seu funcionamento não é muito prático ele possui uma exceção, ele não garante que os arquivos serão executados em sequências mas eles serão carregados no instante do “onload” dos arquivos.

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

Browser que suportam o async

Browser que suportam o async

De maneira geral para sabermos como fica o carregamentos dos arquivos JavaScript utilizando as tags, defer, async e sem elas.

Defer vs Async vs Normal

Defer vs Async vs Normal

Execução sem as tags:(Normal)

Por default sem o uso dessas tags o browser irá fazer o carregamento dos arquivos js, porém no mento que estiver executando o html ele vai ser interrompido para chamar esses arquivos somente depois de finalizado que ele finaliza a renderização do template para o usuário.

Execução com as tags:(defer)

Resumindo ele vai atrasar a execução do arquivos js até que finalize a renderização por completo do HTML, a parte positiva disto é que mesmo ele tendo esse comportamento ele vai deixar o DOM disponivel.

Execução com as tags:(async)

Se você não se importa quando o seus arquivos scripts estarão disponiveis para o usuario acessar, então utilize essa tag sem
preocupação, ele vai deixar renderizar seu template por completo e depois vai carregar os arquivos js de forma assíncrona.

Referencias:
http://www.sitepoint.com/non-blocking-async-defer/
http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/

Anúncios