A frame-synced scheduler for performant batching of read and writes.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.gitignore
CHANGELOG.md
LICENSE
README.md
package-lock.json
package.json
rollup.config.js
tsconfig.json
tslint.json

README.md

Framesync

A tiny frame scheduler for performantly batching reads and renders.

Segregating actions that read and write to the DOM will avoid layout thrashing.

Install

npm install framesync --save

Usage

The Framesync render loop executes four sequential steps, once per frame.

  • frameStart
  • frameUpdate
  • frameRender
  • frameEnd

Developers can set any function to run at any of these steps using the on and cancel callbacks:

  • onFrameStart, cancelOnFrameStart
  • onFrameUpdate, cancelOnFrameUpdate
  • onFrameRender, cancelOnFrameRender
  • onFrameEnd, cancelOnFrameEnd

Framesync also exports some time-measurement methods:

  • currentTime: The current time as measured by the host platform's most accurate now function.
  • currentFrameTime: The time the current requestAnimationFrame was initiated.
  • timeSinceLastFrame: The duration between the previous frame and the current currentFrameTime

Example

import {
  timeSinceLastFrame,
  onFrameStart,
  cancelFrameStart
} from 'framesync';

function logTimeSinceLastFrame() {
  console.log(timeSinceLastFrame());
  onFrameStart(logTimeSinceLastFrame);
}

onFrameStart(logTimeSinceLastFrame);

function stopLogging() {
  cancelOnFrameStart(logTimeSinceLastFrame);
}

setTimeout(stopLogging, 5000);