Web page re-painting, reflux, and solutions

Web page re-painting, reflux, and solutions

The browser displays the webpage processing flowchart:

Procedure:

1. the browser parses the obtained HTML code into a DOM tree. Each tag in the HTML is a node in the DOM tree, and the root node is a common document object. The DOM tree contains all HTML tags, including display: none hidden, and elements dynamically added using JS;

2. the browser parses all styles (User-Defined css and user agent) into style structs, and removes unrecognizable styles from the browser during the parsing process. For example, IE removes styles starting with-moz, firefox removes the style starting;

3. after the combination of the DOM tree and style struct, the render tree is constructed. The render tree is similar to the DOM tree, but the difference is great. The render tree can recognize styles, each node of the render tree has its own style, and the render tree does not contain hidden nodes (such as display: none nodes and head nodes), because these nodes are not used for rendering, and does not affect the presentation.

Note: The hidden elements of visibility: hidden will still be contained in the render tree, because visibility: hidden will affect the layout (layout) and occupy space. According to the css2 standard, each node in the render tree is called Box demensions. The page elements are understood as a Box with padding, margins, borders, and locations.

4. Once the render tree is built, the browser can draw pages based on the render tree.

Redraw

Repainting is a browser action triggered by an element's appearance change, such as changing the visibility, outline, and background color attributes. The browser re-draws the element based on its new attributes to display the new appearance of the element.

Reflux

Reflux is a more obvious change. It can be understood that the render tree needs to be re-computed. Each page requires at least one backflow, that is, when the page is loaded.

Note: backflow will inevitably cause re-painting, but re-painting does not necessarily cause reflux.

Triggering Backflow

1. resize the window );

2. Change the font );

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

4. content changes, such as text input 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 specified duo class of a silibing ));

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 ).

How to Reduce backflow and re-painting

1. directly change the className. If the style is changed dynamically, use cssText (consider browsers that are not optimized );

// Difficult syntax var left = 1; var top = 1; el. style. left = left + "px"; el. style. top = top + "px"; // el. className + = "className1"; // el.style.css Text + = "; left:" + left + "px; top:" + top + "px ;";

2. "offline processing" is performed on the operation elements, and an update is performed after the processing;

Use DocumentFragment for caching, triggering a backflow and re-painting;

Use the display: none attribute to only trigger two backflow and re-painting;

The cloneNode (true or false) and replaceChild technologies are used to trigger a backflow and re-painting.

3. Do not frequently access the properties that will cause the browser to flush the queue. If you are sure you want to cache, use the cache;

// Bad syntax for (loop) {el. style. left = el. offsetLeft + 5 + "px"; el. style. top = el. offsetTop + 5 + "px";} // write var left = el. offsetLeft, top = el. offsetTop, s = el. style; for (loop) {left + = 10; top + = 10; s. left = left + "px"; s. top = top + "px ";}

4. Remove elements from the animated stream to reduce the scale of the reflux render tree;

    $("#block1").animate({left:50});    $("#block2").animate({marginLeft:50});

5. Try to change the class at the very end of the DOM tree (the reflux range can be restricted );

6. Avoid setting multi-layer inline styles (merging styles in an external class only produces one backflow );

7. Apply the animation effect to elements whose position attribute is absolute or fixed (Apply the animation effect to an element whose position attribute is absolute or fixed., They do not affect the layout of other elements, so they will only lead to re-painting, rather than a complete backflow. In this way, the consumption will be lower .);

8. Sacrifice smoothness for speed (Opera also recommends that weSacrifice smoothness in exchange for speedIt means that you may want to move an animation one pixel at a time, but if the animation and subsequent backflow use a CPU of 100%, the animation will seem to be beating, because the browser is struggling with the update backflow. The animation element moves 3 pixels each time on a very fast machine and may seem to have a low level of smoothness, but it does not cause CPU jitter on slow machines and mobile devices .);

9. avoid using table data (before the layout is fully established, tables often require multiple barriers, because table is a and rare element that can affect the display of DOM elements that have already entered before them .);

10. Avoid using JavaScript expressions of css (because they re-calculate the document, or part of the document, and return each time. As we can see from a lot of things: triggering backflow, it can generate thousands of times per second .).

Test instance 1:

The test code does not change the element rules, size, and position. Only the color is changed, so no backflow exists. Only the re-painting test is performed. The Code is as follows:

    <body>        <script type="text/javascript">            var s = document.body.style;            var computed;            if (document.body.currentStyle) {              computed = document.body.currentStyle;            } else {              computed = document.defaultView.getComputedStyle(document.body, '');            }             function testOneByOne(){          s.color = 'red';;          tmp = computed.backgroundColor;          s.color = 'white';          tmp = computed.backgroundImage;          s.color = 'green';          tmp = computed.backgroundAttachment;        }                function testAll() {          s.color = 'yellow';          s.color = 'pink';          s.color = 'blue';                    tmp = computed.backgroundColor;          tmp = computed.backgroundImage;          tmp = computed.backgroundAttachment;        }        </script>            color test <br />        <button onclick="testOneByOne()">Test One by One</button>        <button onclick="testAll()">Test All</button>    </body>

Example 2:

It is similar to the code for the first test, but added a change to layout to test reflux.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1    /DTD/xhtml1-transitional.dtd">    
To avoid backflow and re-painting, we can optimize the performance from the code perspective. Therefore, we should try to use the appeal method to reduce the number of page backflow and re-painting times when writing code.