參考鏈接：
瀏覽器渲染的那些事(一)
瀏覽器內(nèi)部工作原理
瀏覽器的渲染原理簡介
有關(guān)網(wǎng)頁渲染皇帮，每個前端開發(fā)者都該知道的那點事
1. 瀏覽器的主要概念
瀏覽器的主要功能是將用戶選擇的 web 資源呈現(xiàn)出來坠敷，它需要從服務(wù)器請求資源，并將其顯示在瀏覽器窗口中猪叙，資源的格式通常是 HTML浅碾，也包括PDF、image 及其他格式蝠检。用戶用 URI（統(tǒng)一資源標識符）來指定所請求資源的位置。
-
瀏覽器的主要構(gòu)成：
瀏覽器主要構(gòu)成 User Interface（用戶接口）：瀏覽器中的地址欄挚瘟、前進后退叹谁、書簽菜單等。除了網(wǎng)頁顯示區(qū)域以外的都是乘盖。
Browser engine（瀏覽器引擎）：查詢與操作渲染引擎的接口焰檩。
Rendering engine（渲染引擎）：負責(zé)顯示請求的內(nèi)容。
Networking（網(wǎng)絡(luò)）：用于網(wǎng)絡(luò)請求订框。
JavaScript Interpreter（JavaScript 解釋器）：用于解析執(zhí)行 JavaScript 代碼析苫。
UI Backend（UI 后端）：繪制基礎(chǔ)原件。
Data Persistence（持久層）：數(shù)據(jù)存儲穿扳。
2. 瀏覽器渲染流程
- 瀏覽器解析 HTML/SVG/XHTML 生成 DOM 樹衩侥；
- 瀏覽器解析 css 生成 css規(guī)則樹（CSS Rule Tree）；
- 瀏覽器解析JavaScript矛物，主要通過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree茫死；
- 解析完成后，瀏覽器引擎通過 DOM Tree 和 CSS Rule Tree 構(gòu)造 Render Tree履羞；
- 構(gòu)建好 Render Tree 會執(zhí)行 布局 過程峦萎，確定節(jié)點的確切位置
- 遍歷Render Tree ，使用UI后端層 繪制 每個節(jié)點忆首。
2.1 HTML解析
- 為了更好的用戶體驗爱榔，瀏覽器不會等到所有的 HTML 都解析完成之后再去構(gòu)建和布局 Render Tree，而是解析完一部分內(nèi)容就顯示一部分內(nèi)容糙及，同時還可能在通過網(wǎng)絡(luò)下載其余內(nèi)容详幽。
- 解析輸出的 DOM 樹，是由 DOM 元素及屬性節(jié)點組成的浸锨。DOM 是文檔對象模型的縮寫唇聘，它是 HTML 文檔的對象表示，作為 HTML 元素的外部接口供JS等調(diào)用揣钦。
- 瀏覽器容錯：瀏覽器具有錯誤處理的能力雳灾，無效的不合法的標簽瀏覽器會在解析的過程中修復(fù)這種錯誤。
- 解析結(jié)束時文檔狀態(tài)被設(shè)置為完成冯凹，同時會觸發(fā)一個 load事件谎亩。
2.2 css 解析
解析 css 生成 css規(guī)則樹（CSS Rule Tree）。
2.3 渲染樹 Render Tree
- Render Tree 主要負責(zé)布局并將自身及其子元素繪制出來宇姚。
- 在渲染樹中匈庭，每一段文本字符串都表現(xiàn)為獨立的渲染器。每一個渲染對象都包含與之對應(yīng)的 DOM 對象浑劳，或者文本塊阱持，還加上計算過的樣式。
- 渲染樹由元素顯示序列中的可見元素組成魔熏，它是文檔的可視化表示衷咽，構(gòu)建這棵樹是為了以正確的順序繪制文檔內(nèi)容鸽扁。
- 呈現(xiàn)樹與 DOM 元素相對應(yīng)，但不是一一對應(yīng)镶骗。非可視化的 DOM 元素就不會插入呈現(xiàn)樹桶现，例如 head 元素。display 為 "none" 的元素也不會顯示在呈現(xiàn)樹中（visibility:hidden的元素仍會顯示）鼎姊。
2.4 布局 Render Tree
對渲染樹上的每個元素骡和，計算它的坐標，確定元素的位置相寇，稱之為布局慰于。瀏覽器采用一種流方法，布局一個元素只需通過一次唤衫，但是表格元素需要通過多次婆赠。
2.5 繪制 Render Tree
將渲染樹上的元素展示在瀏覽器里，這一過程稱為“painting”战授。
2.6 重排页藻、重繪
當用戶與網(wǎng)頁交互，或者腳本程序改動修改網(wǎng)頁時植兰，會發(fā)生重排或者重繪份帐。
2.6.1 重繪
當改變那些不會影響元素在網(wǎng)頁中的位置的元素樣式時，譬如background-color(背景色)楣导， border-color(邊框色)废境， visibility(可見性)，瀏覽器只會用新的樣式將元素重繪一次(這就是重繪筒繁，或者說重新構(gòu)造樣式)噩凹。
2.6.2 重排
當改變影響到文本內(nèi)容或結(jié)構(gòu)，或者元素位置時毡咏，重排或者說重新布局就會發(fā)生驮宴。
-
觸發(fā)重排的操作：
- DOM操作（元素添加，刪除呕缭，修改堵泽，或者元素順序的改變）;
內(nèi)容變化，包括表單域內(nèi)的文本改變;
CSS屬性的計算或改變;
添加或刪除樣式表;
更改“類”的屬性;
瀏覽器窗口的操作（縮放恢总，滾動）;
偽類激活（懸停）迎罗。
并不是所有會導(dǎo)致重繪重排的操作瀏覽器都會馬上執(zhí)行，瀏覽器的優(yōu)化技巧是片仿，在運行幾段 JavaScript 代碼時纹安，瀏覽器會 緩存 這些改變，在代碼運行完畢后再將這些改變經(jīng)一次通過加以應(yīng)用。即將多次重排重繪一次執(zhí)行厢岂，這叫做 異步 reflow 或增量異步 reflow光督。
強制性重排：例如在改變元素的屬性后馬上就訪問該屬性，瀏覽器就會馬上執(zhí)行重排而不會攢到一起重排咪笑。
頻繁的重繪和重排可能會帶來頁面的性能問題可帽，因此需要進行優(yōu)化渲染，提升頁面性能窗怒。
2.7 優(yōu)化渲染
不要一條一條地修改 DOM 的樣式。與其這樣蓄拣，還不如預(yù)先定義好 css 的 class扬虚，然后修改 DOM 的 className。
把 DOM 離線后修改球恤，減少 DOM 操作：
使用 documentFragment 對象在內(nèi)存里操作DOM辜昵；
先把 DOM 給 display:none(有一次 reflow )，然后一次性修改完再把他顯示出來咽斧。
clone 一個 DOM 結(jié)點到內(nèi)存里堪置，然后想怎么改就怎么改，改完后张惹，和在線的那個的交換一下舀锨。
不要把 DOM 結(jié)點的屬性值放在一個循環(huán)里當成循環(huán)里的變量。不然這會導(dǎo)致大量地讀寫這個結(jié)點的屬性宛逗，而應(yīng)該在最開始就把這個屬性賦給一個變量坎匿，在循環(huán)里訪問這個變量就可以避免循環(huán)查找 DOM 樹。
盡可能的修改層級比較低的 DOM 雷激。當然替蔬，改變層級比較底的 DOM 有可能會造成大面積的 reflow，但是也可能影響范圍很小屎暇。
為動畫的 HTML 元件使用 fixed 或 absoult 的 position承桥，那么修改他們的 CSS 是不會 reflow 的。
不要使用 table 布局根悼。因為可能很小的一個小改動會造成整個 table 的重新布局凶异。
盡量簡化和優(yōu)化 CSS 選擇器
