JavaScript desempenha um papel central no desenvolvimento web moderno, potencializando formulários interativos, interfaces dinâmicas, atualizações em tempo real e aplicativos web complexos. No entanto, quando os scripts realizam cálculos desnecessários, manipulam o DOM de forma ineficiente ou carregam mais código do que uma página exige, eles podem afetar negativamente a capacidade de resposta e a experiência do usuário.
Otimizar o JavaScript não envolve simplesmente reduzir o tamanho do arquivo ou escrever menos linhas de código. Envolve identificar gargalos de desempenho, compreender o comportamento do navegador e aplicar melhorias onde elas fornecem benefícios mensuráveis.
Este guia explora técnicas práticas de otimização de JavaScript que os desenvolvedores podem usar para criar aplicativos da Web mais responsivos e fáceis de manter.
1. Avalie o desempenho antes de alterar o código
Um dos erros de otimização mais comuns é reescrever o código com base em suposições e não em evidências. Uma função que parece complicada pode não ser responsável por uma lentidão perceptível, enquanto uma operação aparentemente simples pode ser executada centenas de vezes.
Comece usando ferramentas de desenvolvedor de navegador para identificar o problema real.
O Chrome DevTools fornece um painel Desempenho para registrar atividades de tempo de execução, examinar tarefas longas e investigar atrasos na renderização. O painel Rede pode ajudar a identificar scripts grandes, solicitações desnecessárias e recursos que atrasam o carregamento da página.
Por exemplo, considere esta função:
function calculateTotal(items) {
let total = 0;
for (const item of items) {
total += item.price * item.quantity;
}
return total;
}
Para um carrinho de compras comum, é improvável que esse cálculo seja um grande problema de desempenho. Otimizá-lo prematuramente pode produzir poucos benefícios práticos.
Por outro lado, a execução repetida de cálculos caros durante a rolagem ou a renderização pode criar atrasos perceptíveis.
O princípio é simples: primeiro meça, identifique o gargalo e depois otimize o código relevante.
2. Evite atualizações desnecessárias do DOM
A atualização do Document Object Model (DOM) permite que o JavaScript altere o conteúdo e a aparência da página. No entanto, ler e escrever repetidamente propriedades relacionadas ao layout pode, às vezes, forçar o navegador a recalcular o layout.
Considere este exemplo:
const cards = document.querySelectorAll(".card");
cards.forEach((card) => {
card.style.width = "200px";
console.log(card.offsetWidth);
});
O código alterna entre modificar estilos e ler uma propriedade dependente de layout. Dependendo da página ao redor e do trabalho pendente do navegador, esse padrão pode acionar repetidos cálculos de layout síncronos.
Uma abordagem melhor é separar as alterações de estilo das leituras de layout quando o aplicativo permitir:
const cards = document.querySelectorAll(".card");
cards.forEach((card) => {
card.style.width = "200px";
});
const widths = Array.from(cards, (card) => card.offsetWidth);
console.log(widths);
Isso reduz a intercalação desnecessária de gravações e leituras. Não garante uma melhoria específica de velocidade em todas as situações, por isso o perfil continua a ser importante.
Para interfaces maiores, as classes CSS também podem facilitar o gerenciamento das atualizações:
document.querySelector("#notification")
.classList.add("notification--visible");
.notification--visible {
display: block;
}
Isso mantém as regras de apresentação em CSS e reduz a necessidade de manipular vários estilos embutidos.
3. Debounce e aceleração de eventos frequentes
Alguns eventos do navegador são acionados rapidamente. Um ouvinte de rolagem pode ser executado muitas vezes durante um único gesto de rolagem, enquanto uma entrada de pesquisa pode acionar um novo evento após cada pressionamento de tecla.
Se um manipulador de eventos realizar um trabalho caro, essas chamadas repetidas poderão afetar a capacidade de resposta.
A depuração espera até que os eventos parem de chegar por um período especificado antes de executar a operação.
function debounce(callback, delay = 300) {
let timeoutId;
return (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
callback(...args);
}, delay);
};
}
const searchInput = document.querySelector("#search");
searchInput.addEventListener(
"input",
debounce((event) => {
console.log("Search for:", event.target.value);
}, 300)
);
Em uma interface de pesquisa real, o retorno de chamada poderia solicitar resultados correspondentes após o usuário pausar a digitação.
A limitação tem um propósito diferente. Limita a frequência com que uma função é executada durante uma atividade contínua. Pode ser útil para tarefas como atualizar um indicador visual durante a rolagem.
Nenhuma das técnicas deve ser aplicada automaticamente a todos os eventos. Por exemplo, eliminar a validação do formulário pode atrasar feedback útil, enquanto limitar uma interação crítica pode fazer com que a interface pareça menos responsiva.
Escolha a técnica de acordo com o comportamento que os usuários necessitam.
4. Carregue o JavaScript somente quando for necessário
Grandes pacotes de JavaScript podem aumentar os custos de download, análise, compilação e execução. Carregar todos os recursos imediatamente geralmente é desnecessário, especialmente quando alguns componentes aparecem muito abaixo da janela de visualização inicial ou são usados apenas em páginas específicas.
As importações dinâmicas permitem que os módulos sejam carregados quando necessário:
const button = document.querySelector("#open-chart");
button.addEventListener("click", async () => {
const { renderChart } = await import("./chart.js");
renderChart();
});
Neste exemplo, o módulo gráfico é solicitado quando o usuário ativa o botão, em vez de ser importado avidamente pelo módulo circundante.
Essa técnica é útil para painéis opcionais, editores avançados, gráficos e outros recursos que não são essenciais para a página inicial.
Os desenvolvedores também devem considerar a divisão de código baseada em rota ao usar uma estrutura ou empacotador. Uma página não deve precisar baixar códigos substanciais para recursos não relacionados.
No entanto, o carregamento lento nem sempre é benéfico. Se um recurso for imediatamente visível e essencial, atrasar seu código pode introduzir latência de interação desnecessária. As melhorias de desempenho dependem dos padrões de uso e da estratégia de carregamento do aplicativo.
5. Use estruturas de dados e algoritmos eficientes
O custo das operações JavaScript torna-se mais significativo à medida que os conjuntos de dados crescem. A escolha de um algoritmo ou estrutura de dados apropriado pode muitas vezes produzir uma melhoria maior do que pequenas alterações de sintaxe.
Suponha que um aplicativo precise determinar quais usuários têm permissão para acessar um recurso.
Uma pesquisa repetida de array pode ser assim:
const allowedUsers = ("u101", "u205", "u309");
function canAccess(userId) {
return allowedUsers.includes(userId);
}
Para uma lista pequena, esta implementação é perfeitamente razoável. Se o aplicativo verificar repetidamente a associação em uma coleção muito maior, um Set pode ser mais adequado:
const allowedUsers = new Set((
"u101",
"u205",
"u309"
));
function canAccess(userId) {
return allowedUsers.has(userId);
}
Geralmente, espera-se que as verificações de associação de conjuntos sejam, em média, mais rápidas do que a verificação de uma matriz à medida que a coleção cresce, embora o desempenho real dependa do tempo de execução e da carga de trabalho.
O mesmo princípio se aplica à classificação, filtragem e pesquisa. Os desenvolvedores devem avaliar o tamanho de seus conjuntos de dados e selecionar estruturas de dados adequadas ao problema, em vez de otimizar o código com base apenas em sua aparência.
6. Mantenha tarefas longas longe do tópico principal
O JavaScript executado no thread principal do navegador pode competir com o tratamento de entrada, renderização e outros trabalhos necessários para manter uma página responsiva.
Um cálculo demorado pode impedir que o navegador responda prontamente às ações do usuário.
Para tarefas computacionalmente intensivas, os Web Workers podem mover o trabalho adequado para um thread separado.
Código do thread principal:
const worker = new Worker(
"./calculation-worker.js"
);
worker.addEventListener("message", (event) => {
console.log("Calculation result:", event.data);
});
worker.postMessage({
values: (10, 20, 30, 40)
});
Código do trabalhador em calculation-worker.js:
self.addEventListener("message", (event) => {
const total = event.data.values.reduce(
(sum, value) => sum + value,
0
);
self.postMessage(total);
});
Este exemplo demonstra o padrão de comunicação em vez de uma carga de trabalho que necessariamente precisa de um trabalhador. Somar quatro números é barato; os trabalhadores tornam-se úteis quando os cálculos são substanciais o suficiente para justificar a sobrecarga de comunicação e configuração.
Eles são particularmente relevantes para processamento de dados, manipulação de imagens e outras operações com uso intensivo de CPU. Como os trabalhadores não acessam diretamente o DOM da página, o thread principal deve lidar com quaisquer atualizações de interface necessárias.
7. Armazene resultados caros em cache com cuidado
Quando um cálculo recebe repetidamente as mesmas entradas, o armazenamento em cache pode evitar trabalho redundante.
const cache = new Map();
function calculateDiscountedPrice(price, discount) {
const key = `${price}:${discount}`;
if (cache.has(key)) {
return cache.get(key);
}
const result = price * (1 - discount);
cache.set(key, result);
return result;
}
Para chamadas repetidas com entradas idênticas, a função pode reutilizar um valor calculado anteriormente.
Esse padrão é útil apenas quando o cálculo é suficientemente caro ou repetido com freqüência suficiente para justificar o cache. Neste exemplo, a aritmética é trivial, portanto o armazenamento em cache pode custar mais do que simplesmente calcular o resultado.
Os aplicativos reais também devem considerar o consumo de memória, a invalidação do cache e se as entradas representam totalmente os dados usados pelo cálculo. Caches ilimitados podem se tornar um problema de desempenho.
8. Verifique as melhorias com medições reais
Depois de fazer alterações, os desenvolvedores devem repetir as medições de desempenho originais em condições comparáveis.
Ferramentas úteis incluem:
-
Desempenho do Chrome DevTools: Investigue a execução de JavaScript, tarefas longas, layout e renderização.
-
Farol: Audite o desempenho da página e identifique oportunidades de melhoria.
-
Informações do PageSpeed: Examine os dados de campo quando disponíveis e revise os diagnósticos de laboratório.
-
O painel Rede do navegador: Inspecione os tamanhos dos recursos, o comportamento de carregamento e o tempo de solicitação.
Para desempenho voltado ao usuário, métricas como Largest Contentful Paint (LCP), Interaction to Next Paint (INP) e Cumulative Layout Shift (CLS) ajudam a avaliar diferentes aspectos da experiência. A otimização do JavaScript pode afetar essas métricas, mas nenhuma delas mede a velocidade de execução do JavaScript sozinha.
Os desenvolvedores também devem testar dispositivos representativos e condições de rede. Uma mudança que parece insignificante em um computador de desenvolvimento poderoso pode ser importante em um dispositivo móvel de menor potência.
Conclusão
Eficaz Desempenho de JavaScript a otimização começa com a compreensão de como um aplicativo se comporta em condições reais. Medir gargalos, reduzir trabalho desnecessário no DOM, controlar eventos frequentes, carregar módulos opcionais sob demanda e escolher algoritmos apropriados podem contribuir para interfaces mais responsivas.
A consideração mais importante não é se o código parece mais curto ou mais sofisticado. É se a mudança melhora a experiência sem tornar a aplicação desnecessariamente complexa.
Ao criar perfis antes de otimizar e validar cada mudança significativa, os desenvolvedores podem criar aplicativos da Web que permanecem responsivos, fáceis de manter e eficientes à medida que seus recursos e demandas dos usuários aumentam.
