Javascript execution is single-threaded. The React architecture used a stack (recursion) to render updates to components. As a result, the JS thread would block the UI thread when there were too many update tasks in the component hierarchy. React’s new architecture, Fiber, provides a fine-grained division of update tasks and a new task scheduling system. This ensures that the React page updates smoothly and responds quickly. This paper mainly starts with the Scheduler package scheduling React update tasks to understand the task scheduling mechanism in React from a macro perspective.

Front knowledge

Event loop

Event loops in javascript refer to event loops

isInputPenging

IsInputPending isInputPending is a new API standard for the browser implemented by Facebook and only implemented in the latest version of Chrome. By calling the navigator. The scheduling. IsInputPending method to get the current whether there is a high priority needs to handle user input, so as to realize the purpose of interrupt js perform respond to user input.

The evolution of task scheduling



When the JS thread executes a long JS task, the UI thread cannot respond to user input quickly, resulting in experience lag and other problems.



Dividing a long-executed task into multiple short-executed tasks can effectively reduce the jammed state of JS execution threads, which introduces another problem of how to divide task slices to produce a better UI experience.



Based on the ideas of the above two modes, if JS can actively obtain user input (execution deadline) in the execution process, actively suspend the execution of the current JS and invoke the execution of JS task again in the next event cycle through the event cycle, In this way, all execution time can be fully utilized to execute tasks and user input (high-priority tasks) can be guaranteed to respond. This is how Scheduler schedules task execution.

Scheduler implementation idea

The following source code analysis is based on the latest code for the React Master branch

When React performs rendering task scheduling, the unstable_scheduleCallback exposed by Scheduler is called to pass in task functions as callback to wait for Scheduler to execute. Source location



When using Concurrent Mode where the incoming callback is performConcurrentWorkOnRoot function, this function is the React start function of the internal schedule update.

The following is the code logic for Scheduler_scheduleCallback



Unstable_scheduleCallback mainly does the following things:

  1. Create execution tasks based on the incoming execution function and priority, and join the asynchronous execution queue or synchronous execution queue
  2. Scheduling task Update

The requestHostCallback executes flushWork by issuing macro tasks through Message Channel, and finally steps into the implementation logic of workLoop scheduling.





WookLoop is the core logic to implement task invocation. It mainly implements the following things:

  1. Slice the executable time (yieldInterval == 5ms)
  2. When the executable time has expired, the task queue is adjusted to invoke the task scheduling logic in the next event loop. The difference here is that the synchronous task queue is called directly through postMessage, and the deferred task queue is called through timer(setTimeout).

Without the source code, we can simply understand the implementation idea of Scheduler’s scheduling task as shown in the figure below, which just realizes the logic of task scheduling slice, priority, high-priority task insertion and so on.

Refer to the link

React Scheduler source code analysis react scheduler declutter isInputPending

                                        

Welcome to follow my wechat official account and learn together