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.
Typically chemist’s shop can sale to you with discreet treatments for various soundness problems. There are numerous of safe online pharmacies that will deliver medications to your address. There are divers medicines for each afflictions. Learn more about “viagra manufacturer coupon“. Maybe “viagra discount coupons” is a very complicated matter. Matters, like “coupons for viagra“, are coupled numerous types of soundness problems. If you need to take prescription medications, ask your pharmacist to check your testosterone levels before. Sometimes the treatment options may turn on erectile disfunction remedies or a suction device that helps get an erection. Keep in mind web-site which is ready to sell erectile malfunction drugs like Viagra without a recipe is fraudulent. When you purchase from an unknown web-site, you run the risk of getting counterfeit remedies.
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 🙂
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
Pingback: Linkedin reescrito em YUI com DWR - CMilfont Tech
Pingback: Minificação de Javascript com Ant Task - CMilfont Tech
Agora sem onde ta a ponte do rafael…olhaa aa napa
kkkkkkkkkkkkkkkkk