You may not know much about the redrawing and rearrangement of the viewer and the resolution of the selector. Even though I don’t know this part, I can type the code. But knowing that in the future can help us to better type the code and avoid making some stupid mistakes that shouldn’t be made.

The principle of the bottom layer of the visitor

1. How does the viewer parse CSS selectors?

In the process of generating the render number, the render engine iterates the DOM number based on the information provided by the selector, finds the corresponding DOM node and appends the style rule to it. Take a look at some style picker code and some HTML to apply the style to:

.mod-nav h3 span {
            font-style: 16px;
        }
Copy the code
< div class = "mod - nav" > < header > < h3 > < span > title < / span > < / h3 > < header > < / div > < div > < ul > < li > project a < / li > < li > project a < / li > <li> </li> </li> </ul> </div>Copy the code

How does the rendering engine traverse the DOM tree based on the above style picker? Should I match from left to right, or from right to left? For a more intuitive observation, we first draw the DOM number into a graph

Then let’s compare the two sequential matches:

From left to right :. Mod-nav => h3 => span

  1. Go through all the elements and find the node with the.mod-nav class
  2. from.mod-navStart traversing all descendant nodesheader.div.h3.ul. After going through all the descendants, we know that there’s only one H3 for the entire descendants
  3. findh3And continue to iterateh3All descendant nodes of thespan.

Problem: there is a lot of traversal of the descendant nodes of attribute structure, which is very expensive!

In the case of hundreds or thousands of nodes in a DOM tree on a real page, this convenient method is very inefficient and not suitable at all.

From left to right :span => h3 =>.mod-nav

  1. Find all of them firstspanNodes and then based on eachspanLook uph3
  2. byh3Look up.mod-navThe nodes of the
  3. Finally, touch the root elementhtmlEnd the branch traversal…

Matching rules from right to left, only the first time will traverse all elements to find nodes, and the rest is to see whether parents and grandparents meet the conditions of the selector, matching efficiency greatly improved!

Therefore, the viewer follows the “right to left” rule to resolve CSS selectors!

2. How do browsers render interfaces?

Different rendering engines have slightly different methods, but the general process is the same. Here is the chrome rendering engine’s rendering process to illustrate:

The flow shown above is as follows:

  1. Get the HTML file and parse it to generate a DOM Tree
  2. Parsing HTML also parses CSS and generates Style Rules.
  3. Generate a Render Tree based on the DOM Tree and style rules
  4. Perform a Layout, that is, assign each node an exact coordinate position that should be displayed on the screen
  5. Do a Paint (redraw), traverse the render tree nodes, and call the GPU to render the elements

3. What are Repaint and reflow?

rearrangement

A rearrangement is when part or the entire rendering tree needs to be re-analyzed and the node sizes recalculated.

This takes the form of regenerating the layout and rearranging elements.

redraw

A redraw is due to a change in the geometry of the node or a change in style (for example, changing the element background color).

The appearance of some elements is changed.

The relationship between the two

Redrawing does not necessarily result in rearrangement, rearrangement must trigger redrawing. Each page requires at least one backflow + redraw. (Initialize render)

Rearranging and redrawing can be expensive, and frequent rearranging and redrawing can ruin the user experience and make the interface look sluggish. We need to avoid triggering rearrangements and redraws as often as possible, especially rearrangements

4. When will reordering be triggered?

When does the rearrangement happen?

  1. Add or remove visible DOM elements
  2. Element position changes;
  3. Element size changes — margins, padding, borders, width, and height
  4. Content changes – such as changes in text or image size resulting in changes in the width and height of the calculated values;
  5. Page render initialization;
  6. The browser window size changes — when the resize event occurs;

5. Optimization of the redrawing and rearrangement of the tourist

Consider the following code redraw and rearrange process!

Smart Browser:

You can see from the last example that a few lines of simple JS code caused four reorders and six redraws.

We also know that rearrangement costs a lot of money, if every JS operation is rearranged and redrawn, the browser may not be able to bear it! So the browser optimizes these operations. The browser maintains a queue, places all operations that cause reordering and redrawing in this queue, and when the number of operations in the queue reaches a certain amount of time or interval, the browser flushes the queue and performs a batch. This turns multiple rearrangements and redraws into a single rearrangement and redraw.

There are browser optimizations, but sometimes we write code that forces the browser to flush the queue ahead of time, so browser optimizations don’t work

For example, when you request some style information from the browser (to ensure that the results are accurate), the browser flush queue is asked

  1. offsetTop, offsetLeft, offsetWidth, offsetHeight
  2. scrollTop/Left/Width/Height
  3. clientTop/Left/Width/Height
  4. Request the getComputedStyle ()
  5. .

Guess what the page looks like:

Here, the div box is printed with the width set and the one without the box is completely different. Interested students can leave a message in the comments section

6. Redraw and rearrange angles, how should we optimize page rendering performance?

Optimize page rendering performance from a perspective: minimize redraws and rearrangements

There are mainly several ways to avoid

  • Change styles centrally (so that you can take advantage of the browser’s optimizations and rearrange and redraw in one go)
  • Try to avoid fetching style values such as element offsetTop in the traversal loop
  • Use transform to change animation effect, instead of left top transform (rotation map, etc.)
  • Using Document Fragments

A documentFragment is a container object (stored in memory) that holds multiple elements. When one or more elements are updated, the page is not updated. When all the elements saved in the documentFragment container have been manipulated, the page will not be updated until it is inserted into the page.

Here are two ways to add elements to a page:

The first method: a page that is inserted with each update will be rearranged unnecessarily if the number of elements inserted is large enough

The second method: use document fragments and add them uniformly. No matter how many child elements are inserted, only one rearrangement and redraw can be triggered

(Vue source code, for DOM operations, the use of a large number of document fragments)

conclusion

About the principle of the bottom layer of the tourist, temporarily said that this. I will add more details. If there are deficiencies, welcome to the comments section.