Seções iMasters
Desenvolvimento + JavaScript

Carregador de JavaScript

É uma recomendação, devemos fazer as chamadas de Javascript no final de nossa página e não no head, pois assim ganhamos desempenho em nossas aplicações web.

Muitos desenvolvedores constroem sites colocando seus scripts no head da página e, em alguns casos, são muitos scripts para serem carregados. Com isso, a página só começa a ser exibida após o carregamento completo desses scripts, e isso torna a página lenta.

Vejamos um exemplo do site da apple.com, que tem em seu cabeçalho os seguintes scripts:

<script src= "http://images.apple.com/global/scripts/lib/prototype.js"> <script> /
<script src= "http://images.apple.com/global/scripts/lib/scriptaculous.js"> <script> /
<script src= "http://images.apple.com/global/scripts/browserdetect.js"> <script> /
<script src= "http://images.apple.com/global/scripts/apple_core.js"> <script> /
<script src= "http://images.apple.com/global/scripts/search_decorator.js"> <script> /
<script src= "http://images.apple.com/global/scripts/promomanager.js"> <script> /
<script src= "http://images.apple.com/home/scripts/ticker.js"> <script> /
<script src= "http://images.apple.com/home/scripts/promotracker.js"> <script> /

Os scripts serão carregados em sequência. [screenshot do Firefox 3.0.]

Caso um desses arquivos falhe… o site com certeza vai travar! E isso é muito ruim para o desempenho do site. Para contornarmos essa situação, podemos usar um único javascript, que se encarregará de chamar todos esses scripts sem travar o carregamento da página.

Há algum tempo venho testando os carregadores Js, e percebi que com eles podemos colocar apenas uma chamada Js no Head, e dentro desse arquivo chamaremos os demais scripts que precisarmos.

Existem diferentes tipo de carregadores Javascript. Gostaria de mostrar como usar o headjs, um script que pode fazer isso muito bem.

HeadJs

  • http://headjs.com/

Este script permite o carregamento de múltiplos scripts simultaneamente, sem o travamento da página. Seu carregamento é simultâneo, mas a execução do script acontece na mesma ordem em que foram inseridos.

Como usar:

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js});

// the most simple case. load and execute single script without blocking.

head.js("/path/to/file.js");

// load a script and execute a function after it has been loaded

head.js("/path/to/file.js", function() {

});

// load files in parallel but execute them in sequence

head.js("file1.js", "file2.js", ... "fileN.js");

// execute function after all scripts have been loaded

head.js("file1.js", "file2.js", function() {

});

// files are loaded in parallel and executed in order they arrive

head.js("file1.js");
head.js("file2.js");
head.js("file3.js");

// the previous can also be written as

head.js("file1.js").js("file1.js").js("file3.js");

Com o head js carregado na página, podemos ter alguma features incluídas :

  • Suporte a HTML 5
<style>
article { text-shadow:0 0 1px #ccc; }
</style>

<!-- works in IE too -->

<article>
<header></header>
<section></section>
<footer></footer>

</article>
  • Detectar resolução de Browser
/* styling for screens with resolution less than 1024 pixels */

.lt-1024 #hero { background-image:(medium.jpg); }

/* styling for small mobile screens */

.lt-640 #hero { background-image:(small.jpg); }
  • Detectar CSS3
.borderimage .box {

/* style for browsers that support border images */

}

.no-borderimage .box {

/* style for browsers that does not support border images */

}

Os testes de desempenho podem ser vistos clicando aqui. Perceba que realmente o site é carregado muito mais rápido.

Testem e comprovem. Até a próxima!

Mensagem do anunciante:

Torne-se um Parceiro de Software Intel®. Filie-se ao Intel® Developer Zone. Intel®Developer Zone

Mateus Bernardo

é graduado em Tecnologia em Processamento de Dados. Desde 2007 trabalha com desenvolvimento de websites e atualmente é programador de interfaces no Portal R7.com. É evangelista Jquery @jquerybrasil, é especializado nas tecnologias front-end e segue os padrões web no desenvolvimento de interfaces web. Já trabalhou com desenvolvimento de grandes projetos de Internet Banking,CMS,Home-broker, páginas Wap e Portais de Conteúdo Mobile.

Email

Leia os últimos artigos publicados por Mateus Bernardo

Comente também

2 Comentários

Lucas

Gostei das dicas. Ótimo tutorial. Mostrou e provou.

Parabéns Mateus

Yan

Olá Mateus. Achei interessante o método do HeadJs, ou seja, carregar todos os scripts só depois da página ser renderizada no navegador.

Tenho um blog hospedado no blogger (xml) http://www.yanklovinsk.com.br e não entendi (devido a conhecimento insuficiente sobre o tema) como faço a chamada (requisição) no HTML.

Como implementar (os procedimentos)?

Agradeço a atenção

Qual a sua opinião?