Por Que Jogos de Navegador Parecem Travados (e Como Resolver)

O clique do seu mouse chega a um jogo nativo em poucos milissegundos. Num jogo de navegador, esse mesmo clique faz fila atrás do sistema operacional, de um motor JavaScript e de um compositor antes de virar um pixel. Veja onde os navegadores adicionam atraso, como medir a sua parcela dele e as correções que realmente mudam o número.

A cadeia de input, do botão ao pixel

Todo clique que você faz percorre uma linha de montagem. Cada estágio adiciona seu próprio atraso, e o navegador está no meio dela:

Some tudo e um jogo de navegador num setup de 60Hz pode ficar com 40-60ms de atraso do clique ao fóton antes de a lógica do jogo fazer qualquer coisa. Um jogo nativo com raw input pula vários desses estágios por completo. Essa diferença é exatamente por que o mesmo mouse pode parecer preciso na área de trabalho e mole numa aba do navegador.

O imposto da tela: 16,7ms antes de você ver qualquer coisa

Aqui está o fato que vale contar nas LAN houses: a 60Hz, a tela sozinha pode adicionar até 16,7ms de atraso — um quadro inteiro — antes de seu clique virar algo visível. Esse único estágio custa mais do que o pipeline inteiro de um mouse gamer: um bom botão óptico dispara em cerca de 1ms e um polling de 1000Hz adiciona mais 1ms.

As pessoas gastam alegremente R$ 800 para economizar 2ms num mouse enquanto deixam 16,7ms na mesa nas configurações do monitor. Suba para 144Hz e o imposto do quadro cai para 6,9ms; a 240Hz, são 4,2ms. Se seu monitor é capaz, mas está mal configurado — uma situação deprimentemente comum — nosso guia para verificar sua taxa de atualização real leva dois minutos.

Nada disso significa que o mouse não importa. Significa que latência é um orçamento gasto na cadeia inteira, e as maiores linhas desse orçamento raramente são as que têm o melhor marketing.

Medindo a parcela do navegador no atraso

Você não conserta o que não consegue isolar. Nosso teste de latência de input do navegador mede o segmento que pertence ao navegador: compara o timestamp de cada evento de input com o relógio de alta resolução no momento em que o handler realmente roda, e então reporta uma mediana e um percentil 95 sobre um lote de cliques, toques ou teclas.

Leia os resultados assim: a mediana é seu atraso típico de despacho — num navegador de desktop saudável, geralmente em poucos milissegundos de um dígito só. O p95 é a cauda — o quão ruim fica quando a thread principal engasga. Uma mediana de 2ms com p95 de 30ms significa que seu navegador está bem em média, mas trava com regularidade, o que num jogo parece input comido aleatoriamente.

Seja honesto sobre o que isso mede: atraso de despacho na fronteira de eventos do navegador. Não inclui o botão do seu mouse, o transporte USB nem o scan-out da tela — a própria seção de guia da ferramenta deixa isso claro. Para a visão completa de ponta a ponta, percorra a checklist de input lag quando terminar aqui.

Por que o mesmo mouse parece pior num navegador

Jogos nativos leem input perto do metal — APIs de raw input que recebem dados do mouse com cerimônia mínima. Navegadores fazem o caminho panorâmico. O SO entrega o evento ao navegador, o navegador decide qual elemento está sob o cursor (fazendo hit-testing no DOM inteiro), despacha ao JavaScript na thread principal, e só então o código do seu jogo pode reagir. Se a thread principal está ocupada executando um script de anúncio, seu clique espera na fila.

Três amplificadores específicos de navegador:

• Thread principal ocupada: abas pesadas, anúncios em vídeo e scripts de página duvidosos compartilham a thread em que seu jogo roda. Uma aba em segundo plano tocando um vídeo mudo pode adicionar jitter visível a cada input.
• Extensões: toda extensão que escuta eventos da página adiciona trabalho ao despacho. Corretores gramaticais e injetores de cupons são reincidentes.
• Coalescência de eventos: navegadores agrupam eventos de movimento de ponteiro de alta frequência e os entregam em blocos. Ótimo para fluidez no papel; significa que seus dados de mira chegam em pacotes.

