Page rendering reflow test notes_html/css_WEB-ITnose

Page repaints (repaints) and reflow (reflow) have been introduced a lot on the Internet. I just looked at them before and didn’t understand them carefully, so I will take some notes now

Some useful links

http://www.zhangxinxu.com/wordpress/2009/10/attention-reflow-to-make-web-faster/

http://www. zhangxinxu.com/wordpress/2010/01/Reflow and redraw: Does CSS performance make JavaScript slow down? /

First of all, you need to roughly know how the browser renders the page

When the document is first loaded, the browser engine will parse the HTML document to build a DOM tree, and then based on the DOM elements Geometry properties build a tree for rendering. Each node of the rendering tree has attributes such as size and margin, similar to the box model (since hidden elements do not need to be displayed, the rendering tree does not contain hidden elements in the DOM tree). When the rendering tree is constructed, the browser can place the elements in the correct location, and then draw the page based on the style attributes of the rendering tree nodes.

Anyway, you need to know the box mode to understand redrawing and reflowing

Repaints

When some elements in the render tree need to update attributes, and these Attributes only affect the appearance and style of the element, but do not affect the layout, such as background-color. It is called redrawing

This is a sentence copied from the Internet, and it is easy to understand. It changes the appearance, does not change the layout, and does not affect other dom

Reflow )

This is the point

The term reflow refers to the process by which a web browser recalculates the position and geometry of elements in a document in order to re-render part or all of the document. Because reflow is a user-led modular operation in the browser, you know how to improve the reflow time and know various document properties (DOM node depth, CSS rendering efficiency, various The impact of style changes) on reflow time is very helpful for developers. Sometimes, even if only a single element is reflowed, its parent element and any elements that follow it may also be required to reflow

Copied from the Internet, according to my understanding, reflow is very easy to operate. , and it can easily affect performance, so we have to pay more attention and try not to cause reflow.

Then why does it affect performance?

The reflow of an element causes all its child elements and the DOM The subsequent reflow of the ancestor elements that follow.

This sentence was also copied from the Internet. My understanding is that the reflow not only affects itself, but also affects the rearrangement and calculation of other elements. (Including the calculation of styles)

Anyway, the final summary is that reflow has a great impact. You must understand it and try to minimize it from happening

What operations will cause reflow?

1. Resizing the window

2. Changing the font

3. Adding or removing a stylesheet )

4. Content changes, such as a user typing text in an input box (Content changes, such as a user typing text in an input box)

5. Activate CSS pseudo-classes, such as: hover (Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling))

6. Manipulating the class attribute the class attribute)

7. A script manipulating the DOM (A script manipulating the DOM)

8. Calculating offsetWidth and offsetHeight attributes (Calculating offsetWidth and offsetHeight)

9. Settings The value of the style attribute (Setting a property of the style attribute)

10. Fixed positioned elements will always reflow when dragging the scroll bar

Copied from the Internet, it is indeed possible Caused reflow

Why is it possible? Because modifying the style may only modify the background, color, etc., it may just redraw, not necessarily reflow

How should we avoid reflow (or to cause as little reflow as possible)?

1. Reduce unnecessary DOM depth. Because no matter you change any level in the DOM node tree, it will affect every level of the node tree - from the root node all the way to the modified child node. Unnecessary node depth will cause more time to be spent performing reflow.

2. Streamline css and remove useless css

3. If you want to change complex performance, such as animation effects, then please implement it outside this flow line. Use position-absolute or position-fixed to achieve it.

4. Avoid unnecessary complex CSS selectors, especially using sub-selectors, or consuming more CPU to do selector matching.

5. Since calculating offsetWidth will also cause reflow, then use a variable to save it

6. To modify multiple styles at one time, use cssText, or directly add a className

Note: Reflow will definitely cause redraw, but redraw will not necessarily cause reflow.

How to test redraw and reflow?

I saw online that there is a testing tool Speed ​​Tracer, but it can no longer be found in the chrome web store!

Then I saw an article about how to check the page rendering address http://www.ghugo.com/chrome-rendering-tools-1/

Chrome Opera can test it like this, ff, I don’t know how to do it in Safari

It mainly allows the user to see that the page is rendered and how big the rendering area is (but it seems that it cannot distinguish between redraw and reflow)

How to operate?

1. Call up the developer management tool (f12)

2. Press the esc key

3. Select the Rendering tab

4. Check Show paint Rectangles tab

As shown in the figure

If you operate it, you will find that if an element is rendered, a green box will appear, showing the rendering The area

This can be used to test some of the reflow and rendering mentioned above

1.fixed positioning, dragging the scroll bar will keep reflowing

The test found that it is indeed rendering all the time, but fortunately it is only rendering to itself and does not affect other doms

2. Adjust the window size and zoom the browser

The test found that the entire page is being rendered, which should be a reflow that has a greater impact

3. Delete the element

before deleting it

Deleted

The test found that it will affect the elements after it, but will not affect the previous elements

4. Change the font

It will affect the rendering of itself and the elements below it

5. Trigger hover

If you just redraw, it will only affect itself (such as changing the background, font color)

If it is reflow, it will affect the reflow of the elements below it (such as changing the font, height)

6. Calculate offsetWidth and offsetHeight

This has not been tested The page is rendered -_-!

Testing reflow and redrawing is a troublesome thing. I haven’t found a tool that can distinguish redrawing and reflowing yet

But if you just want to view For page rendering, chrome’s Rendering is enough