html文檔頁面重繪和從新佈局

  當瀏覽器下載完全部頁面HTML 標記，JavaScript，CSS，圖片以後，它解析文件並建立兩個內部數據結構：一棵DOM樹表示頁面結構，一棵渲染樹表示DOM節點如何顯示。

在對html頁面的操做過程當中會改變頁面的結構或者頁面的外觀或者同時改變頁面的結構和外觀。在過程當中,文檔可見外觀改變很小(如：改變了某些元素的顏色,或者改變了某些元素的可見性,但這種改變不會影響到頁面的佈局),這種行爲稱爲「重繪」,也就是瀏覽器對文檔進行了從新繪製。若是頁面外觀發生了顯著變化而且影響到文檔的實際佈局(如一個<div>元素的大小發生了改變),這時瀏覽器將會進行從新佈局，也就是瀏覽器將須要從新計算並從新繪製改div元素的全部子元素。

     重繪和從新佈局都是很是耗性能的一種操做。發生重繪時不必定會發生從新佈局,但發生從新佈局必定會發生重繪。那麼哪些頁面的操做會發生重繪與從新佈局呢。

   正如前面所提到的，當佈局和幾何改變時須要從新佈局。在下述狀況中會發生從新佈局：
      (1)添加或刪除可見的DOM 元素
      (2)元素位置改變
      (3)元素尺寸改變（由於邊距，填充，邊框寬度，寬度，高度等屬性改變）
      (4)內容改變，例如，文本改變或圖片被另外一個不一樣尺寸的所替代最初的頁面渲染
      (5)瀏覽器窗口改變尺寸

  在使用javascript對頁面的操做時會發生重繪或者從新佈局,雖然不能避免這2種行爲,但能夠減小觸發這兩種行爲的發生。如:

     div.style.width='200px',

     div.style.height='300px',

     div.style.color='#FFF',

     div.style.fontSize='16px'

    這樣瀏覽器會對頁面進行4次計算與繪製,

  咱們能夠把這些改變放到一個類裏面,如:

    .change{width:200px;height:300px;color:#FFF;font-size:16px;}

 而後將div的類設置爲change

   div.class='change'

 這樣瀏覽器對頁面的計算和繪製就減小到一次了.

有時會給頁面添加多個節點時，有可能觸發屢次從新佈局文檔的操做。如:

   var i=0;

  for(;i<10;i++){

        var newP=document.createElement('p'),

             newText='new p elements ---'+i;

        newP.innerText=newText;

       document.body.appendChild(newP);       

  }

這會觸發10從新佈局。這時使用文檔片斷就會將從新佈局減小到一次。如：

   

 var i=0，pFragment=document.createDocumentFragment();

  for(;i<10;i++){

        var newP=document.createElement('p'),

             newText='new p elements ---'+i;

        newP.innerText=newText;

       pFragment.appendChild(newP);    

  }

  document.body.appendChild(pFragment);

  javascript對文檔性能的影響主要都是在對DOM的操做上。