FPS-teller
Gebruik deze FPS-teller om te meten hoe soepel je browser de huidige pagina weergeeft. Hij bemonstert de frames met requestAnimationFrame, toont de huidige, gemiddelde, minimale en maximale FPS en kan een korte grafiek tekenen zodat je dips herkent die worden veroorzaakt door zware tabbladen, animaties, extensies, throttling of beeldscherminstellingen.
Zo meet je de FPS van je browser
-
1
Kies de meetduur
Vijf seconden is een goede standaardwaarde. Gebruik een langere meting als je terugkerende haperingen of wisselende achtergrondbelasting wilt betrappen.
-
2
Stel de afvlakking en de waarschuwingsdrempel in
Het afvlakkingsvenster middelt de recente frames, terwijl de drempel het FPS-niveau markeert dat je op het geteste apparaat nog acceptabel vindt.
-
3
Start de teller en lees de spreiding af
De huidige FPS toont de recente rendersnelheid. Het gemiddelde, de laagste en de hoogste waarde laten zien of de sessie constant soepel was of zichtbare dips had.
Wat de FPS-teller meet
Deze tool meet het rendertempo van de browser, niet de benchmarkprestaties van je videokaart. Telkens wanneer de browser klaar is om een volgend frame te tekenen, roept requestAnimationFrame de sampler aan. De tijd tussen twee callbacks levert een momentane framerate op:
FPS = 1000 / frame_time_in_ms
De getoonde huidige FPS is een voortschrijdend gemiddelde over het afvlakkingsvenster. Een venster van 60 frames werkt goed bij gewone 60 Hz-schermen, omdat het losse uitschieters dempt zonder aanhoudende dalingen te verbergen. Kleinere vensters reageren sneller, grotere vensters ogen stabieler.
Uitgewerkt voorbeeld
Stel dat een meting van vijf seconden deze vereenvoudigde frame-intervallen registreert:
| Frame-interval | Momentane FPS | Wat het betekent |
|---|---|---|
| 16,7 ms | 59,9 FPS | Typische weergave op 60 Hz |
| 8,3 ms | 120,5 FPS | Typische weergave op 120 Hz |
| 25,0 ms | 40,0 FPS | Op veel schermen zichtbaar traag |
| 33,3 ms | 30,0 FPS | Zware belasting of throttling |
Ligt je waarschuwingsdrempel op 50 FPS en eindigt het gemeten voortschrijdend gemiddelde op 47 FPS, dan blijft het resultaat onder je doel, ook al waren enkele frames sneller. Eindigt het rond 60 FPS met af en toe een dip naar 45 FPS, dan is het gemiddelde gezond, maar wijst het minimum op haperingen die het onderzoeken waard zijn.
De resultaten uitlezen
| Patroon in het resultaat | Waarschijnlijke betekenis | Volgende controle |
|---|---|---|
| Gemiddelde vlak bij de verversingsfrequentie, dips zeldzaam | De weergave is gezond | Vergelijk alleen met een andere browser als dat nodig is |
| Gemiddelde goed, laagste waarde veel lager | Terugkerende haperingen | Sluit zware tabbladen of controleer de animaties |
| Gemiddelde onder de drempel | Aanhoudend hoge renderbelasting | Controleer CPU-belasting, extensies en paginascripts |
| FPS begrensd rond 30 | Energiebesparing of throttling | Controleer de accumodus en de beeldscherminstellingen |
De FPS in je browser hangt af van de verversingsfrequentie van het scherm, de compositor van het besturingssysteem, de accumodus, thermische throttling, de actieve tabbladen en de pagina zelf. Doe de test eerst in een rustig tabblad en herhaal hem daarna terwijl de pagina of app die je onderzoekt actief is.
Veelgestelde vragen
Nee. Deze teller meet hoe vaak de browser requestAnimationFrame-callbacks ontvangt. Dat is handig voor webanimaties en het controleren van de vloeiendheid van een pagina, maar het is geen volwaardige GPU-benchmark voor native games.
De meeste browsers koppelen animatieframes aan de verversingsfrequentie van het scherm. Een 60 Hz-monitor meldt meestal bijna 60 FPS, terwijl schermen van 120 Hz of 144 Hz hogere waarden kunnen melden als de browser en het besturingssysteem dat toestaan.
Gebruik 50 FPS voor een gewone vloeiendheidscontrole op 60 Hz. Zet de drempel bij monitors met een hoge verversingsfrequentie dichter bij de ervaring die je verwacht, bijvoorbeeld 90 FPS of 120 FPS.
Nee. De meting draait in je browser met lokale timing-APIs. De tool stuurt geen framegegevens, schermafbeeldingen of apparaatgegevens naar een externe API.
Gerelateerde tools
HEX-kleurkiezer
Kies visueel een kleur en krijg de HEX-, RGB-, HSL-, HSV- en CMYK-waarden, plus contrast tegen wit en zwart.
Kleurenpaletgenerator
Genereer monochromatische, analoge, complementaire, triadische of tetradische paletten vanuit een HEX-basiskleur en exporteer kopieerklare CSS-variabelen.
ASCII naar binair-converter
Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.
Binair naar hex-converter
Converteer binaire invoer naar een gewone uppercase hexwaarde. Niet-binaire tekens worden genegeerd en voorloopnullen blijven niet behouden.
JSON-formatter
Plak JSON om het met 2 of 4 spaties leesbaar te maken, te minificeren tot compacte uitvoer of snel de syntaxis te controleren voordat je het resultaat kopieert.
ASCII naar hex-converter
Converteer ASCII-tekst naar hexadecimale bytewaarden. Uitvoer gebruikt twee hex-cijfers per teken, klaar voor memory dumps, packet traces of firmwaretabellen.