Skip to content

ryanmorr/schedule-render

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

schedule-render

Version Badge License Build Status

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.