fireball-js
v1.1.5
Published
Breakpoints for performance
Downloads
22
Readme
Fireball
Breakpoints for performance.
Fireball is a small script that runs when your web page is loaded. It generates a score based on the performance of the user's hardware.
It hands off the work to a different thread so won't slow the rest of your site down while it's running.
Installation
npm install fireball --savebower install fireballExample usage
Setup
Fireball uses a Worker to calculate a score, which is loaded dynamically when fireball initialises. No need to host the worker script in another file.
Running fireball, the simple way
var Fireball = require('fireball-js');
Fireball.run();or if adding the script directly or using bower Fireball will be already available:
Fireball.run();The resulting score will be available in your JavaScript as Fireball.getScore() after a few seconds.
if (Fireball.getScore() > 8000){
//Do something to delight the user
} else {
//Do something boring but easy on the CPU
}Running fireball with classes
Fireball.run({
speedRanges: [
{min: 0, className: 'speed-of-sloth'},
{min: 4000, className: 'speed-of-tortoise'},
{min: 8000, className: 'speed-of-puppy'},
{min: 16000, className: 'speed-of-cheetah'}
]
});These breakpoints will be added as classes to the <body> so you can target them in CSS. E.g.
body.speed-of-sloth .my-element {
/* no box shadows, transitions, etc. */
}
body.speed-of-cheetah .my-element {
/* some hella fancy animation */
}Running fireball with all the bells and whistles
Fireball.run({
debug: true, //shows an onscreen readout. Defaults to false
runs: 7, //defaults to 7
defaultScore: 5000, //defaults to 0
classEl: 'body', //append a class indicating speed to this element. Defaults to 'body'
speedRanges: [ //the speed breakpoints and classnames to use
{min: 0, className: 'sloth'},
{min: 4000, className: 'tortoise'},
{min: 8000, className: 'puppy'},
{min: 16000, className: 'cheetah'}
],
callback: function(score) {
//do something now that the tests are done
// or store the score in a global variable if you're that way inclined
}
});You can also register a callback like so.
Fireball.onSuccess(callback);callback will be passed a single argument, the score.
This is handy if you have a modular system and want to access the fireball score in a different module without using a global variable. If the score has already been calculated this will execute immediately.
Browser support
Chrome, Firefox, Safari, Android 4.4+.
Won't work in the current IE (11) or Edge (25).
Benchmark
The Fireball score is roughly aligned with the Octane benchmark score; if a machine gets 15,000 on octane, the Fireball score will be within a few thousand of that. Probably.
Check out the demo on my site to see what score your machine gets.