瀏覽器引擎

bill1315發表於2013-02-16
瀏覽器

原地址：http://wenku.baidu.com/view/67fa6feaaeaad1f346933f28.html

簡介

現在瀏覽器的核心引擎，基本上是三分天下：

Trident: IE 以Trident 作為核心引擎。

Gecko: Firefox 是基於 Gecko 開發。

WebKit: Safari, Google Chrome 基於 Webkit 開發。

還有一個Presto：Opera,任天堂DS瀏覽器，發展也良好。

WebKit 核心在手機上的應用十分廣泛，例如 Google 的手機Gphone、 Apple 的 iPhone, Nokia’s Series 60 browser 等所使用的 Browser 核心引擎，都是基於 WebKit。

 WebKit組成

WebKit 主要包括三個部分WebCore、JavascriptCore 及Ports部分。WebKit 專注的核心部分主要是：分析Html,Javascript 的解析和佈局渲染技術。分別在由WebCore/html，JavascriptCore 和WebCore/rendering來完成。

體系結構圖如下：

 

工作流程
 
流程解析： 1. 使用者向Shell發出頁面請求後，頁面的URL 或本地檔名被髮送到Shell；
2. Shell 呼叫IO元件，把URL 傳達到IO元件；
3. IO元件使用HTTP 協議或再呼叫本地IO獲取HTML/XHTML源資料，返回Shell；
4. Shell 把IO 返回的HTML/XHTML source 提交HTML/XHTML分析器；
5. HTML/XHTML分析器分析HTML/XHTML程式碼，構建一棵DOM 樹，樹根為HTMLDocument;
6. 通過DOM 樹，生成Render 樹。 Render樹，簡單的說來，它是對DOM 樹更進一步的描述，其描述的內容主要與佈局渲染等CSS相關屬性如left、 top、width、height、color、font等有關，因為不同的DOM 樹結點可能會有不同的佈局渲染屬性，甚至佈局時會按照標準動態生成一些 匿名節點，所以為了更加方便的描述佈局及渲染，WebKit核心又生成一顆Render 樹來描述DOM 樹的佈局渲染等特性，當然DOM 樹與Render 樹 不是一一對應，但可以相互關聯；
7. 佈局管理器layout對應控制元件。當佈局管理器對視覺化元素指派好位置和大小後，視覺化元素必須要嚴格遵守佈局管理器給它分配的位置和大小，不能擅自更改，相應控制元件根據自己的屬性進行表現自己了，如背景，外形等。
 
處理流程
流程描述： 通過向伺服器傳送請求伺服器通過請求，發給客戶端html的內容瀏覽器通過W3C 規範，把接受到的內容解析成DOM 樹，在解析DOM 樹的同時會生成對應的Render 樹。佈局管理器通過Render 樹，開始佈局。這個是一個動態的過程，DOM在這個時候會繼續向伺服器申請自己需要的東西， 比如CSS,JavaScript，圖片等，然後佈局器動態的載入或佈局，這樣可以改善使用者的體驗，最後把整個網頁render出來。
 
原理分析
演算法分析

相關文章