一、瀏覽器如何渲染網(wǎng)頁
要了解瀏覽器渲染頁面的過程，首先得知道一個名詞——關(guān)鍵路徑渲染。關(guān)鍵渲染路徑（Critical Rendering Path）是指與當前用戶操作有關(guān)的內(nèi)容。例如用戶在瀏覽器中打開一個頁面，其中頁面所顯示的東西就是當前用戶操作相關(guān)的內(nèi)容，也就是瀏覽器從服務(wù)器那收到的HTML,CSS,JavaScript等相關(guān)資源，然后經(jīng)過一系列處理后渲染出來的web頁面。
而瀏覽器渲染的過程主要包括以下五步：
- 瀏覽器將獲取的HTML文檔并解析成DOM樹。
- 處理CSS標記，構(gòu)成層疊樣式表模型CSSOM(CSS Object Model)。
- 將DOM和CSSOM合并為渲染樹(rendering tree)將會被創(chuàng)建，代表一系列將被渲染的對象。
- 渲染樹的每個元素包含的內(nèi)容都是計算過的，它被稱之為布局layout。瀏覽器使用一種流式處理的方法，只需要一次pass繪制操作就可以布局所有的元素。
- 將渲染樹的各個節(jié)點繪制到屏幕上，這一步被稱為繪制painting.
具體如下圖過程如下圖所示：
需要注意的是，以上五個步驟并不一定一次性順序完成，比如DOM或CSSOM被修改時，亦或是哪個過程會重復(fù)執(zhí)行，這樣才能計算出哪些像素需要在屏幕上進行重新渲染。而在實際情況中，JavaScript和CSS的某些操作往往會多次修改DOM或者CSSOM。
下面我們就來詳細的了解一下這幾個過程及需要注意的事項。
二、瀏覽器渲染網(wǎng)頁的具體流程
2.1 構(gòu)建DOM樹
當瀏覽器客戶端從服務(wù)器那接受到HTML文檔后，就會遍歷文檔節(jié)點然后生成DOM樹，DOM樹結(jié)構(gòu)和HTML標簽一一對應(yīng)。需要注意記下幾點：
- DOM樹在構(gòu)建的過程中可能會被CSS和JS的加載而執(zhí)行阻塞。（這在后面會詳細介紹。）
- display:none 的元素也會在DOM樹中。
- 注釋也會在DOM樹中
- script標簽會在DOM樹中
2.2 CSS解析
瀏覽器會解析CSS文件并生成CSS規(guī)則樹，在過程中，每個CSS文件都會被分析成StyleSheet對象，每個對象都包括CSS規(guī)則，CSS規(guī)則對象包括對應(yīng)的選擇器和聲明對象以及其他對象。
在這個過程需要注意的是：
- CSS解析可以與DOM解析同進行。
- CSS解析與script的執(zhí)行互斥 。
- 在Webkit內(nèi)核中進行了script執(zhí)行優(yōu)化，只有在JS訪問CSS時才會發(fā)生互斥。
2.3 構(gòu)建渲染樹（Rendr tree construction）
通過DOM樹和CSS規(guī)則樹，瀏覽器就可以通過它兩構(gòu)建渲染樹了。瀏覽器會先從DOM樹的根節(jié)點開始遍歷每個可見節(jié)點，讓后對每個可見節(jié)點找到適配的CSS樣式規(guī)則并應(yīng)用。具體的規(guī)則有以下幾點需要注意：
- Render Tree和DOM Tree不完全對應(yīng)。
- display: none的元素不在Render Tree中
- visibility: hidden的元素在Render Tree中
2.4 渲染樹布局(layout of the render tree)
布局階段會從渲染樹的更節(jié)點開始遍歷，由于渲染樹的每個節(jié)點都是一個Render Object對象，包含寬高，位置，背景色等樣式信息。所以瀏覽器就可以通過這些樣式信息來確定每個節(jié)點對象在頁面上的確切大小和位置，布局階段的輸出就是我們常說的盒子模型，它會精確地捕獲每個元素在屏幕內(nèi)的確切位置與大小。需要注意的是：
- float元素，absoulte元素，fixed元素會發(fā)生位置偏移。
- 我們常說的脫離文檔流，其實就是脫離Render Tree。
2.5 渲染樹繪制（Painting the render tree）
在繪制階段，瀏覽器會遍歷渲染樹，調(diào)用渲染器的paint()方法在屏幕上顯示其內(nèi)容。渲染樹的繪制工作是由瀏覽器的UI后端組件完成的。
三、瀏覽器渲染網(wǎng)頁的那些事兒
3.1 阻塞渲染
前面我們有提到這方面的問題，說到資源的阻塞我們清楚的是，現(xiàn)代瀏覽器總是并行加載自語言。例如當HTML解析器被腳本阻塞時，解析器雖然會停止構(gòu)建DOM，但仍然會辨識該腳本后面的資源，并進行預(yù)加載。且由于以下兩點。瀏覽器會延遲 JavaScript 的執(zhí)行和 DOM 構(gòu)建：
- CSS 被默認被視為阻塞渲染的資源，因此瀏覽器將在 CSSOM 構(gòu)建完畢前不會渲染任何已處理的內(nèi)容。
- JavaScript 不僅可以讀取和修改 DOM 屬性，還可以讀取和修改 CSSOM 屬性，因此CSS解析與script的執(zhí)行互斥。
正是由于以上這些原因，script標簽的位置很重要我們在實際開發(fā)中應(yīng)該盡量堅持以下兩個原則：
- 在引入順序上，CSS 資源先于 JavaScript 資源。
- JavaScript 應(yīng)盡量少的去影響 DOM 的構(gòu)建。
3.2 回流和重繪（reflow和repaint）
我們都知道HTML默認是流式布局的，但CSS和JS會打破這種布局，改變DOM的外觀樣式以及大小和位置。因此我們就需要知道兩個概念:
- reflow（回流）：當瀏覽器發(fā)現(xiàn)某個部分發(fā)生了變化從而影響了布局，這個時候就需要倒回去重新渲染，大家稱這個回退的過程叫 reflow。 常見的reflow是一些會影響頁面布局的操作，諸如Tab，隱藏等。reflow 會從 html 這個 root frame 開始遞歸往下，依次計算所有的結(jié)點幾何尺寸和位置，以確認是渲染樹的一部分發(fā)生變化還是整個渲染樹。reflow幾乎是無法避免的，因為只要用戶進行交互操作，就勢必會發(fā)生頁面的一部分的重新渲染，且通常我們也無法預(yù)估瀏覽器到底會reflow哪一部分的代碼，因為他們會相互影響。
- repaint（重繪）： repaint則是當我們改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時，屏幕的一部分要重畫，但是元素的幾何尺寸和位置沒有發(fā)生改變。
需要注意的是，display:none 會觸發(fā) reflow，而visibility: hidden屬性則并不算是不可見屬性，它的語義是隱藏元素，但元素仍然占據(jù)著布局空間，它會被渲染成一個空框，這在我們上面有提到過。所以visibility:hidden 只會觸發(fā) repaint，因為沒有發(fā)生位置變化。
我們不能避免reflow，但還是能通過一些操作來減少回流：
- 用transform做形變和位移.
- 通過絕對位移來脫離當前層疊上下文，形成新的Render Layer。
另外有些情況下，比如修改了元素的樣式，瀏覽器并不會立刻reflow 或 repaint 一次，而是會把這樣的操作積攢一批，然后做一次 reflow，這又叫異步 reflow 或增量異步 reflow。但是在有些情況下，比如resize 窗口，改變了頁面默認的字體等。對于這些操作，瀏覽器會馬上進行 reflow。
3.3 幾條關(guān)于優(yōu)化渲染效率的建議
結(jié)合上文和我看到的一些文章，有以下幾點可以優(yōu)化渲染效率
- 合法地去書寫 HTML 和 CSS ，且不要忘了文檔編碼類型。
- 樣式文件應(yīng)當在 head 標簽中，而腳本文件在 body 結(jié)束前，這樣可以防止阻塞的方式。
- 簡化并優(yōu)化CSS選擇器，盡量將嵌套層減少到最小。
- 盡量減少在 JavaScript 中進行DOM操作。
- 修改元素樣式時，更改其class屬性是性能最高的方法。
- 盡量用 transform 來做形變和位移
參考文章：
http://www.cnblogs.com/slly/p/6640761.html
