參考鏈接：
瀏覽器渲染的那些事(一)
瀏覽器內部工作原理
瀏覽器的渲染原理簡介
有關網頁渲染，每個前端開發者都該知道的那點事
1. 瀏覽器的主要概念
瀏覽器的主要功能是將用戶選擇的 web 資源呈現出來，它需要從服務器請求資源，并將其顯示在瀏覽器窗口中，資源的格式通常是 HTML，也包括PDF、image 及其他格式。用戶用 URI（統一資源標識符）來指定所請求資源的位置。
-
瀏覽器的主要構成：
瀏覽器主要構成 User Interface（用戶接口）：瀏覽器中的地址欄、前進后退、書簽菜單等。除了網頁顯示區域以外的都是。
Browser engine（瀏覽器引擎）：查詢與操作渲染引擎的接口。
Rendering engine（渲染引擎）：負責顯示請求的內容。
Networking（網絡）：用于網絡請求。
JavaScript Interpreter（JavaScript 解釋器）：用于解析執行 JavaScript 代碼。
UI Backend（UI 后端）：繪制基礎原件。
Data Persistence（持久層）：數據存儲。
2. 瀏覽器渲染流程
- 瀏覽器解析 HTML/SVG/XHTML 生成 DOM 樹；
- 瀏覽器解析 css 生成 css規則樹（CSS Rule Tree）；
- 瀏覽器解析JavaScript，主要通過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree；
- 解析完成后，瀏覽器引擎通過 DOM Tree 和 CSS Rule Tree 構造 Render Tree；
- 構建好 Render Tree 會執行 布局 過程，確定節點的確切位置
- 遍歷Render Tree ，使用UI后端層 繪制 每個節點。
2.1 HTML解析
- 為了更好的用戶體驗，瀏覽器不會等到所有的 HTML 都解析完成之后再去構建和布局 Render Tree，而是解析完一部分內容就顯示一部分內容，同時還可能在通過網絡下載其余內容。
- 解析輸出的 DOM 樹，是由 DOM 元素及屬性節點組成的。DOM 是文檔對象模型的縮寫，它是 HTML 文檔的對象表示，作為 HTML 元素的外部接口供JS等調用。
- 瀏覽器容錯：瀏覽器具有錯誤處理的能力，無效的不合法的標簽瀏覽器會在解析的過程中修復這種錯誤。
- 解析結束時文檔狀態被設置為完成，同時會觸發一個 load事件。
2.2 css 解析
解析 css 生成 css規則樹（CSS Rule Tree）。
2.3 渲染樹 Render Tree
- Render Tree 主要負責布局并將自身及其子元素繪制出來。
- 在渲染樹中，每一段文本字符串都表現為獨立的渲染器。每一個渲染對象都包含與之對應的 DOM 對象，或者文本塊，還加上計算過的樣式。
- 渲染樹由元素顯示序列中的可見元素組成，它是文檔的可視化表示，構建這棵樹是為了以正確的順序繪制文檔內容。
- 呈現樹與 DOM 元素相對應，但不是一一對應。非可視化的 DOM 元素就不會插入呈現樹，例如 head 元素。display 為 "none" 的元素也不會顯示在呈現樹中（visibility:hidden的元素仍會顯示）。
2.4 布局 Render Tree
對渲染樹上的每個元素，計算它的坐標，確定元素的位置，稱之為布局。瀏覽器采用一種流方法，布局一個元素只需通過一次，但是表格元素需要通過多次。
2.5 繪制 Render Tree
將渲染樹上的元素展示在瀏覽器里，這一過程稱為“painting”。
2.6 重排、重繪
當用戶與網頁交互，或者腳本程序改動修改網頁時，會發生重排或者重繪。
2.6.1 重繪
當改變那些不會影響元素在網頁中的位置的元素樣式時，譬如background-color(背景色)， border-color(邊框色)， visibility(可見性)，瀏覽器只會用新的樣式將元素重繪一次(這就是重繪，或者說重新構造樣式)。
2.6.2 重排
當改變影響到文本內容或結構，或者元素位置時，重排或者說重新布局就會發生。
-
觸發重排的操作：
- DOM操作（元素添加，刪除，修改，或者元素順序的改變）;
內容變化，包括表單域內的文本改變;
CSS屬性的計算或改變;
添加或刪除樣式表;
更改“類”的屬性;
瀏覽器窗口的操作（縮放，滾動）;
偽類激活（懸停）。
并不是所有會導致重繪重排的操作瀏覽器都會馬上執行，瀏覽器的優化技巧是，在運行幾段 JavaScript 代碼時，瀏覽器會 緩存 這些改變，在代碼運行完畢后再將這些改變經一次通過加以應用。即將多次重排重繪一次執行，這叫做 異步 reflow 或增量異步 reflow。
強制性重排：例如在改變元素的屬性后馬上就訪問該屬性，瀏覽器就會馬上執行重排而不會攢到一起重排。
頻繁的重繪和重排可能會帶來頁面的性能問題，因此需要進行優化渲染，提升頁面性能。
2.7 優化渲染
不要一條一條地修改 DOM 的樣式。與其這樣，還不如預先定義好 css 的 class，然后修改 DOM 的 className。
把 DOM 離線后修改，減少 DOM 操作：
使用 documentFragment 對象在內存里操作DOM；
先把 DOM 給 display:none(有一次 reflow )，然后一次性修改完再把他顯示出來。
clone 一個 DOM 結點到內存里，然后想怎么改就怎么改，改完后，和在線的那個的交換一下。
不要把 DOM 結點的屬性值放在一個循環里當成循環里的變量。不然這會導致大量地讀寫這個結點的屬性，而應該在最開始就把這個屬性賦給一個變量，在循環里訪問這個變量就可以避免循環查找 DOM 樹。
盡可能的修改層級比較低的 DOM 。當然，改變層級比較底的 DOM 有可能會造成大面積的 reflow，但是也可能影響范圍很小。
為動畫的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他們的 CSS 是不會 reflow 的。
不要使用 table 布局。因為可能很小的一個小改動會造成整個 table 的重新布局。
盡量簡化和優化 CSS 選擇器
