Como melhorar a performance de eventos que se repetem frequentemente?

Quando lidamos com eventos que se repetem frequentemente, como scroll, resize, keypress ou mousemove, é comum que a aplicação sofra com quedas de performance devido à quantidade de vezes que esses eventos são disparados e manipulados. Se o código do evento realizar operações complexas a cada vez que o evento ocorre, isso pode causar atrasos na interface e uma experiência de usuário insatisfatória.

Existem técnicas que ajudam a otimizar esses eventos e melhorar o desempenho geral da aplicação, como debounce e throttle.

O que é Debounce?

O debounce é uma técnica que limita a quantidade de vezes que uma função é chamada em um determinado intervalo de tempo. Ele aguarda até que o evento pare de ser disparado por um determinado tempo e, então, executa a função. Essa técnica é útil para eventos que são disparados repetidamente, como digitação em um campo de busca.

Exemplo de Debounce:

let timeoutId;
function debounce(func, delay) {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(func, delay);
}

const handleSearch = () => {
  console.log('Buscando...');
};

// Usando debounce no evento de digitação
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', () => {
  debounce(handleSearch, 500);
});

O que o código está fazendo: Neste exemplo, o debounce limita a execução da função handleSearch() ao esperar 500ms após o usuário parar de digitar no campo de pesquisa. Se o usuário continuar digitando, a função será adiada até que a digitação cesse por um tempo.

O que é Throttle?

Throttle é uma técnica que limita a quantidade de vezes que uma função pode ser chamada ao longo do tempo, mas ao contrário do debounce, ele executa a função a uma frequência constante, independentemente de quantos eventos são disparados. Essa técnica é útil para eventos como scroll ou resize, onde a função precisa ser executada periodicamente, mas não a cada milissegundo.

Exemplo de Throttle:

let lastTime = 0;
function throttle(func, limit) {
  const now = new Date().getTime();
  if (now - lastTime >= limit) {
    lastTime = now;
    func();
  }
}

const handleScroll = () => {
  console.log('Rolando a página...');
};

// Usando throttle no evento de scroll
window.addEventListener('scroll', () => {
  throttle(handleScroll, 1000);
});

O que o código está fazendo: Com a técnica throttle, a função handleScroll() será executada a cada 1000ms, independentemente de quantos eventos de scroll forem disparados no intervalo. Isso evita que a função seja chamada milhares de vezes enquanto o usuário está rolando a página.

Quando usar Debounce ou Throttle?

Debounce: Use debounce para eventos que são disparados enquanto o usuário interage, como digitação em um campo de pesquisa ou input de dados. O objetivo do debounce é minimizar a execução da função até que o evento tenha terminado de ocorrer.
Throttle: Use throttle para eventos contínuos, como o scroll ou resize, onde você deseja garantir que a função seja executada a uma frequência constante e não sobrecarregar a aplicação.

Como otimizar a manipulação de DOM?

Além de debounce e throttle, a manipulação do DOM em eventos frequentes também pode ser um fator crítico para a performance. Aqui estão algumas práticas recomendadas:

Minimize as alterações no DOM: Ao manipular o DOM, tente agrupar as mudanças em uma única operação para evitar múltiplos repaints e reflows.
Utilize requestAnimationFrame(): Para animações e manipulação do DOM durante eventos como scroll ou resize, utilize requestAnimationFrame()**, que faz a atualização no momento ideal do ciclo de renderização.

Exemplo de requestAnimationFrame():

function onScroll() {
  window.requestAnimationFrame(() => {
    console.log('Atualizando a tela após o scroll');
  });
}

window.addEventListener('scroll', onScroll);

O que o código está fazendo: O código usa requestAnimationFrame() para garantir que a função de manipulação do scroll seja executada de forma eficiente, sincronizada com o ciclo de renderização do navegador.

Conclusão

Ao lidar com eventos que se repetem frequentemente, como scroll, resize ou keypress, as técnicas de debounce e throttle são fundamentais para melhorar a performance e garantir uma experiência de usuário mais fluida. Além disso, otimizar a manipulação do DOM e usar requestAnimationFrame() para animações podem proporcionar uma performance ainda melhor, garantindo que a aplicação seja responsiva, mesmo em situações de alta carga de eventos.

Melhore a performance de eventos repetitivos com Debounce e Throttle

Melhorar a performance de eventos que se repetem frequentemente é essencial para criar aplicações web rápidas e responsivas. O uso de técnicas como debounce e throttle pode reduzir a sobrecarga causada por eventos como scroll e input. Além disso, otimizar a manipulação de DOM e utilizar requestAnimationFrame() para animações garante que as mudanças no DOM sejam feitas de forma eficiente, evitando repaints e reflows desnecessários.

Algumas aplicações:

Evitar a sobrecarga do navegador ao lidar com eventos de scroll ou resize frequentes.
Melhorar a experiência de usuário com um desempenho mais rápido em interfaces dinâmicas.
Implementar debounce em campos de pesquisa para otimizar chamadas de API.

Dicas para quem está começando

Use debounce quando a função que você está chamando não precisa ser executada imediatamente, como em inputs de pesquisa.
Use throttle quando a função precisa ser executada a uma taxa constante, como ao lidar com eventos de scroll.
Evite alterar o DOM repetidamente em eventos, tente agrupar as alterações para melhorar a performance.

Contribuições de

Ricardo Vasconcellos

Desenvolvedor full stack especialista em PHP, JavaScript, Node.js, Python e SQL.

Mais sobre o autor

Como melhorar a performance de eventos que se repetem frequentemente em JavaScript