瀏覽器的主要功能
瀏覽器的主要功能就是向服務器發出請求，在瀏覽器窗口中展示您選擇的網絡資源。這里所說的資源一般是指 HTML 文檔，也可以是 PDF、圖片或其他的類型。資源的位置由用戶使用 URI（統一資源標示符）指定。
瀏覽器的主要組件
img
- 用戶界面 - 包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示的您請求的頁面外，其他顯示的各個部分都屬于用戶界面。
- 瀏覽器引擎 - 在用戶界面和呈現引擎之間傳送指令。
- 呈現引擎 - 負責顯示請求的內容。如果請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，并將解析后的內容顯示在屏幕上。
- 網絡 - 用于網絡調用，比如 HTTP 請求。其接口與平臺無關，并為所有平臺提供底層實現。
- 用戶界面后端 - 用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操作系統的用戶界面方法。
- JavaScript 解釋器。用于解析和執行 JavaScript 代碼。
- 數據存儲。這是持久層。瀏覽器需要在硬盤上保存各種數據，例如 Cookie。新的 HTML 規范 (HTML5) 定義了“網絡數據庫”，這是一個完整（但是輕便）的瀏覽器內數據庫。
瀏覽器工作流程
img
由圖中可以發現：
1）解析：
- 解析HTML/SVG/XHTML，Webkit有三個C++的類對應這三類文檔。解析這三種文件會產生一個DOM Tree。
- 解析CSS，解析CSS會產生CSS規則樹。
- 解析Javascript，腳本，主要是通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree.
2）解析完成后，瀏覽器引擎會通過DOM Tree 和 CSS Rule Tree 來構造 Rendering Tree。注意：
- 渲染器對應于DOM元素，但關系不是一對一的。非可視化DOM元素將不會插入到渲染樹中。
- CSS 的 Rule Tree主要是為了完成匹配并把CSS Rule附加上Rendering Tree上的每個Element。也就是DOM結點。也就是所謂的Frame。
-
然后，計算每個Frame（也就是每個Element）的位置，這又叫layout和reflow過程。
?
img
3）最后通過調用操作系統Native GUI的API繪制。
