DEV Community

loading...
Cover image for Use isInputPending API for better scheduler

Use isInputPending API for better scheduler

Yisar
Chinese student, Creator of fre and other libraries.
・1 min read

As you know, fre is an asynchronous rendering UI library that similar to react. The rendering process of components can be interrupted

Alt Text

The priority scheduling of react first enumerates and classifies events, which is too much code.

How can fre implement priority without enumerating event names?

isInputPending()

Inspired by react fiber, Facebook has written a proposal that when the browser is in the input pending state, you can interrupt your JS loop

while(navigator.scheduling.isInputPending()){
  setTimeout(reconcileWork) open a new tick
}
Enter fullscreen mode Exit fullscreen mode

We also can use this API to divide priorities, such as this:

dom.addEventListener('input', (e) => {
  let isHighPriority = navigator.scheduling.isInputPending()
  setState(count + 1, isHighPriority)
})
Enter fullscreen mode Exit fullscreen mode

It's done. We have a priority system with just one API.

https://github.com/yisar/fre/pull/226

At present, it has been shipped in fre, and we will do more based on it in the future.

It's worth mentioning that fre now has three priorities

  1. high priority => input pending => immediately
  2. common priority => time slicing => 16ms
  3. low priority => component update => It's been interrupted

If you are interested in asynchronous rendering or react internal implementation principles, welcome to fre's GitHub

https://github.com/yisar/fre

Discussion (0)