É também por isso que o teclado pode parecer esponjoso no navegador enquanto o mesmo teclado é instantâneo num app nativo — um padrão que exploramos em meu teclado está com lag? e na análise mais profunda de latência de teclado.

Correções que realmente funcionam

Em ordem aproximada de impacto:

• Ative a aceleração de hardware. No Chrome/Edge: Configurações → Sistema → 'Usar aceleração gráfica quando disponível'. Descarregar a composição na GPU vale vários milissegundos e mata a maior parte das estranhezas de ritmo de quadros. Deveria estar ativada por padrão; políticas corporativas e bloqueios de drivers antigos são as razões usuais para não estar.
• Rode seu monitor na taxa de atualização real. Metade dos relatos de 'navegador travado' que vemos são painéis de 144Hz presos a 60Hz. Verifique os quadros apresentados, não só a configuração do Windows.
• Feche abas em segundo plano e desative extensões. Especialmente qualquer coisa que toque mídia ou injete scripts na página. Teste com um perfil limpo do navegador — se o p95 desabar, uma extensão estava comendo seus inputs.
• Jogue em tela cheia. Janelas em tela cheia ganham um caminho de composição mais direto na maioria dos navegadores, aparando alguns milissegundos e removendo a sobrecarga do gerenciador de janelas do desktop.
• Prefira periféricos com fio a Bluetooth. Bluetooth adiciona cerca de 10-20ms e travadas ocasionais de retransmissão por cima de todo o resto. Dongles de 2,4GHz e USB simples são drasticamente mais firmes.
• Use pointer lock quando o jogo oferecer. Pointer lock dá aos jogos de navegador deltas de mouse quase crus, ignorando o hit-testing do cursor para movimento.

Aplique uma de cada vez e refaça o teste de latência após cada mudança. Ver seu próprio p95 cair de 25ms para 6ms é mais convincente que qualquer guia de configurações.

Vsync e ritmo de quadros, num parágrafo

A renderização do navegador é sincronizada ao vsync: os quadros são apresentados em sincronia com a atualização da sua tela. Isso é bom — evita tearing — mas significa que seu jogo só pode atualizar nas fronteiras de quadro, e qualquer quadro que perca seu prazo espera um quadro inteiro extra. A 60Hz, um prazo perdido custa 16,7ms; a 240Hz, a mesma perda custa 4,2ms. Ritmo de quadros irregular é por que um jogo de navegador pode reportar '60 FPS' e ainda assim parecer engasgado: os quadros estão todos lá, só chegam em horários irregulares. Alta taxa de atualização é a cura mais barata, porque encolhe o tamanho de cada erro possível.

Quando não é o navegador

Se você fez tudo acima e os jogos ainda parecem estranhos, o gargalo está em outro ponto da cadeia. Os suspeitos não-navegador de sempre: uma TV em vez de monitor (o modo game desligado pode adicionar 30-80ms), teclado ou mouse Bluetooth, um monitor ainda a 60Hz, carga pesada do sistema por outro app, ou — em jogos online — simples latência de rede, que é um problema diferente vestindo a mesma fantasia. Um ping de 20ms não é input lag, mas suas mãos não conseguem diferenciar; nosso artigo sobre tempo de reação médio explica por que 20ms está bem no limite da percepção humana.

Percorra o sistema inteiro metodicamente com a checklist de input lag: meça cada estágio, mude uma coisa, meça de novo. Caçar latência só é frustrante quando você chuta.

Resumindo

Jogos de navegador parecem travados porque um clique no navegador viaja mais longe que num jogo nativo — pelo hit-testing, pela thread principal do JavaScript, por um compositor sincronizado ao vsync e finalmente pela tela. As maiores vitórias são chatas e grátis: aceleração de hardware ligada, taxa de atualização configurada corretamente, abas e extensões mortas, tela cheia ligada, Bluetooth desligado. Meça o atraso de despacho do seu navegador, conserte os estágios que você controla, e só então culpe o jogo. A maioria dos 'jogos de navegador travados' é, na verdade, setups de navegador travados.