@figliolia/frame-pooler

Frame Pooler

A task queue for distributing callbacks into animation frames. The Frame Pooler will allow you to run sequential tasks and automatically handle task distribution based on a maximum frame-duration and callstack size.

This library is primarily designed for heavy DOM manipulation and/or animation.

Installation

npm i @figliolia/frame-pooler
# or
yarn add @figliolia/frame-pooler

Basic Usage

import { FramePooler } from "@figliolia/frame-pooler";

const Pooler = new FramePooler(
  100 
  /* max call stack size per frame (defaults to Infinity) */
);

Pooler.run((time: number) => {
  // heavy DOM reads or updates
});

Background

When building an animation-intensive JavaScript library I found myself benchmarking the performance of concurrent calls to requestAnimationFrame vs. pooling callbacks into already open animation frames.

Due to the fact that logic executed inside of requestAnimationFrame can itself take any duration, I landed upon a game loop-like solution for my library - where an animation loop would remain running as long as tasks were pending. And if a given set of tasks exceeded a safe duration for a single frame, the frame will close with remaining tasks executing in the next available frame.

Thus allowing for the best possible frame rate the end-user's device could handle while still receiving user-input.