Measure FPS

While working with CSS, HTML, and JS it's always important to take care of browser rendering. To find issues with rendering we are using "Timeline" with "JS Profile" and "Memory" consumption tracking. Those tools are good 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 it action follow this link (at left bottom corner). Play with sliders to see how different CSS effects may slow down rendering process.

This tool works on mobile devices. It uses performance.now to measure time period, and requestAnimationFrame to measure rendered frames, both APIs is very efficient and has the minor impact (which obviously helps to measure FPS more correctly).

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, reactive: false})).start();

API

`new FPSMeter([opts])`

opts {Object}
opts.ui {Boolean} - Render small box with current FPS into body, default: false
opts.reactive {Boolean} - Store current FPS as reactive data source, default: false

1// Quick start:
2var FPS = new FPSMeter({ui: true, reactive: false});
3// FPS.start();
4// FPS.stop();

`FPS.start()`

Use to start measuring FPS. If {ui: true} small box with current FPS will be rendered into body

`FPS.stop()`

Use to stop measuring FPS. If {ui: true} box with current FPS will be removed from body

`FPS.fps`

If {reactive: false} it holds a {Number} with current FPS.

If {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:

1var FPS = new FPSMeter({ui: true, reactive: false});
2
3Template.currentFPS.helpers({
4  currentFPS: function () {
5    return FPS.fps.get();
6  }
7});
8
9Template.currentFPS.events({
10  'click [data-start-fps]': function (e) {
11    e.preventDefault();
12    FPS.start();
13    return false;
14  },
15  'click [data-stop-fps]': function (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>