Javascript Inline e External

{ February 10th, 2008 }


cmilfont

Autor: cmilfont

Scripts internos (Inline) ao HTML agilizam em grande parte a exibição porque diminuem o número de requisições HTTP.
Imagine que você tenha uma página com scripts separados:

<script … src=”script1.js”></script>
<script … src=”script2.js”></script>
<script … src=”script3.js”></script>

Nesse caso teremos 3 requisições além da página e sofreremos um aumento de até 50% no tempo de renderização. Isso porque apesar do tamanho dos arquivos serem o mesmo se fossem internos, as múltiplas requisições provocam um overhead.

Ao invés dessa abordagem, se os scripts fossem internos, existiria uma única requisição HTTP e o tempo de renderização seria mais rápido.

O problema na abordagem de scripts internos é que não nos beneficiamos do cache.

Combinando os scripts

Uma alternativa é combinar todos os scripts para forçar apenas uma requisição e se beneficiar do cache.

Aliando a minificação do código, você reduz consideravelmente o tamanho do download do script. Observe que frameworks como o Extjs usam essa técnica, existe um arquivo ext-all.js que combina todos os componentes.

Para páginas que combinam um grande número de componentes e sofrem de elevado “Page Views“, é crucial o cache desses elementos em um único arquivo se beneficiando de poucas requisições HTTP e do uso do cache.

O problema nessa abordagem é que existem regiões com elevado “Page Views” que usam poucos componentes e tem que baixar todo o arquivo de uma só vez.

Download sob demanda

O melhor dos dois mundos é usar a estratégia de “Post-Onload Download” para os casos onde não há necessidade de baixar um script externo com todos os componentes. Nesse caso usamos a estratégia de Script tag e baixamos apenas os módulos necessários a determinada região do sistema. O código do sistema será dividido em módulos.

var head = document.getElementsByTagName("head")[0];
var script = document.createElement('script');
script.id = 'ScriptOnDemand';
script.type = 'text/javascript';
script.src = url;
head.appendChild(script);

Lembrando que essa técnica provoca uma aumento não só do esforço no desenvolvimento (porque você terá que administrar as dependências entre os componentes manualmente) como do tempo de manutenção no código (por dividir os scripts em módulos apropriados).

Conclusão

Faça poucas requisições HTTP para uma mesma página. Diminua sempre o número de requisições unindo todos os scripts em um único arquivo.

Caso o arquivo seja grande para uma página, adote a estratégia de subir os arquivos sob demanda.

A recomendação da estratégia adotada vai depender da métrica de cada região do seus sitema e do custo de esforço na administração desse código.

Categories: High Performance, JavaScript, Melhores práticas, Web Development ~ ~ Trackback


Assine os comentários deste artigo.


5 Responses to “Javascript Inline e External”

  1. 1
    Rafael Ponte

    O grande número de requisições é um problema, mas depois de “cacheado” pelo cliente as coisas melhoram :)

    O lance de unir tudo em um único .js me dá calafrios, algo no estilo “global.js”. Já vi sistemas em que só era possível importar arquivos .js no template principal do sistema, ou seja, todas as páginas do sistemas importariam tudo só porque algum gênio não soube pensar. Claro, isso não se aplica a todos os casos, mas se você deixar o sistema nas mãos desses “arquitetos” você só vê bizarrices!

    O lance de carregar scripts em runtime é complicado e chato, IMHO. Eu ainda prefiro importar os scripts de forma tradicional, caso seja notório o overhead então partimos para soluções mais sofisticadas.

    Enfim, concordo com você que a idéia de minificação dos scripts é algo realmente válido e se possível deve-se aplicar nas aplicações -em produção-, mas não podemos esquecer que a minificação da própria página em sim através de um filtro também ajuda consideravelmente :)

  2. 2
    Edu

    Hum…não sabia que poderia prejudicar tanto a performance assim…

    Uma vez eu utilizei uma técnica aqui em casa para um projeto desktop num pentium 100. O pc ficava muito carregado com a quantidade de script baixado de uma vez para a interface, por causa da memória. Então separei os arquivos em módulos, usando ajax para le-los quando quisesse e usando eval eu conseguia usar uma função só para requisitar o arquivo e executá-lo.

    O módulo acabava sendo executado como se fosse uma função, então era apenas arquivos que faziam o que uma função fazia, mas sem estar no corpo da função. Consequentemente eu tinha que “dessetar” as variáveis que sempre eram globais.

    Pro meu espanto a performance melhorou muito. Mas admito que não saberia dizer as consequências graves de fazer isso…

    Abraço

  3. 3
    Linkedin reescrito em YUI com DWR - CMilfont Tech

    […] página eu notei que foi usado o DWR e forte abordagem ajax.  Contei 25 scripts, bem que poderiam unificar alguns deles já que aparentemente estão bem […]

  4. 4
    Minificação de Javascript com Ant Task - CMilfont Tech

    […] um post passado eu falei da importância de unir e minificar arquivos js em determinados casos e discuti […]

  5. 5
    Ronaaaldo

    Agora sem onde ta a ponte do rafael…olhaa aa napa
    kkkkkkkkkkkkkkkkk

Leave a Reply