raf-perf v3.0.0
raf-perf
RAF loop with an adaptive fps and performance ratio calculated from either a sample count or a sample duration. Typically used when doing intensive graphics computation in canvas.
Installation
npm install raf-perf
Usage
import RafPerf from "raf-perf";
import createCanvasContext from "canvas-context";
const { context, canvas } = createCanvasContext("2d", {
width: window.innerWidth,
height: window.innerHeight,
offscreen: true,
});
document.body.appendChild(canvas);
const engine = new RafPerf();
const offTick = engine.on("tick", (dt) => {
// Clear
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw
// ...
});
const offPerf = engine.on("perf", (ratio) => {
if (!ratio) return;
console.log(`Performance ratio: ${ratio}`);
if (ratio < 0.9) {
console.log("Too many draws");
} else if (ratio >= 0.9 && rectCount < maxRectCount) {
console.log("Draw more");
}
});
engine.start();
const destroy = () => {
if (engine.isRunning) engine.stop();
offTick();
offPerf();
};
API
Classes
Events
Typedefs
RafPerf
Kind: global class
- RafPerf
- new RafPerf([options])
- .TickEvent : string
- .PerfEvent : string
- .start()
- .tick()
- .stop()
- .on(type, cb) ⇒ function
new RafPerf(options)
Creates an instance of RafPerf.
Param | Type | Default | Description |
---|---|---|---|
options | Options | {} | samplesCount and sampleDuration are used concurrently. Set sampleDuration to a falsy value if you only want to sample performances from a number of frames. |
rafPerf.TickEvent : string
Kind: instance property of RafPerf
rafPerf.PerfEvent : string
Kind: instance property of RafPerf
rafPerf.start()
Run the requestAnimationFrame
loop and start checking performances if options.performances.enabled
is true
.
Kind: instance method of RafPerf
rafPerf.tick()
The frame loop callback.
Kind: instance method of RafPerf Emits: RafPerf.event:PerfEvent, RafPerf.event:TickEvent
rafPerf.stop()
Run cancelAnimationFrame
if necessary and reset the engine.
Kind: instance method of RafPerf
rafPerf.on(type, cb) ⇒ function
Add "perf" and "tick" listeners.
Kind: instance method of RafPerf Returns: function - Call the return value to unsubscribe.
Param | Type |
---|---|
type | string |
cb | function |
"perf"
Event triggered when performance ratio (this.frameDuration / averageDeltaTime
) is updated. Understand a ratio of the fps, for instance for a fps value of 24, ratio < 0.5
means that the averaged fps < 12
and you should probably do something about it.
Kind: event emitted
"tick"
Event triggered on tick, throttled by options.fps
.
Kind: event emitted
Options : object
Kind: global typedef Properties
Name | Type | Default | Description |
---|---|---|---|
fps | number | 60 | Throttle fps. |
performances | OptionsPerformances | { enabled: true, samplesCount: 200, sampleDuration: 4000 } | Performances metrics. |
OptionsPerformances : object
Kind: global typedef Properties
Name | Type | Default | Description |
---|---|---|---|
enabled | boolean | true | Evaluate performances. |
samplesCount | number | 200 | Number of samples to evaluate performances. |
sampleDuration | number | 4000 | Duration of sample to evaluate performances. |
License
MIT. See license file.