高性能WEB开发 页面呈现、重绘、回流。

聪明的浏览器

     从上个实例代码中可以看到几行简单的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信息的请求，尽量利用好浏览器的优化策略。具体方法有：

// 不好的写法
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;";

// 别这样写，大哥
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";
}

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

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

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

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

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>        

   

   

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
/head>
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';
      s.padding = '1px';
      tmp = computed.backgroundColor;
      s.color = 'white';
      s.padding = '2px';
      tmp = computed.backgroundImage;
      s.color = 'green';
      s.padding = '3px';
      tmp = computed.backgroundAttachment;
    }

    function testAll() {
      s.color = 'yellow';
      s.padding = '4px';
      s.color = 'pink';
      s.padding = '5px';
      s.color = 'blue';
      s.padding = '6px';

      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>