瀏覽器的主要功能
瀏覽器的主要功能就是向服務(wù)器發(fā)出請求公浪，在瀏覽器窗口中展示您選擇的網(wǎng)絡(luò)資源。這里所說的資源一般是指 HTML 文檔，也可以是 PDF歼捐、圖片或其他的類型。資源的位置由用戶使用 URI（統(tǒng)一資源標示符）指定晨汹。
瀏覽器的主要組件
img
- 用戶界面 - 包括地址欄窥岩、前進/后退按鈕、書簽菜單等宰缤。除了瀏覽器主窗口顯示的您請求的頁面外颂翼，其他顯示的各個部分都屬于用戶界面。
- 瀏覽器引擎 - 在用戶界面和呈現(xiàn)引擎之間傳送指令慨灭。
- 呈現(xiàn)引擎 - 負責顯示請求的內(nèi)容朦乏。如果請求的內(nèi)容是 HTML，它就負責解析 HTML 和 CSS 內(nèi)容氧骤，并將解析后的內(nèi)容顯示在屏幕上呻疹。
- 網(wǎng)絡(luò) - 用于網(wǎng)絡(luò)調(diào)用，比如 HTTP 請求筹陵。其接口與平臺無關(guān)刽锤，并為所有平臺提供底層實現(xiàn)。
- 用戶界面后端 - 用于繪制基本的窗口小部件朦佩，比如組合框和窗口并思。其公開了與平臺無關(guān)的通用接口，而在底層使用操作系統(tǒng)的用戶界面方法语稠。
- JavaScript 解釋器宋彼。用于解析和執(zhí)行 JavaScript 代碼弄砍。
- 數(shù)據(jù)存儲。這是持久層输涕。瀏覽器需要在硬盤上保存各種數(shù)據(jù)音婶，例如 Cookie。新的 HTML 規(guī)范 (HTML5) 定義了“網(wǎng)絡(luò)數(shù)據(jù)庫”莱坎，這是一個完整（但是輕便）的瀏覽器內(nèi)數(shù)據(jù)庫衣式。
瀏覽器工作流程
img
由圖中可以發(fā)現(xiàn)：
1）解析：
- 解析HTML/SVG/XHTML，Webkit有三個C++的類對應(yīng)這三類文檔檐什。解析這三種文件會產(chǎn)生一個DOM Tree碴卧。
- 解析CSS，解析CSS會產(chǎn)生CSS規(guī)則樹厢汹。
- 解析Javascript螟深，腳本，主要是通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree.
2）解析完成后烫葬，瀏覽器引擎會通過DOM Tree 和 CSS Rule Tree 來構(gòu)造 Rendering Tree界弧。注意：
- 渲染器對應(yīng)于DOM元素，但關(guān)系不是一對一的搭综。非可視化DOM元素將不會插入到渲染樹中垢箕。
- CSS 的 Rule Tree主要是為了完成匹配并把CSS Rule附加上Rendering Tree上的每個Element。也就是DOM結(jié)點兑巾。也就是所謂的Frame条获。
-
然后，計算每個Frame（也就是每個Element）的位置蒋歌，這又叫l(wèi)ayout和reflow過程帅掘。
?
img
3）最后通過調(diào)用操作系統(tǒng)Native GUI的API繪制。
