​

React version: 18 Alpha

Tasks that the browser needs to perform per frame

​

Slice scheduling

React schedulers react schedulers react schedulers

Method 1: isInputPending

Wicg.github. IO/IS-input-PE…

Developers need to make judgments today when running scripts that need to display something.

If the script may take a long time to run and the user makes some kind of input while this happens, the browser will need to wait until the script is complete before dispatching the input event. This creates a long delay before responding to input events, and the user experience is not great, so developers often break up long script tasks into smaller chunks to allow user agents to schedule events between blocks. Each time the script executes, it needs to somehow post a message, invoke a combination of requestAnimation frames and requestIdleCallback, or otherwise generate something that can be scheduled, which can then be invoked again at idle. Even in the best case, it can take many milliseconds for the script to run again each time it is generated. So unfortunately, it’s not a great user experience either, because part of the original script was delayed a long time, even though it took that long.

​

To avoid this trade-off, Facebook introduced and implemented the isInputPending() API in Chromium, which improves the responsiveness of web pages without significantly impacting performance.

The goal of the isInputPending API is that it will now allow developers to eliminate this trade-off. Instead of completely succumbing to user agents, and having to bear the cost of one or more event loops when they do, long-running scripts can now run to completion while still remaining responsive.

​

Currently, isInputPending API is only available in Chromium version 87 and is not implemented in other browsers.

2. SetImmediate

The first method is mainly used in the browser of Chromium engine, while the second method gives priority to the compatibility of IE in terms of design

This method is used to place long-running operations in a callback that is executed as soon as the browser completes the rest of the statement.

Only supports IE

MessageChannel

The MessageChannel interface of the Channel Messaging API allows you to create a new MessageChannel and send data through its two MessagePort properties.

In the following example, you can see that a Channel object is instantiated using the MessageChannel constructor. When the iframe is loaded, we use the MessagePort.postMessage method to pass a message and Messagechannel. port2 to the Iframe. The handleMessage handler receives the information from the IFrame (listening for events using MessagePort.onMessage) and puts the data into innerHTML.

var channel = new MessageChannel(); var para = document.querySelector('p'); var ifr = document.querySelector('iframe'); var otherWindow = ifr.contentWindow; ifr.addEventListener("load", iframeLoaded, false); function iframeLoaded() { otherWindow.postMessage('Hello from the main page! ', '*', [channel.port2]); } channel.port1.onmessage = handleMessage; function handleMessage(e) { para.innerHTML = e.data; }Copy the code

setTimeout

You know what I mean. Skip it

Slice of time

Slice interval time is 5ms, the maximum interval time is 300ms, the source code is as follows

// Scheduler periodically yields in case there is other work on the main
// thread, like user events. By default, it yields multiple times per frame.
// It does not attempt to align with frame boundaries, since most tasks don't
// need to be frame aligned; for those that do, use requestAnimationFrame.
let yieldInterval = 5;
let deadline = 0;

// TODO: Make this configurable
// TODO: Adjust this based on priority?
const maxYieldInterval = 300;
let needsPaint = false;
Copy the code

Slice and React interact

Task split

The large task of recursive Reconciler traversing the VDOM is divided into a number of smaller tasks, each responsible for the processing of only one node.

  • workLoopSync or workLoopConcurrent
  • performUnitOfWork

Task suspends, resumes, and terminates

During the creation of the new workInProgress tree, Diff comparison will be made with the corresponding nodes of currentFiber to generate the corresponding FALgs. Meanwhile, the node objects corresponding to currentFiber will also be reused to reduce the overhead brought by the newly created objects. This means that the creation, update, suspend, restore, and terminate operations all occur during the creation of the workInProgress Tree. The workInProgress Tree build process is essentially a loop of executing tasks and creating the next task.

hang

When the first small task is complete, determine whether there is any free time in this frame, suspend the next task, remember the current suspended node, and give control to the browser to execute the higher-priority task.

restore

After the browser has rendered a frame, it determines whether the current frame has any time left, and if so resumes the pending task. If there are no tasks to deal with, the blending phase is complete and the rendering phase can begin.

Termination of

Not every update goes to commit. When a new update is triggered during reconciliation, the next task is executed to determine whether there is a higher priority task to be executed. If there is, the original task to be executed is terminated and a new workInProgressFiber tree building process is started to start the new update process. This avoids repeated update operations

Task priority

The following are the priorities of tasks provided in the source code, except for tasks with no priority, the lower the value of other tasks, the higher the priority

// export const NoPriority = 0; Export const ImmediatePriority = 1; Export const UserBlockingPriority = 2; // Export const NormalPriority = 3; // export const LowPriority = 4; Export const IdlePriority = 5;Copy the code

\

​