高性能WEB開發(fā) 頁面呈現(xiàn)、重繪、回流。

聰明的瀏覽器

     從上個實例代碼中可以看到幾行簡單的JS代碼就引起了6次左右的回流、重繪。而且我們也知道回流的花銷也不小，如果每句JS操作都去回流重繪的話，瀏覽器可能就會受不了。所以很多瀏覽器都會優(yōu)化這些操作，瀏覽器會維護1個隊列，把所有會引起回流、重繪的操作放入這個隊列，等隊列中的操作到了一定的數(shù)量或者到了一定的時間間隔，瀏覽器就會把flush隊列，進行一個批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。

    雖然有了瀏覽器的優(yōu)化，但有時候我們寫的一些代碼可能會強制瀏覽器提前flush隊列，這樣瀏覽器的優(yōu)化可能就起不到作用了。當你請求向瀏覽器請求一些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信息的請求，盡量利用好瀏覽器的優(yōu)化策略。具體方法有：

// 不好的寫法
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(循環(huán)) {
    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(循環(huán)) {
    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>