requestAnimationFrame pool to avoid busyness on the thread

Downloads in past


0.1.44 years ago6 years agoMinified + gzip package size for raf-pool in KB


requestAnimationFrame pool to avoid busyness on the thread
Download count all time npm version
Dependency Status devDependency Status

Why use an administrator to manage all the elements on my page?

This library is used in ember-in-viewport and ember-infinity.
window.requestAnimationFrame schedules and performs an animation before the next repaint, thus taking the guesswork out of being in sync with the user's browser readiness. It will perform the callback function 60 times per second, thus making the main thread quite busy. If you have hundreds of images on the page, it can be very painful on memory when you have hundreds of recurring handles on requestAnimationFrame. This small library can dramatically reduce memory usage as it uses a single requestAnimationFrame.
While observing 20 images on a page:


With raf-pool


npm install raf-pool --save



  1. elementId: DOM Node identifier
  2. callbackFn
- callback function to perform logic in your own application
- Note, your callback function should `add` back the method to the raf-pool service.
import RafPool from 'raf-pool';

const rafPool = new RafPool();

const callback = () => {
  rafPool.add(element.id, callback);



```js // add an element to static administrator rafPool.add(element.id, callback);
// Use in cleanup lifecycle hooks (if applicable) from the element being observed rafPool.remove(element.id);
// Use in cleanup lifecycle hooks of your application as a whole // This will remove the in memory data store holding onto all of the observers rafPool.reset();