Performance FPS

⭐️⁉️ New version here (fast, small and functional)

Performance check tool for scalable quality project. Use this tool to check current state of performance based on fps/ms of project during navigation.

Demo

Features

🎲 highly configurable
☮️ dependecy free
📦 only 2kB
🚀 every frame ~0.07ms
⚾ control bouncing effect (increase/decrease perf)
🧟 execute live only on rAF (no internal timing)
🙈 check reset when change tab (visibilitychange)

Getting Started

Supports UMD, AMD and CommonJS format.

With NPM or yarn or download and use script

Clone this repository to generate build or take "performance-fps.min.js" from root

npm i performance-fps

yarn add performance-fps

<script src="performance-fps.min.js" type="text/javascript"></script>

Usage

First instantiate the class

const checkFps = new PerformanceFps();

Push instance with update method on your rAF

const rAF = () => {
    checkFps.update();
    requestAnimationFrame(rAF);
};

Use onChange method to update your code with the performance when level change or check simply properties checkFps.performance in your code when deserve

checkFps.on('change', (e) => {
  this.yourPerformanceLevel = e;
});

Default configuration and Options

You can set all or one of this option with your parameters. This configuration is setting with take balanced speed/quality of checked performance.

Use samples and accuracy to increase the speed and quality of check.

const checkFps = new PerformanceFps({
    min: -2,
    max: 2,
    start: 0,
    samples: 100,
    accuracy: 64,
    delay: 2000,
    maxFps: 60,
    minFps: 30,
    checkFps: 54,
    upperCheckFps: 58,
    maxTryToUpper: 1,
    reCheckAfter: false,
});

Options	Default	Unit	Info
min	-2	level	use this option to limit min level of performance returned
max	2	level	use this option to limit max level of performance returned
start	0	level	start value of level
samples	100	-	used to take the average of fps, more (not much) samples make the average more accurate but increase the time to check, one sample take every ms value on accuracy option
accuracy	64	ms	time between every samples, more time less quality of check, this depends on current performance, if you have ~16ms/60fps the sample is taken every ~64ms
delay	2000	ms	start to check after this value
maxFps	60	fps	change if limit is upper than 60fps
minFps	30	fps	if current performance is lower a minimum level of performance is setted
checkFps	54	fps	limit of check, if lower decrease the level
upperCheckFps	58	fps	check update with this value to try upper level
maxTryToUpper	1	times	used to try to increase value if check fail more than 1 times
reCheckAfter	false	ms	after this time start recheck (and try to increase value)

Next features and improvements

An external GUI with check properties to get configuration more simply and realtime for single project.

Motivation

It allows to make the project usable on different devices, able to make scalable and more adaptive to device.

Author

William Manco @ https://twitter.com/williammanco

License

MIT