raf-perf
v3.0.1
Published
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.
Downloads
125
Maintainers
Readme
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.