WebKit隨筆（一）

本文依據朱永盛老師的《WebKit技術內幕》一書作爲參考，結合網絡共享資源對Webkit的歷史和技術點進行隨筆記錄，或跳過一些理解不到位的。

一、瀏覽器簡史

1. 93年網景瀏覽器（netscape）誕生，宣佈第一代瀏覽器的告世。
2. 95年微軟IE（Internet Explorer）受益於window系統的捆綁安裝，將老大哥網景拉下馬，並一家獨大。
3. 98年敗落的網景公司的工程師們聯合成立了Mozilla基金會，主導開發了著名的開源項目火狐（Firefox）瀏覽器，04年發佈1.0版本。
4. 至此，根正苗紅並擁有高用戶體驗的 Firefox 逐步蠶食不可一世IE瀏覽器的市場份額。
5. 此時，蘋果發佈了 Safari 瀏覽器，開源了大名鼎鼎的 Webkit 渲染引擎的項目代碼。
6. 08年，Google以 Webkit 爲內核，創建了Chromium，在Chromium保持技術先進的基礎上（試驗田），Google發佈了更穩定版本的Chrome瀏覽器，Chrome在各個方面做的很好，迅速加入IE、Firefox瓜分瀏覽器市場份額的大戰，三足鼎立。

二、HTML5下的瀏覽器

1. 瀏覽器基本功能：網絡（網絡是Web應用的瓶頸）、資源管理、網頁瀏覽、多頁面管理、插件和擴展、賬號和同步、安全機制、開發者工具。
2. IE瀏覽器到目前爲止只支持Window系統，Firefox尚不支持IOS系統。
3. HTML5作爲新一代的網頁標準，是一系列新技術的集合：離線、儲存、連接、文件訪問、語義、音頻和視頻、3D和圖形、展示、性能、其他。
4. HTML5標準問世，各大瀏覽器廠商都齊頭向實現這些相關功能前進，連自大的微軟也不得不迫於形勢放下了一貫以來的驕縱風格。
5. 用戶代理（User Agent）是一個很有趣的現象，本來這是瀏覽器向服務提供商提供的類似身份證明的頭部文件信息，其他後來的瀏覽器爲了享有同樣的服務提供的定製內容，不得不僞裝了這個頭部信息。（這些僞裝者不僅有臭名昭著的IE更有Safari、Chrome等現代瀏覽器）

三、瀏覽器內核

1. 瀏覽器內核通常也是渲染引擎，根據描述構建數學模型，通過模型生成圖像。
2. 主流的瀏覽器內核有Trident、Gecko、WebKit，分別是IE、火狐、Chrome的內核。

（13年Google的Blink內核其實根源也是WebKit,Blink是WebKit的分支，緣由是Google和Apple的對WebKit的進化概念相左）。

1. 渲染引擎主要包括 HTML解釋器、CSS解釋器、佈局、JavaScript引擎、繪圖。

四、WebKit的渲染過程

根據數據的流向，將渲染過程分成三個階段。

第一個階段是從網頁的RUL的構建完DOM樹

1. 當用戶輸入URL時，WebKit調用其資源加載器加載該URL對應的網頁。
2. 加載器依賴網絡模塊建立連接，發送請求並接收答覆。
3. WebKit接收到各種資源或數據，這些資源可能是同步或異步獲取的。
4. 網頁被交給HTML解釋器轉換成一些列的詞語（Token）。
5. 解釋器根據詞語構建節點（Node），形成DOM樹。
6. 如果節點是JavaScript的話，調用JavaScript引擎解釋並執行。
7. JavaScript代碼可能會修改DOM樹的結構。
8. 如果節點需要依賴其他資源，例如圖片、CSS、視頻等，調用資源加載器來加載他們，但它們是異步的，不會阻礙當前DOM樹的繼續構建；如果是JavaScript資源URL（並沒有標記異步方式async），則需要停止當前DOM樹的創建，直到JavaScript的資源加載並被JavaScript引擎執行後才繼續DOM樹的創建。

第二個階段是從DOM樹到構建完WebKit的繪圖上下文

1. CSS文件被CSS解析器解析成內部表示結構。
2. CSS解釋器工作完之後，在DOM樹上附加解釋後的樣式信息，這就是RenderObject樹。
3. RenderObject節點在創建的同時，Webkit會根據網頁的層次結構創建RenderLayer樹，同時構建一個虛擬的繪圖上下文。

第三個階段是從繪圖上下文到生成最終的圖像

1. 繪圖上下文是一個與平臺無關的抽象類，它將每個繪圖操作橋接到不同的具體實現類，也就是繪圖具體實現類。
2. 繪圖實現類也可能有簡單的實現，也有可能有複雜的實現。在Chromium中，它的實現相當複雜，需要Chromium的合成器來完成成複雜的多進程和GPU加速機制，這在後面會涉及。
3. 繪圖實現類將2D圖形庫或者3D圖形庫繪製的結果保存下來，交給瀏覽器來同瀏覽器界面一起顯示。

五、WebKit架構

WebKit之所以支持很多瀏覽器和操作系統，它的祕密就是保持核心，充分解耦。

1. 最底層是“操作系統”，瀏覽器屬於應用層，理所當用需要調用操作系統與硬件的驅動處理。
2. 操作系統之上是各類WebKit工作依賴的第三方庫，這些庫是Webkit運行和處理的基礎包。比如：圖形庫，網絡庫，視頻庫。加載和渲染網頁自然需要運用到他們。如何更高效對接這些底層庫，並設計健壯的架構來支撐將來可能愈發多和複雜的基礎庫，正是我們瀏覽器開發者所要考慮的重要問題。
3. 在這兩者之上，我們終於回到正道WebKit的項目部分。這其中包括大多數瀏覽器所共享的WebCore部分和非共享的WebKit Ports部分。
4. WebCore具體包括瀏覽器加載和渲染網頁的基礎部分，比如HTML解釋器、CSS解釋器、SVG、DOM、渲染樹等。JavaScriptCore引擎是WebKit的默認JavaScript引擎，事實上，WebKit對JS引擎並不高度聚合，在Google的Chromium中，它被替換成了V8引擎。
5. Webkit Ports是差異各種操作系統和瀏覽器所產生的可自設計部分，其中包括硬件加速架構、網絡棧、視頻解碼、圖片解碼等。
6. 在WebCore和WebKit Ports之上是對外暴露的嵌入式編程接口。這些接口提供給瀏覽器調用（並不絕對只是瀏覽器）。