高性能javascript讀書筆記（三.DOM 編程2）

重繪和重排版

瀏覽器下載完全部的HTML標記，Javascript，CSS，圖片以後，它解析文件並建立兩個內部數據結構

DOM樹 表示頁面結構
渲染樹 表示DOM節點如何顯示

渲染樹中爲每一個須要顯示的DOM樹木=節點存放至少一個節點(隱藏DOM元素在選桉樹中沒有對應節點)
渲染樹上的節點稱爲"框"或者"盒"，符合CSS模型的定義，將頁面元素看做一個具備填充，邊距，邊框和位置的盒。一
旦DOM樹和渲染樹構造完畢，瀏覽器就能夠顯示(繪製)頁面上的元素了。

當DOM改變影響到了元素的幾何屬性(寬和高)--改變了邊框寬在段落中添加文字，將發生一系列後續動做。
瀏覽器須要從新計算元素的幾何屬性，並且其餘元素的幾何屬性和位置也會所以改變收到影響。瀏覽器使渲染樹上受到
影響的部分失效，而後重構渲染樹。這個過程被稱做重排版。重排版完成時。瀏覽器在一個重繪進程中從新繪製屏幕上
受影響的部分。

不是全部的DOM改變都會影響幾何屬性。 例如改變元素的背景顏色不會影響它的寬度或高度。在這種狀況下，只須要重
繪(不須要重排版)，元素的佈局沒有改變。

發生重排版的狀況：

添加或刪除可見的DOM元素
元素的位置改變
元素的尺寸改變(邊距，填充，邊框寬度，寬度，高度等屬性改變)
內容改變 文本改變或圖片被另一個不一樣尺寸的所替代
最初的頁面渲染
瀏覽器窗口改變尺寸

根據改變的性質，渲染樹上或大或小的一部分須要從新計算。某些改變個致使重排版整個頁面。例如，當一個滾動條出
現。

由於計算量與每次重排版有關，大多數瀏覽器經過對劣化修改和批量顯示優化重排版過程，然而，你可能強迫隊列刷新
並要求全部計劃改變的部分馬上應用。獲取佈局信息的操做將致使刷新隊列動做。
offsetTop..offsetLeft...offsetWidth...offsetHeight
scrollTop ....
clientTop.....
getComputedStyle() currentStyle in IE //獲取非行間樣式的兼容性
document.body.currentStyle getComputedStyle(document.body)

佈局信息由這些屬性和方法返回最新的數據，因此瀏覽器不得不運行渲染隊列中待改變的項目並從新排版以返回正確的
值。

在改變風格的過程當中，最好不要使用前面列出的那些屬性。任何一個訪問都將刷新渲染隊列。即便你正在獲取那些最近
未發生改變的或與最新的改變無關的佈局信息。

最小化重繪和重排版

el.style.borderLeft="1px";
el.style.borderRight="2px";
el.style.borderPadding="5px";

這裏改變的三個風格屬性,每次改變都影響到了元素的幾何屬性。它致使瀏覽器重排版了三次。
大多數現代瀏覽器優化了這種狀況只進行了一次重排版，但老式的瀏覽器中，效率低下。

一次性改變風格的辦法：
cssText屬性:
el.style.cssText="border-left:1px; border-right:2px; padding:5px;"
cssText會覆蓋以前的CSS樣式，
el.style.cssText+="border-left:1px;"

修改CSS的類名稱
el.className="active"

批量修改DOM

減小重繪和重排的次數1.從文檔中摘除該元素2.對其應用多重改變