@ryanmorr/schedule-render

schedule-render

Deferred DOM rendering optimized for 60fps

Install

Download the CJS, ESM, UMD versions or install via NPM:

npm install @ryanmorr/schedule-render

Usage

Schedule a callback function that manipulates the DOM. The callback is entered into a queue and run within a frame to maintain 60fps and prevent dropping the frame which could result in jank. When the frame rate budget has been exceeded and more callbacks still exist within the queue, a new frame will be automatically scheduled until every function in the queue has been executed. It returns a promise that is fulfilled when rendering is complete:

import scheduleRender from '@ryanmorr/schedule-render';

scheduleRender(() => {
    // Manipulate the DOM within the callback function
    // The return value is provided to all thenables
}).then((value) => {
    // Rendering complete
});

License

This project is dedicated to the public domain as described by the Unlicense.