The Diff algorithm

People familiar with React know that there is a core algorithm in React called diff algorithm. The Web interface is made up of DOM trees, and different DOM trees render different interfaces. React uses the Virtual DOM to represent the DOM tree. The Diff algorithm is used to compare the differences between virtual DOM trees and update the parts of the interface that need updating. The perfect combination of the Diff algorithm and virtual DOM is called a Reconciler, and it is the absolute weapon in the React siege. With reconciler, developers can work with the real DOM tree without having to deal with it, simply by describing the interface state to React, which helps you effectively do real DOM manipulation.

So what’s so good about Fiber?

Why Fiber appeared

I don’t know if you have ever encountered such a situation, when you click a button on a page, you feel that the page does not respond, so you suspect that the computer is not crashed, and then you quickly cut out the browser, found that the computer did not crash, so cut back to the browser, this time only to find that the page has finally updated. Why is this happening? In most cases, the main thread of the browser is not responsive to user actions or the interface is not updated as soon as possible because the browser is busy executing relevant JS code. The following diagram illustrates this phenomenon. Your company has only one programmer (main thread). When the programmer executes your code, he is in an immersive programming state, unable to respond to other external events. It’s like the browser is busy executing JS code and not doing things like page updates.

The original Stack Reconciler is like a function that is executed recursively, and the process of calling a child component from a parent component is a recursive execution, which is why it is called a Stack Reconciler. When we call setState, React iterates from the root node to find all the differences, which can take a long time for a very large DOM tree. During this time, any interaction and rendering will be blocked, giving the user the feeling of being “dead”.

How does Fiber do asynchronous rendering

When you’re doing display work, you’ll often hear a target called 60 frames, which refers to the update rate of the image, which is 60 times per second. This is because at 60 frames, the page looks smooth to the eye, with no obvious lag. 60 updates per second means that the page needs to be updated every 16ms. If the time to update the page is less than 16ms, there will be a little time to perform other tasks before the next update. As long as the interface is updated within 16ms, the smoothness of the page will not be affected at all. The core of Fiber uses the 60-frame principle to implement a cyclic task scheduling algorithm based on priority and requestIdleCallback.

function fiber(For the rest of) {
 if(Remaining time > time required for the task) {do the task; }else{ requestIdleCallback(fiber); }}Copy the code

Fiber can set different priorities for different tasks, a high-priority task is need to show on the page immediately, you are in the input box input text, for example, are you sure you want your fingers on the keyboard to knock down each buttons, input box can respond immediately, so that you can know your input is correct, is valid. Low priority tasks are things like data coming in from the server that need to update the page, such as number of likes +1 or comments +1. This is not an urgent update, 100-200ms delay doesn’t make much difference and can be handled later. Fiber dynamically adjusts task scheduling based on task priority, prioritizing high-priority tasks.

{ 
 Synchronous: 1.// The synchronization task has the highest priority
 Task: 2.// The task that is being executed
 Animation 3./ / animation
 High: 4.// High priority
 Low: 5.// Low priority
 Offscreen: 6.// The current off-screen update has the lowest priority
}
Copy the code

Within the Fiber architecture, there is a data structure that is simply called Fiber, which is why the new Reconciler is called Fiber. Fiber is a JS object with stateNode, Tag, return, Child, Sibling and alternate properties.

Fiber = {
 tag // Mark the progress of the task
 return / / the parent node
 child / / child nodes
 sibling // Sibling nodes
 alternate // Change record. };Copy the code

It can be seen that Fiber is based on a linked list structure, with one pointer pointing to its parent node point node and brother node. In the process of diff, it traverses according to the connection relationship of nodes.

Possible problems with Fiber

Updates are phased in Fiber, with the Reconciliation phase, which calculates the difference between the dom tree before and after, and the Commit phase, which renders updates to the page. The first phase is interruptible because it can take a long time and therefore needs to be paused to work on other higher-priority tasks, while the second phase is not interrupted and updates are rendered to the page in one go.

componentWillMount
componentWillReceiveProps
componetWillUpdate
getDerivedStateFromProps
getSnapshotBeforeUpdate

There is also the problem of hunger, which means that if high-priority tasks keep plugging in, so that low-priority tasks don’t get a chance to execute, it’s called hunger. The official solution to this problem is to try to mitigate it by reusing what has already been done. Officials are believed to be trying to come up with a better way to solve the problem.

The text/Xss

Sound/fluorspar

This article has been authorized by the author, the copyright belongs to chuangyu front. Welcome to indicate the source of this article. Link to this article: knownsec-fed.com/2018-10-23-…

To subscribe for more sharing from the front line of KnownsecFED development, please search our wechat official account KnownsecFED. Welcome to leave a comment to discuss, we will reply as far as possible.

Thank you for reading.