https://github.com/snewcomer/raf-pool

requestAnimationFrame pool to avoid busyness on the thread
https://github.com/snewcomer/raf-pool

lazyload lazyload-images performance requestanimationframe

Last synced: 1 day ago
JSON representation

requestAnimationFrame pool to avoid busyness on the thread

• Host: GitHub
• URL: https://github.com/snewcomer/raf-pool
• Owner: snewcomer
• Created: 2018-11-26T18:51:28.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T15:25:32.000Z (over 1 year ago)
• Last Synced: 2024-04-28T20:21:09.858Z (5 months ago)
• Topics: lazyload, lazyload-images, performance, requestanimationframe
• Language: TypeScript
• Size: 767 KB
• Stars: 18
• Watchers: 4
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# raf-pool

requestAnimationFrame pool to avoid busyness on the thread

![Download count all time](https://img.shields.io/npm/dt/raf-pool.svg)

[![npm version](https://badge.fury.io/js/raf-pool.svg)](http://badge.fury.io/js/raf-pool)

[![Dependency Status](https://david-dm.org/snewcomer/raf-pool.svg)](https://david-dm.org/snewcomer/raf-pool)

[![devDependency Status](https://david-dm.org/snewcomer/raf-pool/dev-status.svg)](https://david-dm.org/snewcomer/raf-pool#info=devDependencies)

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

------------------------------------------------------------------------------

This library is used in [ember-in-viewport](https://github.com/DockYard/ember-in-viewport) and [ember-infinity](https://github.com/ember-infinity/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:

### Normal



### With raf-pool



Installation

------------------------------------------------------------------------------

```

npm install raf-pool --save

```

Usage

------------------------------------------------------------------------------

## API

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.

```js

import RafPool from 'raf-pool';

const rafPool = new RafPool();

const callback = () => {

  rafPool.add(element.id, callback);

};

callback();

```

### Methods

```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();