Understand the principle of React scheduler without a single line of code

Hi everyone, I'm Kasong.

Scheduler (Scheduler) is an important part React

At the same time, it is also an independent package. Any continuous and interruptible process can be Scheduler , such as:

const work = {count: 100};

function doWork(work) {
  work.count--;
  console.log('do work!')
}

work satisfies two conditions:

1. Work is continuous. It needs to be executed 100 times in total, and doWork
2. Work can be interrupted. After the interruption is resumed, continue to execute work.count

Work that meets these two conditions can be scheduled Scheduler

After scheduling, Scheduler internally generate the corresponding task , and executed at the right time task.callback :

const task1 = {
  // 过期时间 等于 当前时间 + 优先级对应时间
  expirationTime: currentTime + priority,
  callback: doWork.bind(null, work)
}

This article will explain the implementation principle of Scheduler Knowing that you don't like to look at large sections of code, so there is no line of code in this article. At the end of the article, there is Scheduler . If you are interested, you can check it out.

Opening~

Work flow overview

Scheduler is as shown in the figure below, which will be explained in detail next:

There are two confusing concepts in Scheduler

1. delay

delay represents the task need to delay execution time . Configuring the delay of task will first enter timerQueue in.

When the corresponding time of delay task will be transferred to taskQueue .

2. expirationTime

expirationTime representatives Task expiration time .

Not all task will be configured with delay , delay without task will directly enter taskQueue . This leads to taskQueue may exist in multiple task .

How to decide which task.callback to execute first? Scheduler based on task.expirationTime , the smaller the value, the higher the priority.

If task.expirationTime less than the current time, not only will the priority be the highest, but task.callback will not be interrupted.

Summarize several situations of task

1. Configure delay and delay not expired: task must not be executed
2. Configure delay and expire, or do not configure delay of task , and task.expirationTime not expired: task.expirationTime sorting according to 061c9334f432bb, execute in order
3. task.expirationTime expired by task : the highest priority, synchronous, non-interruptible

Detailed workflow

After replacing the process overview diagram with the Scheduler , it is as follows:

The complete workflow is as follows:

1. Execute Scheduler.scheduleCallback generate task

According to passes the delay parameter , the generated task will enter timerQueue or taskQueue .

2. When timerQueue the first task after the delay time has expired, execution advanceTimers the due Task from timerQueue moved in taskQueue in

Wherein, timerQueue , taskQueue data structure is minor vertex stack implemented priority queue.

3. Next, requestHostCallback method, he will in the new execution of the macro task workLoop method

callback in the macro task method of many, Scheduler use in a browser environment default MessageChannel achieve.

MessageChannel is not supported, it will be downgraded to setTimeout . Node or old version of IE will use setImmediate .

4. workLoop method will cyclically consume taskQueue in task (that is, execute task.callback ) until one of the following conditions is met, and the cycle is interrupted:

• taskQueue does not exist in task
• Time slice exhausted

5. After the loop is interrupted, if taskQueue not empty, go to step 3. If timerQueue not empty, go to step 2

Summarize

To sum up, the complete execution process of Scheduler

1. taskQueue production (moved from timerQueue or executed scheduleCallback generation) to the process of consumption (that is, the gray part in the figure), this is an asynchronous loop
2. taskQueue specific consumption process (i.e., the workLoop execution method), which is a synchronization cycle

If you want to know how to use Scheduler React, you can refer to 100 lines of code to implement the React core scheduling function

Welcome to join human high-quality front-end framework group , take flight