Contador de FPS
Use este contador de FPS para medir a fluidez com que o seu navegador está desenhando a página atual. Ele amostra os quadros com requestAnimationFrame, informa o FPS atual, médio, mínimo e máximo e pode desenhar um gráfico rápido para você identificar quedas causadas por abas pesadas, animações, extensões, throttling ou configurações de tela.
Como medir o FPS do navegador
-
1
Escolha a duração da amostra
Cinco segundos é um bom padrão. Use uma amostra mais longa quando quiser flagrar engasgos periódicos ou variações de carga em segundo plano.
-
2
Defina a suavização e o limite de alerta
A janela de suavização calcula a média dos quadros recentes, enquanto o limite marca o nível de FPS que você considera aceitável no aparelho testado.
-
3
Rode o contador e observe a variação
O FPS atual mostra a velocidade de renderização recente. Os valores médio, mínimo e máximo revelam se a sessão foi fluida o tempo todo ou se houve quedas visíveis.
O que o contador de FPS mede
Esta ferramenta mede a cadência de renderização do navegador, não o desempenho da placa de vídeo em um benchmark. Sempre que o navegador está pronto para desenhar outro quadro, o requestAnimationFrame chama o amostrador. O tempo entre dois callbacks resulta em uma taxa de quadros instantânea:
FPS = 1000 / frame_time_in_ms
O FPS atual exibido é uma média móvel calculada sobre a janela de suavização. Uma janela de 60 quadros funciona bem em telas comuns de 60 Hz, porque acalma picos de um único quadro sem esconder quedas prolongadas. Janelas menores reagem mais rápido; janelas maiores parecem mais estáveis.
Exemplo prático
Suponha que uma amostra de cinco segundos registre estes intervalos de quadro simplificados:
| Intervalo entre quadros | FPS instantâneo | O que indica |
|---|---|---|
| 16,7 ms | 59,9 FPS | Renderização típica em 60 Hz |
| 8,3 ms | 120,5 FPS | Renderização típica em 120 Hz |
| 25,0 ms | 40,0 FPS | Lentidão visível em muitas telas |
| 33,3 ms | 30,0 FPS | Carga pesada ou throttling |
Se o seu limite de alerta for 50 FPS e a média móvel medida terminar em 47 FPS, o resultado fica abaixo da meta, mesmo que alguns quadros tenham sido mais rápidos. Se ela terminar perto de 60 FPS com quedas ocasionais para 45 FPS, a média está saudável, mas o mínimo avisa que houve engasgos que merecem investigação.
Como interpretar os resultados
| Padrão do resultado | Significado provável | Próxima verificação |
|---|---|---|
| Média próxima da taxa de atualização, quedas raras | A renderização está saudável | Compare com outro navegador apenas se necessário |
| Média boa, mínimo bem mais baixo | Engasgos periódicos | Feche abas pesadas ou inspecione as animações |
| Média abaixo do limite | Carga de renderização constante | Verifique o uso de CPU, as extensões e os scripts da página |
| FPS travado perto de 30 | Economia de energia ou throttling | Verifique o modo de bateria e as configurações de tela |
O FPS do navegador é influenciado pela taxa de atualização da tela, pelo compositor do sistema operacional, pelo modo de bateria, pelo throttling térmico, pelas abas ativas e pela própria página. Faça o teste primeiro em uma aba tranquila e depois repita com a página ou o aplicativo que você está diagnosticando em atividade.
Perguntas frequentes
Não. Este contador mede com que frequência o navegador recebe os callbacks de requestAnimationFrame. Ele é útil para checar animações web e a fluidez da página, mas não é um benchmark completo de GPU para jogos nativos.
A maioria dos navegadores alinha os quadros de animação à taxa de atualização da tela. Um monitor de 60 Hz costuma registrar cerca de 60 FPS, enquanto telas de 120 Hz ou 144 Hz podem registrar valores maiores quando o navegador e o sistema operacional permitem.
Use 50 FPS para uma checagem normal de fluidez em 60 Hz. Em monitores de alta taxa de atualização, ajuste o limite conforme a experiência esperada, por exemplo 90 FPS ou 120 FPS.
Não. A medição roda no seu navegador usando as APIs locais de temporização. A ferramenta não envia dados de quadros, capturas de tela ou detalhes do aparelho para nenhuma API externa.
Ferramentas relacionadas
Formatador de JSON
Cole JSON para exibir com recuo de 2 ou 4 espaços, minificar em uma saída compacta ou verificar rapidamente a sintaxe antes de copiar o resultado.
Gerador de Paletas de Cores
Gere paletas monocromáticas, análogas, complementares, triádicas ou tetrádicas a partir de uma cor base HEX e exporte variáveis CSS prontas para copiar.
Gerador de paletas de cores aleatórias
Gere paletas aleatórias com 2 a 15 amostras, escolha um estilo vibrante, pastel, suave ou escuro e copie códigos HEX ou variáveis CSS.
Gerador de letras aleatórias
Gere letras A-Z aleatórias. Escolha a quantidade, use maiúsculas, minúsculas ou misto, e aplique o resultado em jogos, propostas ou atividades de sala.
Conversor de ASCII para Binário
Converta qualquer string ASCII para sua representação binária. Cada caractere se torna oito bits, separados por espaços, prontos para colar em um rastreamento de protocolo ou tarefa de casa.
Seletor de cores HEX
Escolha uma cor visualmente e veja os valores HEX, RGB, HSL, HSV e CMYK, com contraste contra branco e preto.