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.
npm install leopard.js<script src="build/leopard.min.js"></script>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()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: taskpriority Integer between 0 to 1000, lower value, higher priority.
Enqueue a task with specific priority to the Scheduler.
Start Leopard, the options is for optional advanced setting.
Stop Leopard and flush the unfinished tasks in the scheduler queue.
When all tasks in one priority queue finish, Leopard will fire an event. Your can listen to the specific priority queue.
| Name | Type | Usage | Default |
|---|---|---|---|
| limit | Integer | The limit of actions can be executed per frame. Leopard will adjust this value based on the browser performance. If each actions in scheduler queue costs many resources, then decrease this option. | 1000 |
| strategy | String | The batching strategy. For pages with heavy DOM manipulation (a lot of page re-layout, re-paint), you should set the option to batch. Leopard will batch update and avoid too many page re-paint. Otherwise, keep this option as normal, Leopard will schedule those operation for avoiding jank. |
'normal' |
| perf | Float | Tune the performance. Bigger the number, better perfmance , but lower FPS. | 2.0 |
| autoStop | Boolean | automatically stop if there's no tasks in scheduler queue. | false |
The algorithm for calculating maximum actions per frames is inspired by TCP congestion control.
The scheduler for scheduling the prioritised actions is based on Fixed priority none-preemptive scheduling. 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.
| Chrome | Firefox | IE | Safari |
|---|---|---|---|
| latest | latest | 9+ | latest |
MIT