High Performance JavaScript

1. Carregue JavaScript de forma eficiente para reduzir requisições HTTP e melhorar a velocidade da página

Diminua o número de requisições HTTP necessárias para renderizar a página.

Combine e posicione os scripts. Una vários arquivos JavaScript em um único arquivo para minimizar as requisições HTTP. Coloque as tags de script no final do corpo do HTML para permitir que a página carregue visualmente antes da execução dos scripts. Utilize técnicas de carregamento assíncrono, como inserção dinâmica de scripts ou o atributo defer, sempre que possível.

Minifique e comprima. Use ferramentas como o YUI Compressor para eliminar caracteres e espaços desnecessários dos arquivos JavaScript. Ative a compressão gzip no servidor web para reduzir ainda mais o tamanho dos arquivos. Considere usar uma Rede de Distribuição de Conteúdo (CDN) para servir os recursos estáticos, incluindo arquivos JavaScript, a partir de servidores geograficamente distribuídos, garantindo entrega mais rápida.

Implemente estratégias de cache. Defina cabeçalhos de cache apropriados para os arquivos JavaScript, permitindo que os navegadores os armazenem localmente. Utilize versionamento ou timestamps nos nomes dos arquivos para forçar atualizações quando necessário. Para dispositivos móveis com capacidades limitadas de cache, avalie o uso do cache de aplicação HTML5 ou mecanismos de armazenamento no lado do cliente.

2. Otimize o acesso a dados e o gerenciamento de escopo para uma execução mais rápida

Variáveis locais são sempre as mais rápidas para acessar dentro de uma função, enquanto variáveis globais tendem a ser as mais lentas.

Minimize a travessia da cadeia de escopo. Armazene variáveis frequentemente acessadas que estão fora do escopo em variáveis locais. Evite usar a instrução with e a função eval(), pois podem estender a cadeia de escopo e desacelerar a execução. Use closures com moderação, pois mantêm referências ao escopo externo e podem impactar o uso de memória.

Otimize o acesso a objetos e arrays. Utilize a notação de ponto em vez da notação de colchetes ao acessar propriedades de objetos com identificadores conhecidos e válidos. Armazene o comprimento dos arrays em loops for para evitar buscas repetidas da propriedade. Considere usar objetos ou arrays simples em vez de estruturas de dados mais complexas quando o armazenamento simples de chave-valor for suficiente.

Aproveite a notação literal. Use literais de objeto e array em vez de seus construtores (por exemplo, {} em vez de new Object()). Isso não só melhora a legibilidade, como também pode ser mais rápido em muitos motores JavaScript.

3. Minimize a manipulação do DOM para melhorar o desempenho

O acesso e a manipulação do DOM são partes importantes das aplicações web modernas. Mas toda vez que você cruza a ponte do ECMAScript para o mundo do DOM, isso tem um custo.

Agrupe operações no DOM. Reduza a manipulação direta do DOM fazendo alterações em um fragmento de documento ou nó clonado antes de atualizar o DOM ativo. Isso diminui o número de reflows e repaints, que são computacionalmente caros.

Use seletores eficientes. Aproveite métodos nativos do DOM como getElementById() e querySelector() em vez de métodos mais genéricos. Ao usar bibliotecas, certifique-se de que elas utilizem esses métodos nativos mais rápidos quando disponíveis. Armazene em cache referências do DOM para elementos acessados com frequência.

Otimize o tratamento de eventos. Implemente delegação de eventos anexando ouvintes a elementos pai em vez de elementos filhos individuais. Isso reduz o número de ouvintes e melhora o desempenho, especialmente para elementos adicionados dinamicamente.

4. Implemente algoritmos eficientes e técnicas de controle de fluxo

Na verdade, existem apenas dois fatores: trabalho feito por iteração e número de iterações.

Otimize loops. Minimize o trabalho realizado em cada iteração movendo código invariante para fora do loop. Use loops while reversos quando possível, pois costumam ser mais rápidos que loops for. Considere usar métodos de array como forEach(), map() e reduce() para iterações mais limpas e potencialmente mais rápidas.

Escolha condicionais apropriadas. Use instruções switch em vez de longas cadeias if-else ao lidar com múltiplos valores discretos. Para condições complexas, avalie o uso de tabelas de consulta ou bitmasks para avaliação mais rápida.

