Test FPS i benchmark ekranu
Zmierz FPS (frames per second) swojej przeglądarki i monitora. Benchmark wydajności renderingu, test odświeżania ekranu 60Hz/120Hz/144Hz. Bezpłatnie.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćTest FPS ekranu – benchmark wydajności renderingu w przeglądarce
FPS (Frames Per Second) to miara płynności animacji i renderingu. Monitor odświeżający się 60Hz wyświetla maksymalnie 60 klatek/sekundę. Narzędzie mierzy rzeczywiste FPS przeglądarki używając requestAnimationFrame, wykrywa ograniczenia GPU i renderera oraz testuje stabilność klatek.
Jak działa pomiar FPS
requestAnimationFrame (rAF): przeglądarka wywołuje callback przed każdym renderowaniem ramki. Pomiar: timestamp różnica między kolejnymi wywołaniami. FPS = 1000 / (t2 - t1) ms. Śr. krocząca z ostatnich N klatek daje stabilny wynik. Vsync: większość przeglądarek synchronizuje rAF z odświeżaniem monitora (60Hz → 60 FPS max, 144Hz → 144 FPS max).
Standardy odświeżania monitorów
60 Hz: standard przez 20 lat. 1000ms / 60 = ~16.67 ms na klatkę. 75 Hz: budżetowe gamingowe. 90 Hz: smartfony mid-range, VR minimum. 120 Hz: iPhone Pro, iPad Pro, gamingowe. 144 Hz: PC gaming standard. 165/240 Hz: high-end PC gaming. 4K OLED 120 Hz: premium. Wyższe Hz = płynniejsza animacja, ale więcej zasobów GPU.
Co wpływa na FPS w przeglądarce
GPU/iGPU: rendering WebGL i CSS transforms. CPU: JavaScript execution, layout recalculation. Pamięć: garbage collection drops. Power mode: laptopy w trybie oszczędzania = throttled GPU. Background tabs: przeglądarki ograniczają rAF w tle do 1 FPS. Vsync: wymuszony przez OS (60/120/144 FPS limit). Compositor thread vs main thread: paint i composite są osobne.
Techniki optymalizacji FPS w webaplikacjach
CSS transforms zamiast top/left (compositor layer). will-change: transform – hint dla GPU layering. Avoid layout thrashing: nie czytaj i nie pisz DOM w tej samej klatce. RequestAnimationFrame zamiast setInterval do animacji. WebWorker dla ciężkich obliczeń. OffscreenCanvas: rendering poza głównym wątkiem. Throttle scroll handlers: passive: true.
Najczęstsze pytania
Dlaczego moje FPS jest poniżej 60 mimo 60Hz monitora?
Przyczyny: zbyt wolny CPU/GPU dla zadania. Throttling termiczny (laptop, brak chłodzenia). Background apps zjadające zasoby. Przeglądarka: brak akceleracji hardware (chrome://gpu). Power saver mode. Zainstalowane rozszerzenia blokujące. Sprawdź: chrome://tracing lub Performance tab w DevTools.
Jak sprawdzić odświeżanie monitora?
Windows: Display Settings → Advanced → Refresh Rate. macOS: System Settings → Displays → podaj częstotliwość. Linux: xrandr | grep \* (gwiazdka = aktywny tryb). Przeglądarka: narzędzie FPS mierzy pośrednio – jeśli max = 60.X → monitor 60Hz.
Jaki FPS jest potrzebny do płynnych animacji webowych?
60 FPS (16.7 ms/klatkę): standard komfortowy. Poniżej 30 FPS: widoczne szarpanie. 24 FPS: kino (akceptowalny). 30 FPS: "konsola standard" (akceptowalny). 60 FPS: smooth UI. 120 FPS: UI CSS transitions wyraźnie płynniejsze na 120Hz monitorze. Scrollowanie: < 60 FPS jest bolesne dla użytkownika.
Co to jest jank i jak go unikać?
Jank: nieregularne klatki (raz 8ms, raz 50ms) – gorsze niż stałe 30 FPS. Przyczyna: long tasks > 50ms blokują main thread. Narzędzie: Lighthouse, WebPageTest, DevTools Performance. Rozwiązanie: code splitting, lazy loading, WebWorker dla obliczeń, optimize React renders.
Jak mierzyć FPS w produkcyjnej aplikacji?
Performance API: performance.now() dla timestampów. PerformanceObserver: obserwuj "longtask" (> 50ms). Stats.js (npm): overlay FPS/MS/MB dla deweloperów. Sentry Performance Monitoring: real-user FPS tracking. Datadog RUM: browser performance metrics w czasie rzeczywistym.
Powiązane narzedzia: tester WebGL i GPU, detektor funkcji przegladarki i test szybkosci klikania.