High-performance WEB development, page rendering, redrawing, and reflow.-HTML Tutorial-php.cn

Page rendering process

Before discussing page redrawing and reflow. You need to have some understanding of the page rendering process, how the page displays HTML combined with CSS, etc. to the browser. The following flow chart shows the browser's processing flow for page rendering. Different browsers may be slightly different. But basically they are similar.

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 our commonly used document object ( tag ). The dom tree is the html structure we see using tools such as firebug or IE Developer Toolbar. It contains all html tags, including display:none hidden, and elements dynamically added using JS.

2. The browser parses all styles (mainly including css and browser style settings) into style structures. During the parsing process, styles that the browser cannot recognize will be removed. For example, IE will remove styles starting with -moz. Firefox will remove the styles starting with _.

3. The dom tree and the style structure are combined to build a render tree. The render tree is somewhat similar to the dom tree, but in fact there is a big difference. The render tree can recognize the style. Each node in 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 will not be used for rendering and will not affect rendering, they will not be included in the render tree. . Note that elements hidden by visibility:hidden will still be included in the render tree, because visibility:hidden will affect the layout and occupy space. According to the standards of CSS2, each node in the render tree is called a box (Box dimensions), and all the attributes of the box are: width, height, margin, padding, left, top, border, etc.

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

Reflow and Redraw

1. When part (or all) of the render tree needs to be rebuilt due to changes in the size, layout, hiding, etc. of the elements. This is called reflow (actually, I think it's simpler and clearer to call it rearrangement). Every page needs to be reflowed at least once, which is when the page loads for the first time.

2. When some elements in the render tree need to update attributes, these attributes only affect the appearance and style of the elements, but will not affect the layout, such as background-color. It is called redrawing.
Note: As can be seen from the above, reflow will definitely cause redraw, but redraw will not necessarily cause reflow.

What operations will cause redrawing and redrawing?
In fact, any operation on the elements in the render tree will cause reflowing or redrawing, such as:

1. Adding and deleting elements (reflow + redrawing)

2. Hiding elements, display:none (reflow + redraw), visibility: hidden (only redraw, no reflow)

3. Move elements, such as changing top and left (jquery's animate method is that changing top and left will not necessarily affect reflow) , or move the element to another parent element. (Redraw + Reflow)

4. Operations on style (different attribute operations have different effects)

5. There is also a user operation, such as changing the browser size, changing the browser font size, etc. (Reflow + Redraw)

Let’s see how the following code affects reflow and redraw:

var s = document.body.style; 
s.padding = "2px"; // 回流+重绘 
s.border = "1px solid red"; // 再一次 回流+重绘 
s.color = "blue"; // 再一次重绘 
s.backgroundColor = "#ccc"; // 再一次 重绘 
s.fontSize = "14px"; // 再一次 回流+重绘 
// 添加node，再一次 回流+重绘 
document.body.appendChild(document.createTextNode(&#39;abc!&#39;));

Copy after login

Please note how many times I used above.

Speaking of which, everyone knows that reflow is more expensive than redrawing. The cost of reflow is related to how many nodes in the render tree need to be rebuilt. Suppose you directly operate the body, such as inserting an element at the front of the body, it will It will cause the entire render tree to reflow, which will of course be more expensive. However, if you insert an element after the body, it will not affect the reflow of the previous elements.

聪明的浏览器

从上个实例代码中可以看到几行简单的JS代码就引起了6次左右的回流、重绘。而且我们也知道回流的花销也不小，如果每句JS操作都去回流重绘的话，浏览器可能就会受不了。所以很多浏览器都会优化这些操作，浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会把flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

虽然有了浏览器的优化，但有时候我们写的一些代码可能会强制浏览器提前flush队列，这样浏览器的优化可能就起不到作用了。当你请求向浏览器请求一些style信息的时候，就会让浏览器flush队列，比如：
1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop/Left/Width/Height
3. clientTop/Left/Width/Height
4. width,height
5. 请求了getComputedStyle(), 或者 ie的 currentStyle

当你请求上面的一些属性的时候，浏览器为了给你最精确的值，需要flush队列，因为队列中可能会有影响到这些值的操作。

如何减少回流、重绘

减少回流、重绘其实就是需要减少对render tree的操作，并减少对一些style信息的请求，尽量利用好浏览器的优化策略。具体方法有：

1. 不要1个1个改变元素的样式属性，最好直接改变className，但className是预先定义好的样式，不是动态的，如果你要动态改变一些样式，则使用cssText来改变，见下面代码：

// 不好的写法
var left = 1;
var top = 1;
el.style.left = left + "px";
el.style.top  = top  + "px";
// 比较好的写法 
el.className += " className1";
// 比较好的写法 
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

Copy after login

2. 让要操作的元素进行"离线处理"，处理完后一起更新，这里所谓的"离线处理"即让元素不存在于render tree中，比如：
a) 使用documentFragment或div等元素进行缓存操作，这个主要用于添加元素的时候，大家应该都用过，就是先把所有要添加到元素添加到1个div(这个div也是新加的)，
最后才把这个div append到body中。
b) 先display:none 隐藏元素，然后对该元素进行所有的操作，最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。所以只要操作只会有2次回流。

3 不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，就先读取到变量中进行缓存，以后用的时候直接读取变量就可以了，见下面代码：

// 别这样写，大哥
for(循环) {
    el.style.left = el.offsetLeft + 5 + "px";
    el.style.top  = el.offsetTop  + 5 + "px";
}
// 这样写好点
var left = el.offsetLeft,top  = el.offsetTop,s = el.style;
for(循环) {
    left += 10;
    top  += 10;
    s.left = left + "px";
    s.top  = top  + "px";
}

Copy after login

4. 考虑你的操作会影响到render tree中的多少节点以及影响的方式，影响越多，花费肯定就越多。比如现在很多人使用jquery的animate方法移动元素来展示一些动画效果，想想下面2种移动的方法：

// block1是position:absolute 定位的元素，它移动会影响到它父元素下的所有子元素。

// 因为在它移动过程中，所有子元素需要判断block1的z-index是否在自己的上面，
// 如果是在自己的上面,则需要重绘,这里不会引起回流
$("#block1").animate({left:50});

// block2是相对定位的元素,这个影响的元素与block1一样，但是因为block2非绝对定位
// 而且改变的是marginLeft属性，所以这里每次改变不但会影响重绘，
// 还会引起父元素及其下元素的回流

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

实例测试

最后用2个工具对上面的理论进行一些测试，这2个工具是在我 "web 性能测试工具推荐" 文章中推荐过的工具，分别是：dynaTrace(测试ie),Speed Tracer(测试Chrome)。

第一个测试代码不改变元素的规则，大小，位置。只改变颜色，所以不存在回流，仅测试重绘，代码如下：

<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, &#39;&#39;);
        }
    function testOneByOne(){
      s.color = &#39;red&#39;;;
      tmp = computed.backgroundColor;
      s.color = &#39;white&#39;;
      tmp = computed.backgroundImage;
      s.color = &#39;green&#39;;
      tmp = computed.backgroundAttachment;
    }
    function testAll() {
      s.color = &#39;yellow&#39;;
      s.color = &#39;pink&#39;;
      s.color = &#39;blue&#39;;
      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>

Copy after login

testOneByOne 函数改变3次color,其中每次改变后调用getComputedStyle,读取属性值(按我们上面的讨论，这里会引起队列的flush)，testAll 同样是改变3次color，但是每次改变后并不马上调用getComputedStyle。
我们先点击Test One by One按钮，然后点击 Test All,用dynaTrace监控如下：