Implemente memoização. Armazene em cache os resultados de chamadas de função custosas para evitar cálculos redundantes. Isso é especialmente útil para funções recursivas ou operações chamadas frequentemente com os mesmos parâmetros.

5. Escolha o formato de dados correto para desempenho ideal em Ajax

JSON possui várias vantagens em comparação ao XML. É um formato muito menor, com menos da resposta total sendo usada como estrutura e mais como dados.

Prefira JSON em vez de XML. JSON é mais compacto e mais rápido para analisar do que XML. Sempre que possível, use JSON-P (JSON com padding) para análise ainda mais rápida, especialmente ao lidar com grandes conjuntos de dados. Para conjuntos de dados extremamente grandes, considere usar formatos delimitados personalizados para minimizar overhead.

Otimize a transmissão de dados. Use requisições GET para operações idempotentes e POST para cargas maiores. Implemente estratégias de cache adequadas para respostas Ajax para reduzir requisições de rede desnecessárias. Considere técnicas como multipart XHR para agrupar múltiplos recursos em uma única requisição.

Trate os dados de forma eficiente. Analise respostas JSON usando métodos nativos como JSON.parse() quando disponíveis. Implemente renderização progressiva para grandes conjuntos de dados, melhorando a percepção de desempenho. Use web workers para tarefas demoradas de análise ou processamento, mantendo a interface responsiva.

6. Crie interfaces responsivas gerenciando a thread da interface do navegador

Nenhuma tarefa JavaScript deve levar mais de 100 milissegundos para ser executada.

Divida tarefas longas. Use setTimeout() ou setInterval() para dividir operações extensas em partes menores, permitindo que a interface permaneça responsiva. Considere usar Web Workers para tarefas intensivas de CPU que não requerem acesso ao DOM.

Otimize os manipuladores de eventos. Aplique debounce ou throttle em manipuladores de eventos frequentes, como scroll ou redimensionamento, para reduzir o número de chamadas de função. Garanta que os manipuladores terminem rapidamente, especialmente em interações do usuário.

Gerencie animações eficientemente. Use requestAnimationFrame() para animações mais suaves, sincronizadas com o ciclo de renderização do navegador. Minimize o número de elementos animados e utilize transições ou animações CSS sempre que possível para melhor desempenho.

7. Aproveite processos de build e deploy para impulsionar o desempenho do JavaScript

Tudo que pode ser feito em tempo de build não deve ser feito em tempo de execução.

Automatize otimizações. Implemente um processo de build usando ferramentas como Grunt, Gulp ou Webpack para automatizar tarefas como concatenação, minificação e compressão de arquivos JavaScript. Use source maps para manter a capacidade de depuração do código minificado.

Implemente divisão de código. Divida sua aplicação em pedaços menores que podem ser carregados sob demanda, reduzindo a carga inicial e melhorando o tempo de inicialização. Use técnicas como lazy loading para recursos não críticos.

Otimize para produção. Remova códigos exclusivos de desenvolvimento, como logs e declarações de depuração, nas builds de produção. Implemente detecção de recursos em vez de detecção de navegador para criar códigos mais manuteníveis e performáticos em diferentes ambientes.

8. Utilize ferramentas de profiling para identificar e resolver gargalos de desempenho

Ter o software adequado é essencial para identificar gargalos tanto no carregamento quanto na execução dos scripts.

Aproveite as ferramentas de desenvolvimento dos navegadores. Use os perfis embutidos em navegadores como Chrome DevTools, Firefox Developer Tools e Safari Web Inspector para analisar o tempo de execução do JavaScript e identificar funções lentas. Utilize os painéis de rede para otimizar o carregamento de recursos e identificar gargalos na entrega de ativos.

Implemente medições personalizadas. Use a Performance API (window.performance) ou funções de temporização customizadas para medir operações específicas no seu código. Isso permite um acompanhamento e otimização de desempenho mais detalhados.

Monitore o desempenho no mundo real. Implemente Real User Monitoring (RUM) para coletar dados de desempenho de usuários reais. Isso oferece insights sobre como sua aplicação se comporta em diferentes dispositivos e condições de rede, ajudando a priorizar esforços de otimização.