一、瀏覽器渲染頁過程描述
1、瀏覽器解析html源碼，然后創建一個DOM樹。
在DOM樹中，每一個HTML標簽都有一個對應的節點(元素節點),並且每一個文本也都有一個對應的節點(文本節點)。
DOM樹的根節點就是documentElement，對應的是html標簽。
2、瀏覽器解析CSS代碼，計算出最終的樣式數據。
對CSS代碼中非法的語法它會直接忽略掉。
解析CSS的時候會按照如下順序來定義優先級：瀏覽器默認設置，用戶設置，外聯樣式，內聯樣式，html中的style(嵌在標簽中的行間樣式)。
3、創建完DOM樹並得到最終的樣式數據之后，構建一個渲染樹。
渲染樹和DOM樹有點像，但是有區別。DOM樹完全和html標簽一一對應，而渲染樹會忽略不需要渲染的元素(head、display:none的元素)。
渲染樹中每一個節點都存儲着對應的CSS屬性。
4、當渲染樹創建完成之后，瀏覽器就可以根據渲染樹直接把頁面繪制到屏幕上。
二、高性能Javascript DOM編程
我們知道，用腳本進行DOM操作的代價很昂貴。把DOM和ECMAScript各自想象為一個島嶼，它們之間用收費橋梁鏈接，ECMAScript每次訪問DOM，都要經過這座橋，並交納“過橋費”，訪問DOM的次數越多，費用也就越高。因此，推薦的做法是盡量減少過橋的次數，努力呆在ECMAScript島上。這是比喻非常形象。那么怎樣才能高效呢？
1、DOM訪問與修改
訪問DOM元素是有代價的(這里其實和ajax調后台數據接口是一樣，DOM是用於操作XML和HTML文檔的應用程序接口，一次能完成的事不要請求多次)，通過DOM獲取元素之后，修改元素的代價更是昂貴，因為它會導致瀏覽器重新計算頁面的幾何變化(重排和重繪)。
例子：
var times = 15000;
//code1
console.time('time1');
for(var i=0; i<times; i++){
document.getElementById('myDiv1').innerHTML +='a';
}
console.timeEnd('time1');
//code2
console.time('time2');
var str = '';
for(var i=0; i<times; i++){
str += 'a';
}
document.getElementById('maDiv2').innerHTML = str;
console.timeEnd('time2');
結果time1:2352.064ms/time2:0.789ms
第一段代碼的問題在於，每次循環迭代，改元素都會被訪問兩次：一次讀取innerHTML的值，另一次重寫它。
結果充分證明，訪問DOM的次數越多，代碼的運行速度越慢。
因此，能減少DOM訪問的次數就盡量減少，盡量留在ECMAScript這端處理。
2、html集合&遍歷DOM
操作DOM另一個耗能點就是遍歷DOM，在平時獲取一組元素的時候(getElementsByTagName方法)，收集的結果是一個類數組對象，它處於一種“實時狀態”實時存在，這意味着當底層文檔對象更新時，它也會自動更新。
例子：
而這正是低效之源！很簡單，跟數組的優化操作一樣，緩存一個length變量就OK了(讀取一個集合的length比讀取一個普通數組的length要慢很多，因為每次都要查詢)：
console.time('time0');
var lis0 = document.getElementsByTagName('li');
var str0 = '';
for(var i=0; i<lis0.length; i++){
str0 +=lis0[i].innerHTML;
}
console.timeEnd('time0');
console.time('time1');
var lis1 = document.getElementsByTagName('li');
var str1 = '';
for(var i=0; len=lis1.length; i<len; i++){
str1 += lis1[i].innerHTML;
}
console.timeEnd('time1');
結果：time0:0.237ms/time1:0.099ms
當獲取的這個類數組對象長度值特別大的時候(如1000)，性能提升還是很明顯的。
第一部分主要提了兩點優化，一是盡量減少DOM的訪問，把運算放在ECMAScript這一端，二是盡量緩存局部變量，比如類數組對象的length。
三、重排和重繪
1、什么是重排和重繪
瀏覽器下載完頁面中的所有組件(html標記、Javascript、CSS、圖片)之后會解析生成兩個內部數據結構——DOM樹和渲染樹。
DOM樹表示頁面結構，渲染樹表示DOM節點如何顯示。DOM樹中的每一個需要顯示的節點在渲染樹中至少存在一個對應的節點(隱藏的DOM元素 display:none 在渲染樹中沒有對應的節點)。
渲染樹中的節點被稱為‘幀’或‘盒’，符合CSS模型的定義，頁面元素為一個具有填充，邊距，邊框和位置的盒子。一旦DOM樹和渲染樹構建完成，瀏覽器就開始繪制頁面元素。
當DOM的變化影響了元素的幾何屬性(寬或高)，瀏覽器需要重新計算元素的幾何屬性，同時其他元素的幾何屬性和位置也會受到影響。瀏覽器會使渲染樹中受到影響的部分失效，並重新構造渲染樹，這個過程稱為重排。完成重排后，瀏覽器會重新繪制受到影響的部分到屏幕，這個過程稱為重繪。
由於瀏覽器的流布局，對渲染樹的計算通常只需要遍歷一次就可以完成。table及其內部元素除外，它可能需要多次計算才能確定好其在渲染樹中節點的屬性，通常要花三倍同等元素的時間。這也是為什么我們要避免使用table做布局的一個原因。
並不是所有的DOM變化都會影響幾何屬性，比如改變一個元素的背景色並不會影響元素的寬和高，這種情況下只會發生重繪。
2、重排何時發生
a、添加或刪除可見的DOM元素
b、元素位置改變
c、元素尺寸改變
d、元素內容改變
e、頁面渲染初始化
f、瀏覽器窗口尺寸改變
3、渲染樹變化的排隊和刷新
獲取布局信息的操作會導致隊列刷新，比如：
a、offsetTop,offsetLeft,offsetWidth,offsetHeight
b、scrollTop,scrollLeft,scrollWidth,scrollHeight
c、clientTop,clientLeft,clientWidth,clientHeight
d、getComputeStyle()||currentStyle(IE)
因為offsetHeight屬性需要返回最新的布局信息，因此瀏覽器不得不執行渲染隊列中的“待處理變化”並觸發重排以返回正確的值（即使隊列中 改變的樣式屬性和想要獲取的屬性值並沒有什么關系）。
4、最小化重排和重繪
改變元素多種樣式的時候，最好用className，一次性完成操作，這樣只會修改一次DOM。
5、文檔碎片
文檔碎片的設計初衷就是為完成這類任務——更新和移動節點。當你附加一個片段到節點時，實際上被添加的是該片段的子節點，而不是片段本身。只會觸發一次重排，而且只訪問一次實時的DOM。
用法：
var oFragment = document.createDocumentFragment();
for(var i=0; i<1000; i++){
var oP = document.createElement('p');
oP.innerHTML = i;
oFragment.appendChild(oP);
}
var oDo = document.body;
oDo.appendChild(oFragment);
6、讓動畫脫離文檔流
使用絕對位置定位頁面上的動畫元素，將其脫離文檔流。這樣不會導致文檔流中的元素受到影響，不會大規模的進行重排和重繪。
第二部分重排和重繪是DOM編程中耗能的主要原因之一，為了避免不必要的性能損耗可以參考一下幾點：
1、盡量不要在布局信息改變時做查詢(會導致渲染隊列強制刷新);
2、同一個DOM的多個屬性改變可以寫在一起(減少DOM訪問，同時把強制渲染隊列刷新的風險降為0);
3、如果要批量添加DOM，可以先讓元素脫離文檔流，操作完成后帶人文檔流，這樣只會觸發一次重排(fragment元素的應用);
4、將需要多次重排的元素，添加定位屬性，設置為absolute,fixed，這樣此元素就脫離了文檔流，不會影響其他元素。