É 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!