一、Webkit架構
Webkit的一個顯著的特徵就是它支持不同的瀏覽器，因爲不同瀏覽器的需求不同，所以在Webkit中，一些代碼可以共享，但是另一部分是不同的，這些不同的部分稱爲Webkit移植（Ports）。Webkit的整體結構如圖：
圖中最下面是操作系統，Webkit可以在不同的操作系統上工作。不同瀏覽器可能會依賴不同的操作系統，同一個瀏覽器使用的Webkit也可能依賴不同的操作系統，例如，Chromium瀏覽器支持Windows、Mac OS、Linux、Android等系統。在操作系統層之上就是Webkit賴以工作的衆多第三方庫，這些庫是Webkit運行的基礎。如何高效的使用它們是Webkit和各種瀏覽器廠商的重大課題，主要是如何設計良好的架構來利用它們以獲得高性能。
在這些庫之上就是Webkit項目了，圖中將其分爲兩層，每層包含很多模塊，圖中這些模塊支撐了網頁加載和渲染過程：
- WebCore部分包含了目前被各個瀏覽器所使用的Webkit共享部分，這些都是加載和渲染網頁必不可少的基礎部分，具體包括HTML解釋器、CSS解釋器、SVG、DOM、渲染樹（RenderObject）、RenderLayer樹等，以及Inspector（Web Inspector、調試網頁）。
- JavaScriptCore引擎是Webkit中的默認JavaScript引擎。剛開始，它的性能並不是很好，但是隨着越來越多的優化被加入，現在性能已經非常不錯了。之所以說它是默認的，是因爲它並不是不可替換的，事實上，Webkit中對JavaScript引擎的調用是獨立於引擎之上的。在Google的Chormium開源項目中，它被替換爲V8引擎。
- Webkit Ports指的是Webkit中的非共享部分，對於不同瀏覽器使用的Webkit來說，移植中的這些模塊由於平臺差異、依賴的第三方庫和需求不同，往往按照自己的方式來設計和實現，這也是衆多Webkit版本行爲不一致的重要原因。
- 在往上則是提供嵌入式編程接口，這些嵌入式接口是提供給瀏覽器調用的。
- 當然，由於圖片大小有限，還有一個重要的部分沒有畫出來，那就是測試用例，包括佈局測試用例和性能測試用例。
二、Chromium瀏覽器結構及模塊
1. 結構和模塊
Chromium也是基於Webkit（Blink）的，結構如圖：
圖中描述了Chromium的架構和主要的模塊。從圖中可以看出，Blink只是其中一塊，和它並列的還有很多模塊，包括V8引擎、沙箱模型等等。
在這些模塊之上就是Content模塊和Content接口，它們是Chromium對網頁功能的抽象。它們將下面的渲染機制、安全機制和插件機制等隱藏起來，提供一個接口層。該接口目前被上層模型或者其他項目使用。
Chromium瀏覽器和Content Shell是構件在Content API上的兩個瀏覽器，Chromium具有瀏覽器的完整功能，Content Shell是使用Content API來包裝的一層簡單的殼，但是它也是一個簡單的瀏覽器，用戶可以使用Content模塊來渲染網頁內容。
2. 多進程模型
以前使用瀏覽器打開很多頁面的，不幸其中某個頁面崩潰了，會導致其他所有的頁面也都崩潰。但是，現在好了，瀏覽器都支持多進程模型，雖然會帶來更多的資源消耗，但是它的優勢非常明顯：
- 避免因單個頁面的崩潰而影響整個瀏覽器的穩定；
- 當第三方插件崩潰時也不會影響瀏覽器的整體穩定；
- 更加方便安全模型的實施。
下圖是Chromium的多進程模型：
其中包含一下進程類型：
- Browser進程：瀏覽器的主進程，負責瀏覽器界面的顯示、各個頁面的管理，有且僅有一個。
- Renderer進程：網頁的渲染進程，負責頁面的渲染工作，Blink/Webkit的渲染工作主要在該進程中完成，可能有多個，注意：Renderer進程的數量和用戶打開的頁面數量不一定相等。Chromium設計了靈活的機制，允許用戶配置。
- NPAPI插件進程：該進程是爲NPAPI類型的插件而創建的。其創建的基本原則是每種類型的插件只會被創建一次，而且僅當使用的時候才創建。插件進程是被共享的。
- GPU進程：最多一個，當且僅當GPU硬件加速打開的時候纔會被創建，主要用於3D圖形加速調用的實現。
- Pepper插件進程：同NPAPI插件進程。
3. 多線程模型
每個進程內部都有很多的線程，多線程的目的是爲了保持用戶界面的高響應度，保證UI線程不會被其他費時的操作阻塞從而影響用戶體驗。類似的費時操作有很多，比如本地文件讀寫，數據庫操作等。而在Renderer進程中，Chromium則不讓其他操作阻塞渲染進程的快速進行。更甚者，爲了利用多核的優勢，將渲染過程管線化，只有可以讓渲染的不同階段在不同的線程中執行。下圖是主要進程中的重要線程信息以及它們是如何工作的。
網頁的加載和渲染過程如下：
- Browser進程收到用戶的請求，首先有UI線程處理，而且將相應的任務轉給IO線程，它隨即將該任務交給Renderer進程；
- Renderer進程的IO線程經過簡單的解釋夠交給渲染線程。渲染線程接受請求，加載網頁並渲染網頁，這其中可能需要Browser進程獲取資源和需要GPU進程來幫助渲染。最後Renderer進程將結果有IO線程傳遞給Browser進程；
- 最後，Browser接收到結果並將結果繪製出來。
以上內容都是來自《WebKit技術內幕》