Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davidgilbertson/fireball
https://github.com/davidgilbertson/fireball
Last synced: 13 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/davidgilbertson/fireball
- Owner: davidgilbertson
- Created: 2013-11-04T23:52:53.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2016-07-11T03:46:21.000Z (over 8 years ago)
- Last Synced: 2024-10-29T01:26:21.847Z (18 days ago)
- Language: JavaScript
- Homepage: http://www.dg707.com/fireball
- Size: 28.3 KB
- Stars: 44
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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 --save
```
```
bower install fireball
```
## Example usage
### Setup
Fireball uses a [Worker](https://developer.mozilla.org/en-US/docs/Web/API/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
```javascript
var Fireball = require('fireball-js');
Fireball.run();
```
or if adding the script directly or using bower Fireball will be already available:
```javascript
Fireball.run();
```
The resulting score will be available in your JavaScript as `Fireball.getScore()` after a few seconds.
```javascript
if (Fireball.getScore() > 8000){
//Do something to delight the user
} else {
//Do something boring but easy on the CPU
}
```
### Running fireball with classes
```javascript
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 `` so you can target them in CSS. E.g.
```css
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
```javascript
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](http://chromium.github.io/octane/) 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](http://www.dg707.com/fireball) to see what score your machine gets.