Shulou(Shulou.com)06/03 Report--

This article shares with you the content of sample analysis of redrawing and reflow in browsers. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Render Tree (render tree)

1. The browser parses the acquired HTML code into a DOM tree, each tag in the HTML is a node in the DOM tree, and the root node is our commonly used document object. The DOM tree contains all the HTML tags, including display:none hiding, elements dynamically added by JS, etc.

two。 The browser parses all styles (user-defined css and user agent) into style structures, and removes styles that the browser cannot recognize in the parsing process. For example, IE removes the style beginning with-moz, while Firefox removes the style starting with _.

3.DOM tree and style structure are combined to build render tree (render tree). Render tree is similar to DOM tree, but it is very different. Render tree can recognize styles, each node of render tree has its own style, and render tree does not contain hidden nodes (such as display:none nodes and head nodes), because these nodes will not be used for rendering and will not affect rendering.

two。 Definition of redrawing and reflux

Redraw: when the style of the current element (background color, font color, etc.) changes, we only need to re-render the changed element, redrawing has little impact on the performance of the browser, so generally do not consider.

Redraw occurs: change the appearance and style of the container, such as background:black, etc. Change the appearance, do not change the layout, do not affect other dom.

Reflux: the process by which browsers recalculate the location and geometry of elements in a document in order to re-render some or all of the document.

Because backflow can lead to the reconstruction of the entire dom tree, it is a big killer of performance

The backflow of an element results in the subsequent backflow of all its child elements and the ancestral elements that follow in the DOM.

3. Trigger the operation of reflux

1. Resize the window (Resizing the window)

two。 Change font (Changing the font)

3. Add or remove style sheets (Adding or removing a stylesheet)

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

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

6. Manipulate the class property (Manipulating the class attribute)

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

8. Calculate offsetWidth and offsetHeight properties (Calculating offsetWidth and offsetHeight)

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

The element positioned by 10.fixed will always flow back when you drag the scroll bar

How to avoid backflow

1. Change together: if you want to change the style of an element, you can focus all the styles on one class, instead of several changes.

two。 For animated effects, use absolute

3. Avoid using table layouts

4. Do not use CSS expressions

5. Change the element at the end

6. When the animation moves, you need to control

For example, when we drag an element, I only operate when its x or y coordinates change 5px, which reduces smoothness, but improves performance.

7. If you want to change complex representations, such as animations, implement it outside this flow line. Use position-absolute or position-fixed to implement it.

8. Since calculating offsetWidth also causes reflux, save it with a variable

9. When we need to add nodes to the document, we can solve this problem by means of document fragments. When we need to add new elements to the DOM, we first put them in a container, and then add them uniformly, so that only one return is generated.

Thank you for reading! This is the end of the article on "sample analysis of redrawing and reflow in browsers". I hope the above content can be helpful to you, so that you can learn more knowledge. If you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.