瀏覽器原理

瀏覽器功能：將用戶選擇的web資源呈現出來，它須要從服務器請求資源，並將其顯示在瀏覽器窗口中，資源的格式一般爲html，也有image、pdf及其餘格式，用戶用url來指定所請資源的位置

html、css規範中規定了瀏覽器解析html文檔的方式，由w3c對這些規範就行維護~

常見的瀏覽器用戶界面：

　　◆ 輸入url的地址欄

　　◆ 前進後退按鈕

　　◆ 書籤選項

　　◆ 用於刷新及暫停當前加載文檔的刷新、暫停按鈕

　　◆ 用於到達主頁的主頁按鈕

瀏覽器的主要構成High Level Structure：

　　覽器的主要組件包括：

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

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

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

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

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

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

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

渲染引擎 The rendering engine：

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

　　默認狀況下，渲染引擎能夠顯示html、xml文檔及圖片，它也能夠藉助插件(一種瀏覽器擴展)顯示其餘類型數據，例如使用PDF閱讀器插件，能夠顯示PDF格式，將由專門一　章講解插件及擴展，這裏只討論渲染引擎最主要的用途——顯示應用了CSS以後的html及圖片。

渲染引擎 Rendering engines

本文所討論得瀏覽器——Firefox、Chrome和Safari是基於兩種渲染引擎構建的，Firefox使用Geoko——Mozilla自主研發的渲染引擎，Safari和Chrome都使用webkit。

Webkit是一款開源渲染引擎，它原本是爲linux平臺研發的，後來由Apple移植到Mac及Windows上，相關內容請參考http://webkit.org。

主流程 The main flow

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

下面是渲染引擎在取得內容以後的基本流程：

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

渲染引擎開始解析html，並將標籤轉化爲內容樹中的dom節點。接着，它解析外部CSS文件及style標籤中的樣式信息。這些樣式信息以及html中的可見性指令將被用來構建另外一棵樹——render樹。

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

Render樹構建好了以後，將會執行佈局過程，它將肯定每一個節點在屏幕上的確切座標。再下一步就是繪製，即遍歷render樹，並使用UI後端層繪製每一個節點。

值得注意的是，這個過程是逐步完成的，爲了更好的用戶體驗，渲染引擎將會盡量早的將內容呈現到屏幕上，並不會等到全部的html都解析完成以後再去構建和佈局render樹。它是解析完一部份內容就顯示一部份內容，同時，可能還在經過網絡下載其他內容。

 

從圖3和4中能夠看出，儘管webkit和Gecko使用的術語稍有不一樣，他們的主要流程基本相同。Gecko稱可見的格式化元素組成的樹爲frame樹，每一個元素都是一個frame，webkit則使用render樹這個名詞來命名由渲染對象組成的樹。Webkit中元素的定位稱爲佈局，而Gecko中稱爲迴流。Webkit稱利用dom節點及樣式信息去構建render樹的過程爲attachment，Gecko在html和dom樹之間附加了一層，這層稱爲內容接收器，至關製造dom元素的工廠。下面將討論流程中的各個階段。

http://developer.51cto.com/art/201202/314376_4.htm