Entendendo Interações por Toque e Impacto na Performance

Entendendo Interações por Toque e Impacto na Performance

Quando você toca na tela do seu celular, muita coisa acontece nos bastidores. Vamos entender como essas interações funcionam e por que elas afetam a velocidade e a responsividade do seu aplicativo.

O que é um Evento de Toque?

Imagine que sua tela é como um vigilante muito atento. Toda vez que você toca nela, o vigilante precisa:

1. Detectar que algo tocou a tela
2. Identificar onde foi o toque
3. Avisar o aplicativo sobre isso
4. Esperar o aplicativo responder

Esse processo é chamado de evento de toque. Em aplicativos móveis, existem três tipos principais de eventos:

• touchstart: quando seu dedo toca a tela
• touchmove: quando você arrasta o dedo
• touchend: quando você levanta o dedo

O Problema do Atraso de Toque (Tap Delay)

Nos primórdios dos navegadores móveis, havia um atraso de 300 milissegundos entre você tocar a tela e o aplicativo responder. Por quê? Os navegadores esperavam para ver se você ia fazer um "duplo toque" (double tap) para ampliar a página.

Pense nisso como um garçom que espera 300ms antes de levar seu pedido, só para ter certeza de que você não vai chamar novamente. Isso é frustrante!

Felizmente, os navegadores modernos eliminaram esse atraso, mas você ainda precisa otimizar seu código para evitar criar novos atrasos.

Reconhecimento de Gestos

Gestos são padrões de toque mais complexos. Alguns exemplos:

• Tap: um toque rápido
• Swipe: arrastar o dedo rapidamente
• Pinch: aproximar dois dedos para ampliar
• Long press: manter o dedo pressionado

Reconhecer esses gestos requer que seu aplicativo processe múltiplos eventos de toque e calcule a velocidade, direção e distância. Isso consome poder de processamento!

Como os Eventos de Toque Afetam a Performance

Cada evento de toque dispara código que você escreveu. Se esse código for lento, o aplicativo fica travado. Veja este exemplo:

// ❌ RUIM: Processamento pesado no evento de toque
document.addEventListener('touchmove', function(event) {
  // Recalcular toda a página a cada movimento
  for (let i = 0; i < 10000; i++) {
    complexCalculation();
  }
  updateUI();
});

O problema: touchmove dispara dezenas de vezes por segundo! Se cada disparo faz 10.000 cálculos, você está fazendo centenas de milhares de operações por segundo. Seu aplicativo vai ficar muito lento.

A Solução: Throttling e Debouncing

Throttling significa "limitar a frequência". Em vez de processar cada evento, você processa apenas alguns deles:

// ✅ BOM: Limitar quantas vezes processamos
let lastProcessTime = 0;
const THROTTLE_DELAY = 16; // ~60fps

document.addEventListener('touchmove', function(event) {
  const now = Date.now();
  if (now - lastProcessTime > THROTTLE_DELAY) {
    complexCalculation();
    updateUI();
    lastProcessTime = now;
  }
});

Agora, em vez de processar 60 vezes por segundo, você processa apenas uma vez a cada 16 milissegundos (aproximadamente 60 vezes por segundo, mas de forma controlada).

Passive Event Listeners

Há outro truque importante. Quando você adiciona um event listener, o navegador assume que você pode chamar preventDefault() para bloquear o comportamento padrão. Isso força o navegador a esperar seu código terminar antes de fazer scroll ou zoom.

Se você NÃO vai chamar preventDefault(), diga ao navegador:

// ✅ BOM: Dizer ao navegador que não vamos bloquear
document.addEventListener('touchmove', handleTouchMove, { passive: true });

Isso permite que o navegador faça scroll enquanto seu código roda em paralelo, tornando tudo mais responsivo.

Resumo das Melhores Práticas

• Use throttling para eventos que disparam frequentemente
• Adicione { passive: true } quando não precisar bloquear comportamentos padrão
• Evite cálculos pesados dentro de event listeners
• Teste em dispositivos reais, não apenas no computador