導語：本文從市面主流的瀏覽器及相應的內核引擎開始，介紹了為代表的瀏覽器架構及Blink內核的功能架構。為多進程架構，用戶從啟動運行瀏覽器后，先后經過頁面導航、渲染、資源加載、樣式計算、布局、繪制、合成到柵格化，最后完成GPU展示。而頁面渲染完成后，瀏覽器如何響應頁面操作事件也進行了深入的介紹。良心推薦！
本文第二至五部分內容根據 的英文原版《 look at web 》(見參考文獻)，進行翻譯、理解、總結提煉、條理化、加入應用示例、進行相關知識補充擴展而來。
一、瀏覽器概論瀏覽器經歷了很多年的發展，瀏覽器引擎也在不停地迭代和演進。從PC時代到移動端，以獨立瀏覽器的形態還是以系統組件內嵌的形態存在，在互聯網的生態系統中一直扮演著重要的角色。了解瀏覽器及其原理可以讓我們打開另一個世界。
1.瀏覽器引擎
以下是市面留存的主流瀏覽器的引擎介紹。
1.1 瀏覽器引擎
1) ：基于，08年開始作為的引擎，瀏覽器是的實驗版，實驗新特性。
2) ：2010年隨OS X Lion一起面世。層面實現進程隔離與的沙箱設計存在沖突。
3) Blink：基于分支，13年谷歌開始作為 28的引擎集成在瀏覽器里。的同樣基于。
1.2 微軟瀏覽器
目前PC場景操作系統仍是一統天下，對桌面用戶來說edge瀏覽器打開視頻都有允許，雖然IE的市場份額在下降，但是IE曾經也風光過。IE內核以為主，最新的Edge也兼容了內核。
Edge：內核為：EDGE， 10默認瀏覽器，不能單獨下載安裝。兼容內核，同時保留EDGE內核來兼容企業網站
2. 瀏覽器架構
目前瀏覽器的架構主要由下以幾個部分構成。
以下為架構的介紹：
（用于）
相關資料
2.1 多進程架構
圖片引自--doc
2.1.1 多進程架構
早期的web瀏覽器頁面行為不當、瀏覽器錯誤、瀏覽器插件錯誤都會引起整個瀏覽器或當前運行的選項卡關閉。因此將應用程序放在相互隔離的獨立的進程中：
2.1.2 架構組成
2.1.3 渲染過程管理
2.1.4 運行流程2.1.5 插件擴展第三方編寫的NPAPI插件因存在不穩定，同時需控制對系統資源的訪問，在各自獨立的進程中運行edge瀏覽器打開視頻都有允許，與渲染器分開。
插件設計文檔：
2.2 (Blink)架構Blink是Web平臺的渲染引擎，實現了瀏覽器選項卡中呈現的內容：
2.2.1 Blink的運行流程多進程架構，有一個瀏覽器進程和N個沙盒渲染器進程，Blink在沙盒渲染中運行。瀏覽器選項卡、可共享同個渲染器進程。
沙箱運行：在沙箱中，須通過父瀏覽器進程來調度使用資源（文件訪問、網絡、音視頻播放、用戶配置文件讀取(，密碼)等。Blink將瀏覽器進程抽象為一組服務，使用Mojo與服務、瀏覽器進程交互。
2.2.2 渲染進程中的線程
跨線程通信：使用 API，不鼓勵共享內存編程除非性能原因。
2.2.3 Blink的運行和退出
2.2.4 Blink的項目代碼結構
2.2.5 內部構成1) WTF：統一編碼原語，如WTF::, WTF::, WTF::, WTF:: and WTF::來代替std: 等。
2) 內存管理：a. b.(Blink GC) c./free/new/
3) 任務調度：為提高渲染引擎的響應，應執行異步。所有任務都應發布到Blink 任務隊列，指定正確類型并設置優先級，以使得能巧妙地安排任務。
4) Page/Frame///
分別對應選項卡、、.、主線程和工作線程上下文、中的窗口對象。
渲染進程中各種數量關系
5) 進程外
站點隔離：為每個站點創建一個渲染器進程(相同一二級域名)。跨站點由兩個渲染器托管。
6) 分離的/文件
doc = iframe.contentDocumentiframe.remove() //iframe 與 dom 樹分離doc.createElement('div'); //仍可在分離的框架上運行腳本
左滑可查看完整代碼，下同
7) Web IDL綁定
8) V8
關系：一個frame = N個窗口對象 = 用于N個world。對應該窗口對象
V8的API低級且難以使用，在/中提供很多V8 API輔助類。每個C++ DOM對象，如Node都有其對應的V8包裝器。V8包裝器對應的C++ DOM對象具有強引用。C++ DOM對象只對V8包裝器弱引用。
2.3 V8V8是的開源高性能和引擎，用C++編寫，它實現和，可獨立運行或嵌入到任何C++應用程序中，如和Node.js。
相關資料：：
二、的多進程架構注意：以下內容根據 的英文原版《 look at web 》(見參考文獻)，進行翻譯、理解、總結提煉、條理化、加入應用示例、進行相關知識補充擴展而來。
1. 背景：計算機的核心是CPU和： Unit，同時支持并行、串行操作，需很強通用性處理不同數據類型、要支持復雜通用邏輯判斷，需引入大量分支和中斷處理，結構異常復雜。
GPU： Uint，專為執行圖形渲染必須的復雜的數學和幾何計算而設計。
圖片引自 的《 look at web 》
圖片引自 的《 look at web 》
三層計算機體系結構圖片引自 的《 look at web 》
2. 基礎：在和執行程序啟動應用程序時，創建一個進程，并提供”slab”內存，所有應用程序狀態保存在該專用內存中，關閉程序時，系統釋放內存。
應用程序可能會創建多個線程完成工作任務。
圖片引自 的《 look at web 》
圖片引自 的《 look at web 》
3. 瀏覽器架構瀏覽器架構沒有統一標準規范，不同瀏覽器可能使用不同線程或多個不同進程來構建web。少數線程間通過IPC通信。
3.1 不同瀏覽器實現的體系結構
圖片引自 的《 look at web 》
3.2 的多進程架構
圖片引自 的《 look at web 》
4. 不同進程作用
圖片引自 的《 look at web 》
5. 多進程架構優點：
圖片引自 的《 look at web 》
6. 服務化 - 節省更多內存瀏覽器程序中相同的功能方法，正在將瀏覽器的每個部分作為一項服務運行，可以輕松拆分為不同進程或聚合成一個進程。
當在強大的硬件上運行時，它可能會將每個服務拆分為不同的流程，從而提供更高的穩定性，但如果它位于資源約束設備上，會將服務整合到一個流程中，從而節省內存占用。
的平臺上已經使用了類似的方法來整合流程以減少內存使用。
圖片引自 的《 look at web 》
7.給 分配單獨渲染進程 - 站點隔離站點隔離:因不同站點之間共享內存空間會存在同源策略繞過( and )安全問題：%22%20/t%20%。因此為每個跨網站運行單獨的渲染器進程。
站點隔離難點：從根本上改變的通信方式，包括ctrl+F查找、打開等需在不同渲染器進程訪問。【重大版本】。
圖片引自 的《 look at web 》
三、頁面導航過程1. 瀏覽器進程運行
多進程架構啟動多個進程處理不同的任務。選項卡外部的所有內容都由瀏覽器進程處理（包含UI線程、網絡線程、存儲線程）。在地址欄輸入url時，由瀏覽器進程的UI線程處理。
圖片引自 的《 look at web 》
2. 處理輸入當用戶開始輸入地址欄時，UI線程需判斷是搜索查詢還是URL。
3.開始導航用戶點擊進入時：
1) UI線程啟動網絡調用以獲取站點內容，選項卡加載轉圈
2) 網絡線程通過DNS查找域名對應IP及建立http連接
3) 網絡線程接收處理301重定向頭。網絡線程與請求重定向的UI線程通信，啟動另一個URL請求
注冊后，保留其范圍為參考。當導航時，網絡線程根據注冊的范圍檢查域名，若url已注冊 ，UI線程找到渲染進程執行代碼，從緩存加載數據或從網絡加載新資源。生命周期見：
導航預加載
如果最終決定從網絡請求數據，瀏覽器進程與渲染進程間的往返可能導致延時，通過與啟動并行加載資源加速來減少延時，允許標記這些請求，允許服務器決定為這些請求發送不同的內容。
圖片引自上面的生命周期
4. 讀取響應結果
4.1 確定文件MIME類型
網絡線程查看流的前幾個字節，響應頭中-Type頭確定MIME數據類型。因此數據可能丟失，因此用MIME嗅探方式來查看資源。
4.2 處理不同MIME文件
響應文件是HTML，則將數據傳遞給渲染器進程。如果為.zip或其他文件則將數據傳遞給下載管理器。
4.3 安全檢查
5. 查找渲染進程所有檢查完成后，網絡線程告知UI線程數據已準備就緒，UI線程找到渲染進程以繼續渲染網頁。
由于網絡請求可能需要幾百毫秒才能得到響應，為加速此過程，在開始導航網絡線程發送url請求時，已經主動進行查找、啟動渲染進程，數據接收完成后，渲染進程已備用。
6. 提交導航現在數據和渲染器進程已準備就緒，IPC將從瀏覽器進程發送到渲染進程以提交導航。渲染進程確認提交完成，導航完成。文檔加載開始。
1、UI更新：地址欄更新、安全指示器、站點設置UI會反映新頁面站點信息
2、選項卡的會話歷史記錄更新(前進/后退)，為便于關閉瀏覽器后恢復，歷史記錄到磁盤
7. 初始化 load 提交導航后，渲染器進程將繼續加載資源并呈現頁面，一旦渲染器進程“完成”（事件在所有幀上觸發執行完成后）渲染，它就會將IPC發送回瀏覽器進程。
UI線程停止選項卡的加載轉圈。
8.導航到其他站點導航完成后，再次將不同的URL放到地址欄導航，瀏覽器會檢查當前渲染網站的事件。如有設置導航或關閉選項卡時發出警報“離開這個網站嗎？” 包含代碼的選項卡內的所有內容都由渲染進程處理。渲染進程導航操作單擊鏈接或客戶端已運行. = ““ ，過程與流程器進程啟動導航過程相同，不同點在于導航請求是從渲染進程啟動到瀏覽器進程。
頁面生命周期：#ents
圖片引自上面的頁面生命周期四、頁面渲染1. 渲染進程處理頁面內容渲染進程負責選項卡內發生的所有事情。在渲染器進程中
圖片引自 的《 look at web 》
2. 解析
2.1 構建DOM
當渲染進程接收提交的導航消息和HTML數據，主線程開始解析文本串（HTML），使之成為一個DOM。解析中遇到html能優雅容錯。
DOM：瀏覽器頁面內部表示，提供給開發人員通過JS與DOM交互的數據結構和API。
圖片引自 的《 look at web 》
2.2 子資源加載
網站通常使用圖像，CSS和等外部資源，需要從網絡或緩存加載。在解析構建DOM時，主線程可以逐個請求它們。為了加快速度“預加載掃描器”同時運行。
2.3 阻塞解析
當遇到