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

聰明的瀏覽器

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

    雖然有了瀏覽器的優(yōu)化，但有時(shí)候我們寫的一些代碼可能會(huì)強(qiáng)制瀏覽器提前flush隊(duì)列，這樣瀏覽器的優(yōu)化可能就起不到作用了。當(dāng)你請(qǐng)求向?yàn)g覽器請(qǐng)求一些style信息的時(shí)候，就會(huì)讓瀏覽器flush隊(duì)列，比如：
    1. offsetTop, offsetLeft, offsetWidth, offsetHeight
    2. scrollTop/Left/Width/Height
    3. clientTop/Left/Width/Height
    4. width,height
    5. 請(qǐng)求了getComputedStyle(), 或者 ie的 currentStyle

    當(dāng)你請(qǐng)求上面的一些屬性的時(shí)候，瀏覽器為了給你最精確的值，需要flush隊(duì)列，因?yàn)殛?duì)列中可能會(huì)有影響到這些值的操作。

如何減少回流、重繪

    減少回流、重繪其實(shí)就是需要減少對(duì)render tree的操作，并減少對(duì)一些style信息的請(qǐng)求，盡量利用好瀏覽器的優(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";
}

// 這樣寫好點(diǎn)
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 定位的元素，它移動(dòng)會(huì)影響到它父元素下的所有子元素。

// 因?yàn)樵谒苿?dòng)過程中，所有子元素需要判斷block1的z-index是否在自己的上面，
// 如果是在自己的上面,則需要重繪,這里不會(huì)引起回流
$("#block1").animate({left:50});

// block2是相對(duì)定位的元素,這個(gè)影響的元素與block1一樣，但是因?yàn)閎lock2非絕對(duì)定位
// 而且改變的是marginLeft屬性，所以這里每次改變不但會(huì)影響重繪，
// 還會(huì)引起父元素及其下元素的回流

$("#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>