raf-perf
TypeScript icon, indicating that this package has built-in type declarations

3.0.0 • Public • Published

raf-perf

npm version stability-stable npm minzipped size dependencies types Conventional Commits styled with prettier linted with eslint license

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.

paypal coinbase twitter

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

RafPerf

Events

"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.

"tick"

Event triggered on tick, throttled by options.fps.

Typedefs

Options : object
OptionsPerformances : object

RafPerf

Kind: global class

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.

Package Sidebar

Install

npm i raf-perf

Weekly Downloads

0

Version

3.0.0

License

MIT

Unpacked Size

19.6 kB

Total Files

7

Last publish

Collaborators

  • dmnsgn