Leopard

60 FPS pages made easy.

Performant, heuristic scheduler for building user interface (Just 4 kb gzipped).

Leopard eliminates jank from websites by scheduling page interactions automatically. For pages with heavy DOM manipulation, Leopard will batch update related manipulation. For pages with heavy JavaScript calculation, Leopard will schedule the calculation for avoiding jank.

Install

npm install leopard.js

<script src="build/leopard.min.js"></script>

Examples

• Lists with large amount of items
• Image processing

Usage

Schedule user actions with high priority

target.addEventListener('click', function(e) {
  Leopard.put(1, function() {
    // feedback of user actions
  })
})
Leopard.put(10, function() {
  // sync the data, upload analysis data, etc.
})
Leopard.start()

Listen events

Leopard.put(2, function() {
  console.log('priority 2: task')
})
Leopard.put(1, function() {
  console.log('priority 1: first task')
})
Leopard.put(1, function() {
  console.log('priority 1: second task')
})
Leopard.on(1, function () {
  console.log('priority 1: complete')
})
Leopard.start()

Output:

priority 1: first task
priority 1: second task
priority 1: complete
priority 2: task

API

Leopard.put(priority, callback)

priority Integer between 0 to 1000, lower value, higher priority.

Enqueue a task with specific priority to the Scheduler.

Leopard.start([options])

Start Leopard, the options is for optional advanced setting.

Leopard.stop()

Stop Leopard and flush the unfinished tasks in the scheduler queue.

Events

When all tasks in one priority queue finish, Leopard will fire an event. Your can listen to the specific priority queue.

Leopard.on(priority, callback)

Leopard.once(priority, callback)

Options

Concept and Implementation

The algorithm for calculating maximum actions per frames is inspired by TCP congestion control. Take a look of src/congestion.js  for detailed implementation.

The scheduler for scheduling the prioritised actions is based on Fixed priority none-preemptive scheduling. Take a look of src/schedule.js for detailed implementation. You specify the priority of tasks by yourself. Be careful about number of tasks you assign to the scheduler. Too many tasks in a scheduler queue will cause Starvation.

Browser Support

License

MIT