Before react16 introduced the Fiber framework, React uses a recursive comparison of the virtual DOM tree to identify the nodes that need to be changed, and then synchronously update them (Reconcilation). React will hog browser resources during this time, causing user-triggered events to go unanswered.

React hope to be able to thoroughly solve the problem of the main thread take up for a long time, and Fiber was introduced to change this uncontrollable situation, Its rendering/update process is broken up into small pieces of tasks, through reasonable scheduling mechanism to regulate time, specify the task execution time, and reduces the probability of the page stalling, improve page interaction experience. Through Fiber, the Reconcilation process can be interrupted. Giving away CPU execution at the right time which allows the browser to respond to user interactions in a timely manner.

Summary: Synchronous update => occupy resources => browser cannot correspond => Introduce Fiber for time slice => make update process interruptible => improve interactive experience

Let's take a look at what the browser does in a full frame:

1. Input events need to be processed first so that users can get the earliest feedback
2. The next step is to process the timer. Check whether the timer runs out and execute the corresponding callback
3. Process the Begin Frame, that is, the events of each Frame, including window.resize, Scroll, media Query change, and so on
4. The requestAnimationFrame (rAF) is then executed, the rAF callback is executed before each drawing
5. Then proceed to Layout, including calculating the Layout and updating the Layout. What is the style of this element and how should it be displayed on the page
6. Then proceed to Paint, to get the size and position of each node, and the browser fills in the content for each element
7. At this point, all six of the above phases have been completed. next comes the idle phase. Tasks registered in requestIdleCallback can be executed. (requestIdleCallback is the basis for the React Fiber implementation.)

How React was implemented before V16? React works by recursively comparing virtual DOM trees, finding nodes that need to be changed, and updating them synchronously. React always occupies browser resources, causing events triggered by users not to be responded to.

Using depth-first traversal to traverse the node, the execution stack will get deeper and deeper, and cannot be interrupted, after interruption can not be restored. If the recursion is very deep, it will be very slow.

In order to solve the above problem of long time occupation, Fiber is introduced to divide large tasks into multiple small tasks, which can be interrupted and resumed without blocking the main process to execute high-priority tasks.

What is the fiber?

Fiber can be understood as an execution unit or as a data structure.

An execution unit: Fiber can be understood as the division of smaller execution units. It divides a large task into many small tasks. The execution of a small task must be completed at one time without pause, but after a small task is executed, control can be handed over to the browser to respond to the user. So brower doesn't have to wait for the big task to finish before responding to the user.

React first requests a scheduler from the browser. If the browser has free time in a frame, The browser determines if there are any pending tasks, If no, it wil hand control to the browser, If yes, the corresponding task will be executed. When the execution is complete, it determines whether there is time left, If there is time and a task to execute, the next task will proceed, otherwise control will be given to the browser .

A data structure:

Fiber is also known as a data structure. React Fiber is implemented using linked lists. Each Virtual DOM can be represented as a fiber, as shown in the figure below, where each node is a fiber. A Fiber contains attributes like child, Sibling, return and so on. The React Fiber mechanism relies on the following data structures.

requestAnimationFrame

It is a browser-provided API for drawing animations. It requires the browser to call the specified callback function to update the animation before the next redraw.

requestIdleCallback(callback)

RequestIdleCallback enables developers to perform background and low-priority work on the main event loop without delaying critical events, such as animations and input responses. If the normal frame task does not exceed 16ms, it indicates that there is extra free time. In this case, the task registered in requestIdleCallback will be executed.

RequestIdleCallback allocates time slices, and when time runs out, control is returned to the browser. If render is interrupted and the task is not complete, it will continue to apply for the next time slice through requestIdleCallback, and continue to execute when there is time.

The concept of Lane priority

React assigns a priority to each update via lane. Lane can be simply understood as some numbers. The smaller the number, the higher the priority. The update of a higher priority interrupts the update of a lower priority. After the update of a higher priority is complete, the update of a lower priority starts.

Fiber implementation principle

The process of rendering and scheduling from the root node can be divided into two phases: the Render phase and the COMMIT phase.

Render phase

Find the changes on all nodes (These changes are called Effects)=> Create a Fiber tree, one virtual DOM node corresponds to one task => and then produce the effect list, From this we can know which nodes are updated, which nodes are added, and which nodes are removed.

The commit phase

Perform the side effects calculated in the previous phase at one time. Do not pause this phase, otherwise UI updates will be discontinuous.

Summary: React introduces Fiber and uses requestIdleCallback for time slicing to solve the problem of page stalling. Fiber specifically divides a large task into execution units to achieve it. Execute if you have free time, and hand control to the browser if you don't. The remaining fibers are then scheduled to execute according to lane priority.