瀏覽器工做原理

瀏覽器內核

使用Trident內核的瀏覽器：IE、Maxthon、TT、The World等；

使用Gecko內核的瀏覽器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；

使用Presto內核的瀏覽器：Opera7及以上版本；

使用Webkit內核的瀏覽器：Safari（ [sə'fɑːrɪ）、Chrome。

瀏覽器的主要功能

1. 用戶界面（這個不重要） － 包括地址欄、後退/前進按鈕、書籤目錄等，也就是你所看到的除了用來顯示你所請求頁面的主窗口以外的其餘部分。

2. 瀏覽器引擎 － 用來查詢及操做渲染引擎的接口。另外還用來操做瀏覽器的數據存儲。

3. 渲染引擎 － 用來顯示請求的內容，例如，若是請求內容爲html，它負責解析html及css，並將解析後的結果顯示出來。

4. 網絡 － 用來完成網絡調用，例如http請求，它具備平臺無關的接口，能夠在不一樣平臺上工做。

5. UI後端 － 用來繪製相似組合選擇框及對話框等基本組件，具備不特定於某個平臺的通用接口，底層使用操做系統的用戶接口。

6. JS解釋器 － 用來解釋執行JS代碼。

7. 數據存儲 － 屬於持久層，瀏覽器須要在硬盤中保存相似cookie的各類數據，HTML5定義了web database技術，這是一種輕量級完整的客戶端存儲技術

瀏覽器渲染主流程

一、解析HTML以構建DOM樹：渲染引擎開始解析HTML文檔，轉換樹中的html標籤或js生成的標籤到DOM節點，它被稱爲 -- 內容樹。
二、構建渲染樹：解析CSS（包括外部CSS文件和樣式元素以及js生成的樣式），根據CSS選擇器計算出節點的樣式，建立另外一個樹 —- 渲染樹。
三、佈局渲染樹: 從根節點遞歸調用，計算每個元素的大小、位置等，給每一個節點所應該出如今屏幕上的精確座標。【reflow】
四、繪製渲染樹: 遍歷渲染樹，每一個節點將使用UI後端層來繪製。【repaint】

---

repaint和reflow

reflow的成本比repaint高不少，每一個dom tree裏面的節點都有reflow方法

reflow【迴流】：對於DOM結構中的各個元素都有本身的盒子模型，這些都須要瀏覽器根據各樣式來計算並根據計算結果將元素放在它該出現的位置。
會在改變某個DOM元素的位置的時候觸發，並且它將從新計算全部元素的位置和在頁面中的佔有面積。這樣的話將會引發頁面的某一部分或者是整個頁面的從新渲染。改變某一個元素會影響它全部的子節點 (children)、祖先節點 (ancestors) 及兄弟節點(siblings)。

1. 添加，刪除、改變DOM的可見性時候：使用js去改變dom元素時候會觸發reflow【添加，刪除，修改dom節點的時候可能致使reflow或者repaint】

2. 添加，刪除或者改變css樣式：直接改變css style或者元素的class可能會影響佈局，還有改變一個元素的寬度可以影響它所在的dom節點中的全部元素，以及它周圍的元素

3. css3動畫（animation）和過渡（transition）：動畫的每一franme都會觸發reflow

4. 使用offsetWidth和offsetHeigh：讀取一個dom的offsetWidth和offsetHeight屬性一樣會觸發一個reflow，由於兩個屬性須要依賴一些元素去計算

5. 用戶交互：用戶經過hover一個a連接，在input裏面輸入文字，拖動瀏覽器的大小(resize)，改變字體大小，更換樣式表或字體都會觸發reflow

---

repaint【重繪】：當各中盒子的位置，大小以及其餘屬性，例如顏色，字體大小等都肯定下來以後，瀏覽器因而把這些元素都按照各自的特性繪製一邊，因而頁面的內容就出現了。
會在改變DOM元素的視覺效果的時候觸發，改變佈局時不會觸發。

• opacity background-color visibility outline

---

總結

1. display:none會觸發reflow

2. visibility：hidden會觸發repaint（位置沒有變化）