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.
Posted in High Performance, JavaScript, Melhores práticas, Web Development ~ 3 Comments
OPML Completo.
Texto Completo