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 is good when you're know about the existing problem.

During our development process we are using FPS-meter, which gives a signal when "Long" frames occurs. To see it action follow this link (at left bottom corner). Play with sliders so see how different CSS effects may slowdown 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 minor impact (which obviously helps to measure FPS more correctly).

Installation

meteor add ostrio:fps-meter

ES6 Import

Although FPSMeter is exported to global scope, you may use 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
opts.reactive {Boolean} - Store current FPS as reactive data source

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>