Otimizando o carregamento de javascript com ControlJS
Autor: Pedro Ribeiro | Publicado: 2012-08-07T18:20:00-07:00

Olá pessoal.

Hoje irei demonstrar como otimizar o carregamento de suas páginas com a biblioteca ControlJS.

Primeiramente vamos entender qual problema iremos solucionar com esta implementação.

No dia-a-dia de um desenvolvedor encontramos diversas situações indesejadas em que não podemos mudar o código que para nós não é o ideal, pois na maioria das vezes já é um legado, ou já foi codificado desta forma por alguma razão, que normalmente não conhecemos.

Um desses casos, são os códigos em Javascript.

O Javascript pode ser incorporado em páginas HTML de duas formas, uma é via arquivos .js, e outra com scripts no corpo do documento.

Estas duas formas são renderizadas pelo navegador normalmente, mas com um problema. Quando o download e a renderização do HTML se inicia, ela é interrompida sempre ao encontrar um bloco javascript, seja ele qual for. Isso diminui a perfomance do carregamento da página, pois mais nada é realizado até que o Javascript sejá totalmente executado.

Algumas boas práticas para reduzir este encomôdo são:

- Colocar as inclusões de Javascript no final do documento, porém antes do fechamento da tag &lt;/body&gt;. Desta forma todo o documento é renderizado sem interrupções e no final o Javascript é executado;

- Minificar os arquivos .js;

- Utilizar o GZip no servidor de aplicação, para comprimir os arquivos;

Mas mesmo assim em alguns casos bem específicos, é necessário que exista scripts no meio do documento, para estes casos uma boa solução é o carregamento asíncrono de Javascript. Com o carregamento asíncrono(paralelo) de Javascript, a página fica liberada para ser renderizada sem haver o bloqueio natural do carregamento da página.

Para o carregamento asíncrono uma ótima biblioteca é o ControlJS, e segue como utilizá-la:

Primeiramente baixe a biblioteca aqui, apenas o arquivo control.js é necessário.

No início do seu documento HTML coloque o seguinte código:





&lt;script&nbsp;type="text/javascript"&gt;


var cjsscript = document.createElement('script');


cjsscript.src = "control.js";


var cjssib = document.getElementsByTagName('script')[0];


cjssib.parentNode.insertBefore(cjsscript, cjssib);


&lt;/script&gt;





Para os seu blocos de script no corpo(inline) do HTML altere o atributo 'type' para "text/cjs" assim:





&lt;script&nbsp;type="text/cjs"&gt;


//meu código Javascript;


&lt;/script&gt;





Para inclusões de arquivos .js esta implementação deve ser assim:


&nbsp; &nbsp; &nbsp; &nbsp;&lt;script&nbsp;type="text/cjs"&nbsp;data-cjssrc="arquivo.js"&gt;&lt;/script&gt;


Uma breve explicação....

Quando alteramos o type de blocos javascript para type="text/cjs", o renderizador não entende este e não faz nada com ele, isso possibilita ao ControlJS capturar estes códigos e executá-los em paralelo.


**** Importante ****

Nos carregamentos asíncronos temos que nos atentar com dependências, pois isso pode ser um problema. A biblioteca irá levar em consideração a ordem das inclusões, mesmo sendo um carregamento paralelo o ControlJS mantém a ordem de carregamento.




Com isto podemos diminuir o tempo de carregamento de nossas páginas. Algumas outras práticas podem ser utilizadas para CSS e elementos do DOM, mas isso é assunto para outro post.

Valeu pessoal e agradeço se comentarem sobre o assunto, pois esse é um problema para grandes aplicações e provavelmente há muitas outras soluções.