Page rendering reflux test notes, rendering reflux

Page rendering reflux test notes, rendering reflux

Page re-painting (repaints), reflow (reflow), there have been a lot of introduction on the internet, also just look at the past, did not carefully understand, so now leave some notes

Some useful connections

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

Http://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8% AE %A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/

First, you need to know how the browser renders a page

When the document is loaded for the first time, the browser engine parses the HTML document to construct the DOM tree, and then constructs a rendering tree based on the geometric properties of the DOM element. Each node of the rendering tree has attributes such as size and margin, similar to the box model (because hidden elements do not need to be displayed, the rendering tree does not contain elements hidden in the DOM tree ). After the rendering tree is built, the browser can place the elements in the correct position, and then draw the Page Based on the style attribute of the rendering Tree node.

It is necessary to know the box mode for easy understanding of re-painting and backflow.

Repaints)

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

This is a sentence copied from the Internet. It is easy to understand. It changes the appearance, layout, and dom.

Reflow)

This is the focus

Reflow refers to the process in which Web browsers re-calculate the position and geometric structure of elements in a document to re-render part or all of the documents. Because reflow is a user-led modular operation in the browser, you know how to improve the reflow time and various document attributes (DOM node depth, the effect of css rendering efficiency and various style changes on the reflow time is very helpful for developers. Sometimes, even if only a single element is returned, it may require its parent element and any element that follows it to produce backflow.

From the Internet, according to my understanding, reflux is very easy to operate and can easily affect performance. Therefore, we should pay more attention to avoid backflow as much as possible,

Why does it affect performance?

The reflux of an element leads to the subsequent reflux of all its sub-elements and the ancestor elements that follow in the DOM.

This sentence is also copied on the Internet. I understand that reflux not only affects myself, but also the re-layout and calculation of other elements (including style calculation)

The last sentence is that the backflow has a great impact. You need to understand it and try to make it happen as little as possible.

Which operations will produce backflow?

1. resize the window)

2. Changing the font)

3. add or remove a style sheet (Adding or removing a stylesheet)

4. Content changes. For example, if you enter text in the input box (Content changes, such as a user typing text in an input box)

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

6. Manipulating the class attribute)

7. script DOM (A script manipulating the DOM)

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

9. Setting a property of the style attribute)

10. fixed positioning elements will always flow back when dragging the scroll bar

The copy on the internet can indeed cause backflow.

Why? Because you can modify the style, you may only modify the background, color, or something. It may only be re-painted, not necessarily reflux.

How should we avoid backflow (or as few as possible )?

1. Reduce Unnecessary DOM depth. Because no matter whether you change any level of the DOM node tree, each level of the node tree will be affected-from the root node to the modified child node. Unnecessary node depth will lead to more time for execution of backflow.

2. Streamline css and Remove useless css

3. If you want to change the complex performance, such as the animation effect, implement it outside the flow line. Use position-absolute or position-fixed to implement it.

4. Avoid unnecessary complex css separators, especially using child selectors, or consuming more CPU for selector matching.

5. Since offsetWidth calculation will also cause backflow, save it with a variable.

6. Modify multiple styles at a time, use cssText, or directly add a className

Note: backflow will inevitably cause re-painting, while re-painting may not necessarily cause reflux.

How to test the re-painting and Backflow?

I think there is a test tool Speed Tracer on the Internet, but it cannot be found in chrome web store!

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

Chrome Opera can be tested like this. ff and safari don't know how to get it.

It mainly enables users to see the page rendering and the rendering area is large (but it does not seem to distinguish between re-painting and reflux)

What should I do?

1. Call out the developer management tool (f12)

2. Press esc

3. Select the Rendering Tab

4. Check the Show paint rectangles tab.

If an element is rendered, a green box is displayed, showing the rendered area.

This can be used to test some of the above-mentioned backflow and rendering.

1. fixed positioning, dragging the scroll bar will always flow back

The test shows that the rendering is always in progress, but it's okay to just render it to yourself without affecting other dom

2. Adjust the window size and zoom the browser

The test shows that the whole page is being rendered. This should be a great impact on reflux.

3. delete an element

Before Deletion

Deleted

The test found that the previous elements will be affected, but the previous elements will not be affected.

4. Change the font

Will affect rendering of itself and its following Elements

5. Trigger hover

Only re-painting affects you (such as changing the background and font color)

If it is reflux, it will affect the backflow of all elements under it (such as changing the font and height)

6. Calculate offsetWidth and offsetHeight

This is not tested. The page is rendered -_-!

It is troublesome to test reflux repainting. Currently, no tool has been found to distinguish between repainting and reflux.

However, if you only want to view the page Rendering status, chrome's Rendering is enough.