Measure FPS
While working with CSS, HTML, and JavaScript, it's always important to take care of browser rendering in browser DevTools. To find issues with rendering, we are using "Timeline" with "JS Profile" and "Memory" consumption tracking. Those tools are great when you know about the existing problem.
During our development process, we are using FPS-meter, which gives a signal when "Long" frames occur. To see meter action, visit this link (in the left bottom corner). Play with sliders to see how different CSS effects may slow down the rendering process, blur
is the most "expensive" CSS3 filter.
This library works on mobile devices. It utilizes performance.now
to measure time frame and requestAnimationFrame
to measure rendered frames, both APIs are very efficient and have a minor impact (for correct FPS measurement).
Drop-in version
Installation is not required, copy-paste script into browser' console, see this Gist.
Installation
meteor add ostrio:fps-meter
ES6 Import
1import { FPSMeter } from 'meteor/ostrio:fps-meter';
Quick start
1(new FPSMeter({ui: true})).start();
API
new FPSMeter([opts])
opts
{Object}opts.ui
{Boolean} - Render small box with current FPS intobody
, default:false
opts.reactive
{Boolean} - Store current FPS as reactive data source, default:false
1// Quick start: 2const fps = new FPSMeter({ui: true, reactive: false}); 3// fps.start(); 4// fps.stop();
Methods
FPSMeter#start()
— Use to start measuring FPS. If{ui: true}
small box with current FPS will be rendered intobody
FPSMeter#stop()
— Use to stop measuring FPS. If{ui: true}
box with current FPS will be removed frombody
FPSMeter#pause()
— Use to pause measuring FPS. If{ui: true}
box with current FPS will remain inbody
FPSMeter#resume()
— Use to resume measuring FPSFPSMeter#toggle()
— Use to toggle (pause/resume) measuring FPS
Properties
FPSMeter#isRunning
{Boolean} —true
if meter is running andfalse
when meter is on pause, stopped or has not started yetFPSMeter#template
{Blaze.View|undefined} — When{ui: true}
this property holds Blaze.View instance, otherwise itsundefined
FPSMeter#element
{DOMElement|undefined} — When{ui: true}
this property holds DOMElement of FPSMeter UI elementdiv
, otherwise itsundefined
FPSMeter#fps
{Number|ReactiveVar} — When{reactive: false}
it holds a {Number} with current FPS. When{reactive: true}
it is an instance of{*ReactiveVar*}
. Use.get()
method to return current FPS. It's reactive data source, and can be used in template:
1const fps = new FPSMeter({ui: false, reactive: true}); 2 3Template.currentFPS.helpers({ 4 currentFPS() { 5 return fps.fps.get(); 6 } 7}); 8 9Template.currentFPS.events({ 10 'click [data-start-fps]'(e) { 11 e.preventDefault(); 12 fps.start(); 13 return false; 14 }, 15 'click [data-stop-fps]'(e) { 16 e.preventDefault(); 17 fps.stop(); 18 return false; 19 } 20});
1<template name="currentFPS"> 2 <div>{{currentFPS}}</div> 3 <button data-start-fps>Start</button> 4 <button data-stop-fps>Stop</button> 5</template>
Pause/Resume by clicking on UI box
1const fps = new FPSMeter({ ui: true }); 2fps.start(); 3fps.element.addEventListener('click', fps.toggle.bind(fps), { passive: true, capture: false });
Support this project:
- Become a patron — support my open source contributions with monthly donation
- Use ostr.io — Monitoring, Analytics, WebSec, Web-CRON and Pre-rendering for a website