Contador de FPS
Usa este contador de FPS para medir con qué fluidez está dibujando tu navegador la página actual. Muestrea los fotogramas con requestAnimationFrame, informa de los FPS actuales, medios, mínimos y máximos, y puede dibujar un gráfico breve para que detectes las caídas provocadas por pestañas pesadas, animaciones, extensiones, limitación de recursos o la configuración de pantalla.
Cómo medir los FPS del navegador
-
1
Elige la duración de la muestra
Cinco segundos es un buen valor por defecto. Usa una muestra más larga si quieres cazar tirones periódicos o cambios de carga en segundo plano.
-
2
Ajusta el suavizado y el umbral de aviso
La ventana de suavizado promedia los fotogramas recientes, mientras que el umbral marca el nivel de FPS que consideras aceptable en el equipo que estás probando.
-
3
Lanza el contador y observa la dispersión
Los FPS actuales indican la velocidad de dibujado reciente. Los valores medio, mínimo y máximo revelan si la sesión fue fluida de forma constante o si hubo caídas visibles.
Qué mide el contador de FPS
Esta herramienta mide la cadencia de dibujado del navegador, no el rendimiento de la tarjeta gráfica en un benchmark. Cada vez que el navegador está listo para pintar otro fotograma, requestAnimationFrame llama al muestreador. El tiempo entre dos llamadas da una tasa de fotogramas instantánea:
FPS = 1000 / frame_time_in_ms
Los FPS actuales que se muestran son una media móvil sobre la ventana de suavizado. Una ventana de 60 fotogramas funciona bien en pantallas normales de 60 Hz porque calma los picos de un solo fotograma sin ocultar las caídas sostenidas. Las ventanas más pequeñas reaccionan antes; las más grandes se ven más estables.
Ejemplo práctico
Supongamos que una muestra de cinco segundos registra estos intervalos de fotograma simplificados:
| Intervalo entre fotogramas | FPS instantáneos | Qué indica |
|---|---|---|
| 16,7 ms | 59,9 FPS | Dibujado típico a 60 Hz |
| 8,3 ms | 120,5 FPS | Dibujado típico a 120 Hz |
| 25,0 ms | 40,0 FPS | Ralentización visible en muchas pantallas |
| 33,3 ms | 30,0 FPS | Carga pesada o limitación de recursos |
Si tu umbral de aviso son 50 FPS y la media móvil medida termina en 47 FPS, el resultado queda por debajo del objetivo aunque algunos fotogramas fueran más rápidos. Si termina cerca de 60 FPS con caídas puntuales a 45 FPS, la media es sana, pero el mínimo te avisa de que hubo tirones que conviene investigar.
Cómo interpretar los resultados
| Patrón del resultado | Significado probable | Siguiente comprobación |
|---|---|---|
| Media cercana a la tasa de refresco, con caídas raras | El dibujado es correcto | Compara con otro navegador solo si hace falta |
| Media buena, mínimo mucho más bajo | Tirones periódicos | Cierra pestañas pesadas o revisa las animaciones |
| Media por debajo del umbral | Carga de dibujado sostenida | Revisa el uso de CPU, las extensiones y los scripts de la página |
| FPS limitados cerca de 30 | Ahorro de energía o limitación de recursos | Comprueba el modo de batería y la configuración de pantalla |
Los FPS del navegador dependen de la tasa de refresco de la pantalla, del compositor del sistema operativo, del modo de batería, de la limitación térmica, de las pestañas activas y de la propia página. Haz la prueba primero en una pestaña tranquila y repítela después con la página o la aplicación que quieres diagnosticar en marcha.
Preguntas frecuentes
No. Este contador mide con qué frecuencia recibe el navegador las llamadas de requestAnimationFrame. Es útil para comprobar animaciones web y la fluidez de una página, pero no es un benchmark completo de GPU para juegos nativos.
La mayoría de navegadores sincronizan los fotogramas de animación con la tasa de refresco de la pantalla. Un monitor de 60 Hz suele dar cerca de 60 FPS, mientras que las pantallas de 120 Hz o 144 Hz pueden dar valores más altos cuando el navegador y el sistema operativo lo permiten.
Usa 50 FPS para una comprobación normal de fluidez a 60 Hz. En monitores de alta tasa de refresco, ajusta el umbral a la experiencia que esperas, por ejemplo 90 FPS o 120 FPS.
No. La medición se ejecuta en tu navegador usando las API de temporización locales. La herramienta no envía datos de fotogramas, capturas de pantalla ni detalles del dispositivo a ninguna API externa.
Herramientas relacionadas
Generador de letras aleatorias
Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.
Generador de Paletas de Color
Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.
Formateador de JSON
Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.
Simplificador de Álgebra Booleana
Simplifica expresiones booleanas usando mapas de Karnaugh y el algoritmo de Quine-McCluskey. Muestra cada paso de minimización y una forma final SOP/POS.
Generador de colores aleatorios
Genera de 1 a 50 colores HEX aleatorios con muestras para previsualizar, copiar y usar en CSS, pruebas o exploración de paletas.
Convertidor de ASCII a Hex
Convierte texto ASCII a valores de bytes hexadecimales. La salida utiliza dos dígitos hexadecimales por carácter, lista para volcar en memoria, trazas de paquetes o tablas de firmware.