1、瀏覽器功能特性
- 網路：它是第一步，瀏覽器通過網路模組下載各種資源。如hmtl、 css、js 等等。
- 資源管理: 從網路下載或者獲取本地資源，並將它們管理起來，這需要高效的管理機制。例如如何避免重複下載資源等。
- 多頁面管理: 瀏覽器支援多頁瀏覽，需要支援多個網頁同時載入，如何解決多頁面的相互影響和安全。
- 外掛與擴充套件：外掛，不僅能顯示網頁，而且能支援各種形式的外掛和擴充套件。外掛是用來顯示網頁特定的內容，而擴充套件是增加瀏覽器新功能的軟體或壓縮包。
- 帳戶和同步：將瀏覽器的相關資訊，例如歷史書籤等資訊同步到伺服器上給使用者多系統下統一體驗。
- 安全機制：本質上提供一個瀏覽的環境。避免使用者資訊被各種非法工竊取和破壞。
- 開發者工具： 對普通使用者用處不大，但是對前端開發者來說，是一個必備的工具。
1.1 瀏覽器核心的功能特性
在瀏覽器中，有一個重要的模組，它的主要作用是將頁面轉化為視覺化的影象結果，這就是瀏覽器核心。通常它也被稱不渲染引擎。一個渲染引擎主要包括下面幾個主要模組。
- HTML直譯器: 解釋HTML,主要將HTML 文字解釋成 DOM 樹，DOM 是一種文件表示的方法。
- css 直譯器： 它的作用是為DOM中各個元素樹計算出樣式資訊。從而為計算網頁的佈局提供基礎設施。
- 佈局： 在DOM 建立之後，Webkit 需要將其中的元素物件同樣式資訊結合起來，計算它們的大小位置布避資訊，形成一個能夠表示這所有資訊的內部表示模型。
- javascript 引擎：使用js 程式碼，能夠修改dom 結構，也能修改css .從而改變渲染結果。
- 繪圖： 使用圖形庫將佈局計算後的各個網頁的節點繪製成影象結果。
這些模組是一起工作來完成網頁的渲染過程。首先是網頁內容，輸入到HTML 直譯器，HTML 直譯器在解釋它後構建成一顆DOM 樹，這期間如果遇到js 程式碼，則交給js 引擎去處理；如果網頁中包含css,則交給css 直譯器去解釋。當DOM 建立的時候，渲染引擎接來自css直譯器的樣式資訊，構建一個新的內部繪圖模型。該模型由佈局模組計算模型各個元素的位置和大小資訊，最後由繪圖模組完成該模型到影象的繪製。
1.3 webkit 渲染過程
前面介紹這些模組，下面將這些模組進行具體的細化
- 當使用者輸入url的時候，webkit會呼叫其資源載入器載入該 url 對應的網頁。
- 載入器依賴網路模組建立連線，傳送請求並接收答覆。
- webkit 接收到各種網頁或者資源的資料，其中某些資源可能是同步或者是非同步獲取的。
- 網頁被交給 HTML 直譯器轉變一系的詞語 （TOKEN）
- 直譯器根據詞語構建 節點（node）,形成 Dom 樹。
- 如果節點是 js 程式碼，則呼叫js 引擎執行。
- js 程式碼可能會修改 dom 樹的結構。
- 如果節點依賴其他資源，如css image,則呼叫資源載入器來載入這們，但是它是非同步的。不會阻礙 dom 樹的繼續建立；如果 js 資源的url 沒有標明是非同步載入。則會停止當前DOM 的建立，直到 js 資源 載入完成並執行才能繼續 DOM 的建立。 上述的過程中，網頁在被載入中會發 ‘DOMConent’ 事件和 DOM 的‘onload’ 事件，分別在 DOM 樹構建完之後，以及DOM樹構建完成並且網頁依賴的資源都載入完成之後發生，因為某些資源的載入不會阻礙 DOM 樹的構建，所以這兩個事件基本上不會同時發生的。 接下來就是 webkit 利用css 和dom 樹構建 renderObject 樹直到繪圖上下文，這一階段的具體過程如下。
- css 檔案 被css 直譯器解釋成內部表示的結構。
- css 直譯器工作完之後，在DOM 樹上附加解釋後的樣式資訊，這就是 RenderObject 樹。
- RenderObject 節點在建立的同時，webkit 會根據網頁的層次結構建立RenderLayer 樹，同時構建一個虛擬的繪圖上下文。其中這中間還複雜的過程。 RenderObject 樹的建立並不表示DOM 樹會被銷燬， DOM 樹、RenderObject 樹、RenderLayer 樹、繪圖上下文，這四個表示結構一直存在，直到網頁被銷燬，因為它們對於網頁的渲染起了非常大的作用。 最後就是根據繪圖上下文生成最終的影象，這一過程主要依賴2D和3D 圖形庫。
結束語：上面大概介紹一些瀏覽器 webkit 核心的部件的概述，以及它們合作 工作的過程。在後面對瀏覽器中主要的這些核心部件進行更加詳細的分析。使大家更加深入的瞭解 瀏覽器。這可能幫助在優化程式碼可以更多方面的考慮。