Medidor de FPS do Navegador

A rolagem engasga e você não sabe se a culpa é da página, do navegador ou do notebook. Esta página desenha três números ao vivo: o FPS do último quadro, a média dos últimos 5 segundos e o pior quadro desse mesmo intervalo. Serve bem para comparar cenários lado a lado: na bateria e na tomada, com e sem aquela extensão ligada, no Chrome e no Firefox, com o ventilador quieto e com a máquina fervendo.

Por dentro é um laço de requestAnimationFrame. A cada quadro ele mede o tempo desde o anterior e divide 1000 por esse intervalo, guardando os valores em uma janela deslizante de 5 segundos. O mínimo é o pior quadro isolado dessa janela, então um engasgo de 100 ms derruba o número para 10 e ele só volta ao normal quando aqueles 5 segundos passam. O teto é a taxa do seu monitor: um painel de 60 Hz entrega 60 e não passa disso.

A medição começa sozinha quando a página abre, sem botão de iniciar nem de zerar. E ela mede esta página, que está praticamente parada: encare o resultado como o teto que o navegador consegue entregar, não como o FPS do seu site ou do seu jogo. Para isso, use o painel Performance do DevTools na página real. Em aba de fundo o navegador limita o requestAnimationFrame, então mantenha a aba visível. Nada é enviado para lugar nenhum.