O Javascript é uma tecnologia maravilhosa - mas complicada - que enriquece os sites, mas que frequentemente pode ser um obstáculo para sua operação eficiente, com prejuízo  para a experiência do usuário.

Melhorar a experiência do usuário – seja ele um consumidor ou um administrador de sistema – é nossa missão no Monitis. Por quê? Porque foi provado que uma experiência otimizada do usuário final melhora as taxas de conversão, os rankings do Google Search e as taxas de satisfação do visitante da web. O que isso significa? Melhores negócios para você e para sua empresa!

Naturalmente, há muitas formas de melhorar sua vivência na computação, por exemplo checando o desempenho do carregamento de páginas na web. Administradores de websites podem usar o teste de carregamento de página do Monitis ou usar o contínuo navegador para monitoramento de toda a página. O carregamento de páginas é afetado por muitos fatores, incluindo velocidade da internet, locação de hospedagem, desempenho do servidor e do aplicativo, design e otimização do site. Apresentamos abaixo as dicas para desempenho do JavaScript. Novamente, elas podem ajudar webmasters e webdevelopers na criação de websites rápidos e fornecer uma experiência de primeira categoria ao usuário.

Dica #1 – Avalie variáveis locais

(http://blogs.msdn.com/b/ie/archive/2006/08/28/728654.aspx)

Em princípio, específico para IE, porque variáveis locais na maioria das vezes são encontradas baseadas no escopo do mais específico para o menos específico, podendo passar por níveis múltiplos de escopo, e os look-ups podem resultar em queries genéricas. Na definição da função do escopo em uma variável local sem uma declaração var precedente, é importante que cada variável seja antecedida por var, de forma a definir o escopo corrente, para impedir o look-up e acelerar o código.

Dica #2 – Crie códigos de atalho para acelerar a codificação

(http://www.spoonfeddesign.com/4-easy-tips-to-improve-javascript-efficiency)

Para códigos úteis de uso constante, a aceleração do processo de codificação pode ser obtida criando atalhos para códigos mais longos, por exemplo, document.getElementById. Criando atalhos, scripts mais longos não demorarão tanto para codificar, e economizarão tempo no processo como um todo.

Dica #3 – Manipule fragmentos de elementos antes de incorporá-los ao DOM

(http://www.jquery4u.com/dom-modification/improve-javascript-performance)

Antes de colocar elementos no DOM, certifique-se de que todos os ajustes foram feitos para aumentar o desempenho do JavaScript. Isso eliminará a necessidade de deixar de lado as APIs Prepend ou Append jQuery APIs.

Dica #4 – Economize bytes usando Minification

(http://sixrevisions.com/web-development/10-ways-to-improve-your-web-page-performance)

Reduza o tamanho dos arquivos de seus documentos JavaScript removendo caracteres (abas, código-fonte, documentos, espaços etc) sem mudar a funcionalidade do arquivo.

Há algumas ferramentas de Minification que podem ajudar nesse processo, com a possibilidade de reversão. Minification é o processo de remoção de todos os caracteres desnecessários do código-fonte, sem mudar sua funcionalidade.

Dica #5 – Não use loops aninhados se não forem necessários

(http://www.techstrut.com/2009/08/04/10-javascript-performance-tips)

Evite loops indesejáveis, tais como for/while, de forma a manter a linearidade do JavaScript e impedir que se tenha que passar por milhares de objetos. Loops indesejados podem fazer o browser trabalhar mais arduamente para processar os códigos e podem retardar o processo.

Dica #6 – Faça cache de objectos para aumentar o desempenho

 (http://www.techstrut.com/2009/08/04/10-javascript-performance-tips)

Muitas vezes scripts são repetidamente usados para acessar certo objeto. Armazenando um objeto muito acessado em uma variável, e usando uma variável em referências subsequentes a esse objeto, um aumento do desempenho pode ser obtido imediatamente.

Dica #7 – Use um arquivo .js para cache de scripts

(http://www.javascriptkit.com/javatutors/efficientjs.shtml)

O uso desta técnica permite um melhor desempenho, por permitir ao browser carregar o script  uma vez, e somente voltar a chamá-lo do cache caso a página seja recarregada ou revisitada.

Dica #8 – Coloque o JavaScript no final da página

(http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5)

Incluir os scripts o mais próximo possível do final da página irá aumentar a velocidade de renderização e melhorar o paralelismo de download. O resultado é que a página parecerá carregar mais rápido, e em alguns casos pode economizar no total de código necessário.

Dica #9 – Use o jQuery como framework

(http://www.techstrut.com/2009/08/04/10-javascript-performance-tips)

Usado no scripting do HTML, o jQuery é uma facilidade na utilização da biblioteca JavaScript que pode ajudar a aumentar a velocidade de qualquer website. O jQuery  fornece um grande número de plug-ins que podem ser usados rapidamente, mesmo por programadores iniciantes.

Dica #10 – Comprima seus arquivos com GZip

(http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website)

O GZip pode reduzir o arquivo JavaScript consideravelmente, economizando largura de banda e acelerando o tempo de resposta. Os arquivos JavaScript podem ser muito grandes e, sem compressão, podem derrubar qualquer website. Arquivos menores proporcionam uma experiência na web mais rápida e mais satisfatória.

Dica #11 - Não use a palavra-chave “With”

(http://blogs.msdn.com/b/ie/archive/2006/08/28/728654.aspx)

A palavra-chave “With” é considerada uma ovelha negra por ter diversas falhas que podem ser bem frustrantes. Embora simplifique o trabalho com propriedades locais  mais simples, a “With” pode fazer a procura por variáveis em outros escopos mais custosas.

Dica #12 – Minimize solicitações ao HTTP

(http://www.websiteoptimization.com/speed/tweak/http)

Minimize solicitações HTTP para processar páginas, combinando arquivos externos e incluindo o JavaScript diretamente nas páginas XHTML. Cada vez que um único HTTP acessa o servidor, o resultado é um grande número de atrasos.

Dica #13 – Implemente disparo de eventos

(http://www.djavaweb.com/blog/75-speed-up-your-web–develop-smart-event-handlers.html)

Com disparo de eventos, fica mais fácil usar um único handler de eventos para gerenciar um tipo de evento para toda a página. Sem o uso do disparo de eventos, grandes aplicativos da web podem travar por causa de muitos handlers de eventos. Os benefícios do disparo de eventos incluem: menos funcionalidades para gerenciar, menores ligações entre código e DOM e menos memória necessária ao processamento.

Dica #14 – Não use o mesmo script duas vezes

(http://www.abhishekbharadwaj.com/2010/12/speed-up-your-website-avoid-duplicate-scripts)

A duplicação de scripts terá um impacto significativo no desempenho. Criará solicitações desnecessárias ao HTTP, especialmente no browser IE. O uso de uma tag SCRIPT em uma página HTML ajudará a evitar a duplicação acidental de scripts.

Dica #15 – Remova Double Dollar $

(http://www.mellowmorning.com/2008/05/18/javascript-optimization-high-performance-js-apps)

O uso da função “double dollar $” não é necessariamente útil no aumento da velocidade de um website.

Dica #16 – Criando referências variáveis

(http://mondaybynoon.com/2009/04/27/a-couple-of-quick-tips-for-javascript-optimization)

Ao trabalhar com um nó específico repetidamente, o melhor é definir a variável com esse nó em particular, em vez de ficar voltando a ele frequentemente. Essa não é uma melhoria significativa, mas pode vir a ser, quando em grande escala.

Dica #17 – Aumente a velocidade da identificação de objetos

(http://dean.edwards.name/weblog/2005/12/js-tip1)

Um método mais eficiente de usar identificação de objetos é usar um código criado dinamicamente baseado fora da identificação de objetos, em vez de executar a identificação de objetos dentro de uma função.

Dica #18 – Escreva Loops eficazes

(http://robertnyman.com/2008/04/11/javascript-loop-performance)

Dependendo do browser, o método usado para escrever Loops pode ter grande impacto no desempenho de um site. A escrita imprópria de loops pode fazer com que páginas fiquem lentas, com muitas queries e execução de loops em paralelo.

Dica #19 – Diminua cadeias de escopo

(http://homepage.mac.com/rue/JS_Optimization_Techniques)

Escopos globais podem ser lentos, porque sempre que uma função é executada, um escopo de invocação temporário é criado. O JavaScript pesquisa o primeiro item na cadeia de escopo e, se não encontrar a variável, percorre toda a cadeia até encontrar o global object.      

Dica #20 – Acesse índices em NodeLists

(http://homepage.mac.com/rue/JS_Optimization_Techniques)

NodeLists são vivas e podem ocupar um monte de memória, já que são atualizados quando um documento subjacente muda. É mais rápido indexar diretamente em uma lista, se o browser não precisar criar um objeto node list.

Dica #21 – Não use ‘eval’

(http://www.javascripttoolbox.com/bestpractices/#eval)

Embora a função “eval” seja um bom método para executar um código arbitrário, cada string que tenha passado pela função eval tem que ser analisada e executada na hora. Esse encargo tem que ser pago toda vez que a execução chega a um eval evocado.

Dica #22 – Utilize funções inline

(http://portal.acm.org/citation.cfm?id=844097)

A Function Inlining ajuda na eliminação dos custos de uma call, e substitui  uma função call pelo corpo da função chamada. Em JavaScript, a execução de uma function call é uma operação de alto custo por necessitar de diversos passos preparatórios para ser executada: alocar espaço para parâmetros, copiar os parâmetros, e decidir o nome da função.

Dica #23 – Implemente Common Sub-expression Elimination (CSE)

(http://sunilkumarn.wordpress.com/2010/10/19/common-subexpression-elimination-cse)

A CSE (Common sub-expression elimination) é uma técnica de otimização do compilador voltada para o desempenho, que pesquisa expressões idênticas, substituindo-as por uma única variável que retém o valor computado. Você pode esperar que o uso de uma única variável local para uma common sub-expression será sempre mais rápido do que não mudar o código.

Dica #24 – Construa o nó DOM e todos seus sub-nós offline

(http://archive.devwebpro.com/devwebpro-39-0030514OptimizingJavaScriptforExecutionSpeed.html)

Na adição de conteúdo complexo a um site, como tabelas, o desempenho é melhorado adicionando sub-árvores complexas offline.

Dica #25 – Tente não usar variáveis globais

(http://wiki.forum.nokia.com/index.php/JavaScript_Performance_Best_Practices#JavaScript_Performace_Best_Practices)

Uma vez que o mecanismo de script pesquisar o escopo ao referenciar as variáveis globais de dentro de uma função ou de outro escopo, a variável será destruída quando o escopo local for perdido. Se as variáveis no escopo global não puderem persistir enquanto durar o script, o desempenho será melhorado.

Dica #26 – Use operações primitivas em vez de invocar funções

(http://wiki.forum.nokia.com/index.php/JavaScript_Performance_Best_Practices#JavaScript_Performace_Best_Practices)

Maior rapidez pode ser obtida na performance de oops e funções críticas usando primitive functions equivalentes ao invés de function calls.

Dica #27 – Não mantenha referências a outros documentos

(http://dev.opera.com/articles/view/efficient-javascript/?page=4#docreferences)

Não reter referências a outros documentos depois que o script as processou aumenta o desempenho. Isso porque quaisquer referências a objetos desses documentos não devem ser mantidas em suas árvores DOM, e o ambiente do script não será mantido na memória. Dessa forma, o próprio documento não é mais carregado.

Dica #28 – Use XMLHttpRequest

(http://dev.opera.com/articles/view/efficient-javascript/?page=4#docreferences)

O XMLHttpRequest ajuda na redução de conteúdo proveniente do servidor, e evita o impacto no desempenho devido à destruição e à recriação do ambiente do script entre o carregamento de páginas. É importante assegurar-se de que o  XMLHttpRequest é suportado, pois, caso contrário, problemas e confusões podem ocorrer.

Dica #29 – Evite o uso de try-catch-finally

(http://dev.opera.com/articles/view/efficient-javascript/?page=2)

Sempre que o catch é executado e a excessão capturada é atribuida a uma variável, essa variável é adicionada ao escopo atual em tempo de execução. Alguns browsers não lidam eficientemente com esse processo, porque a variável é criada e destruída durante a execução. Evite!

Dica #30 – Não use o for-in indevidamente

(http://dev.opera.com/articles/view/efficient-javascript/?page=2)

Como o loop “for-in” requer que o mecanismo de script construa uma lista de todas as propriedades enumeráveis, codificar dentro do for loop não modifica o array. As iterações calculam o comprimento do array e salvam em uma variável len no escopo do loop.

Continuaremos com nossas séries sobre gestão de desempenho, portanto... fique ligado!

⁂

Texto original disponível em http://blog.monitis.com/index.php/2011/05/15/30-tips-to-improve-javascript-performance/