Web Front-end Optimization-reflow: reduces page Backflow

Preface

Today, during the day, we learned block-level elements. We wanted to continue to learn CSS at night, but we found that we were still a little tired. So we still want to study something that everyone is interested in, front-end optimization.

What is reflow?

This word literally means reflux. Here is an example:

Here we have a dom tree:

 <p>     <span =></span>     <label =>         <input type= value= />      </label>     <label =>         <input type= value= />      </label>     <label =>         <input type= value= />      </label> </p>

If we delete one of the nodes, such as the node in the fourth row, this tree will certainly not fall down so it will form a new dom tree, which is the reflux:

Backflow refers to the process in which the browser recalculates the position and geometric structure of elements in a document to re-render part or all of the documents.
Because reflux may lead to the re-construction of the entire dom tree, it is a major performance killer.

The following operations will cause backflow:

① Change the window size

② Font-size change

③ Add or remove a style sheet

④ Content changes (the input text will result in)

⑤ Activate the CSS pseudo class (: hover)

⑥ Operate the class attribute to add or remove

7. js dom operations

Calculation of ⑧ offset attributes

Configure the style Value

......

Reflow and repaint are the main reasons for slowing down js, especially when reflow is a performance killer, so we should avoid it.

Reduce page reflux

① Change together

If you want to change the style of an element, you can concentrate all the styles on a class and change them once instead of several times:

In the above practices, I recommend the third method, which is weak here, to avoid the first method.

② Use absolute for animation Effects

Because the change of the absolute element has little impact on the reflux of other elements, we should convert the element of the animation effect into absolute.

③ Avoid using table layout (remember to only use layout. We should still use table data)

④ Do not use CSS expressions, performance killer, especially IE.

⑤ Change elements at the end

Because the back flow is top-down, we cannot proceed. The last modification has less impact on the global operation.

⑥ Control the animation Movement

For example, when we drag an element, I operate it only when its x or y coordinate changes to 5px. This reduces smoothness, but improves performance.

Conclusion

Now, we are here today. Next, let's look at some details in CSS.