瀏覽器工做原理

瀏覽器工做原理？

 

一、主要的瀏覽器

有五種主流瀏覽器——IE、Firefox、Safari、Chrome及Opera。

五大瀏覽器分別有各自的瀏覽器內核

 

 

 

二、瀏覽器構成 

 

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

 

　　2. 瀏覽器引擎 － 用來查詢及操做渲染引擎的接口。

 

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

---

 

　　（1）渲染引擎的職責就是渲染，即在瀏覽器窗口中顯示所請求的內容。

　　默認狀況下，渲染引擎能夠顯示html、xml文檔及圖片，

　　它也能夠藉助插件（一種瀏覽器擴展）顯示其餘類型數據，例如使用PDF閱讀器插件，能夠顯示PDF格式。

　　（2）渲染引擎種類

儘管webkit和Gecko使用的術語稍有不一樣，他們的主要流程基本相同。

Gecko稱可見的格式化元素組成的樹爲frame樹，每一個元素都是一個frame，

webkit則使用render樹這個名詞來命名由渲染對象組成的樹。

Webkit中元素的定位稱爲佈局，而Gecko中稱爲迴流。

Webkit稱利用dom節點及樣式信息去構建render樹的過程爲attachment，

Gecko在html和dom樹之間附加了一層，這層稱爲內容接收器，至關製造dom元素的工廠。

　　Firefox、Chrome和Safari是基於兩種渲染引擎構建的

　　Firefox——Geoko（Mozilla自主研發的渲染引擎）

GeoKo渲染引擎工做流程

 

　　Safari——webkit

　　Chrome——webkit（Webkit是一款開源渲染引擎，它原本是爲Linux平臺研發的，後來由Apple移植到Mac及Windows上）

webkit渲染引擎工做流程

 

　　（3）渲染引擎工做流程

　　渲染引擎首先經過網絡得到所請求文檔的內容，一般以8K分塊的方式完成。

　　獲取到文檔類容後按照下圖繼續工做：

解析html以構建dom樹 -> 構建render樹 -> 佈局render樹 -> 繪製render樹

　　第一步：渲染引擎開始解析html，並將標籤轉化爲內容樹中的dom節點。

　　第二步：它解析外部CSS文件及style標籤中的樣式信息。

　　這些樣式信息以及html中的可見性指令將被用來構建另外一棵樹——render樹

　　（Render樹由一些包含有顏色和大小等屬性的矩形組成，它們將被按照正確的順序顯示到屏幕上）

　　第三步：執行佈局過程，它將肯定每一個節點在屏幕上的確切座標。

---

 

 

　　　　當渲染對象被建立並添加到樹中，它們並無位置和大小，計算這些值的過程稱爲layout或reflow。

（1）Html使用基於流的佈局模型，意味着大部分時間，能夠以單一的途徑進行幾何計算。

　流中靠後的元素並不會影響前面元素的幾何特性，因此佈局能夠在文檔中從右向左、自上而下的進行。也存在一些例外，好比html tables。

 

（2）座標系統相對於根frame，使用top和left座標。

 

（3）佈局是一個遞歸的過程，由根渲染對象開始，它對應html文檔元素，佈局繼續遞歸的經過一些或全部的frame層級，爲每一個須要幾何信息的渲染對象進行計算。

 

　　根渲染對象的位置是0,0，它的大小是viewport－瀏覽器窗口的可見部分。

 

　　全部的渲染對象都有一個layout或reflow方法，每一個渲染對象調用須要佈局的children的layout方法。

 

　layout通常有下面這幾個部分：

 

　　1. parent渲染對象決定它的寬度

 

　　2. parent渲染對象讀取chilidren，並：

 

　　　　a. 放置child渲染對象（設置它的x和y）

 

　　　　b. 在須要時（它們當前爲dirty或是處於全局layout或者其餘緣由）調用child渲染對象的layout，這將計算child的高度

 

　　　　c. parent渲染對象使用child渲染對象的累積高度，以及margin和padding的高度來設置本身的高度－這將被parent渲染對象的parent使用

 

　　　　d. 將dirty標識設置爲false

 

　　Firefox使用一個「state」對象（nsHTMLReflowState）作爲參數去佈局（firefox稱爲reflow），state包含parent的寬度及其餘內容。

 

　　Firefox佈局的輸出是一個「metrics」對象（nsHTMLReflowMetrics）。它包括渲染對象計算出的高度。

 

---

 

 

　　第四步：繪製，即遍歷render樹，並使用UI後端層繪製每一個節點

　　繪製階段，遍歷渲染樹並調用渲染對象的paint方法將它們的內容顯示在屏幕上，繪製使用UI基礎組件

　　繪製順序：css2定義了繪製過程的順序——http://www.w3.org/TR/CSS21/zindex.html。

　　這個就是元素壓入堆棧的順序，這個順序影響着繪製，堆棧從後向前進行繪製。

舉例說明：一個塊渲染對象的堆棧順序是：1. 背景色2. 背景圖3. border4. children5. outline

 

（真正執行過程當中知足用戶體驗問題）

值得注意的是，這個過程是逐步完成的，

爲了更好的用戶體驗，渲染引擎將會盡量早的將內容呈現到屏幕上，

並不會等到全部的html都解析完成以後再去構建和佈局render樹。

它是解析完一部份內容就顯示一部份內容，同時，可能還在經過網絡下載其他內容。

 

---

 

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

 

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

 

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

 

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

三、瀏覽器功能

瀏覽器的主要功能是將用戶選擇的web資源呈現出來，

它須要從服務器請求資源，並將其顯示在瀏覽器窗口中，

資源的格式一般是HTML，也包括PDF、image及其餘格式。

用戶用URI（Uniform Resource Identifier統一資源標識符）來指定所請求資源的位置