本文又是我的作業，完成思路借鑒了 版權說明。

作業要求針對一款典型瀏覽器，繪制瀏覽器處理時序圖對用戶界面進行操作(如拖拽窗口)

帶有 JavaScript 腳本 HTML 文檔

查閱資料，繪制 Edge 瀏覽器的參考架構

瀏覽器時序圖

對用戶界面進行操作(如拖拽窗口)

在這里我使用 Chrome 瀏覽器訪問我個人博客，我的博客使用了響應式布局，在這我已經加載好了我的網頁，然后使用 Chrome 的性能工具錄制了我拖拽窗口的過程，并對此進行分析。

可以到在這個過程中 Chrome 并沒有向網絡棧請求資源，涉及到的只有內核部分的渲染，具體過程是 Recaculate Style – Layout – Update Layer Tree – Paint – Update Layer Tree – Paint – Composite Layers。所以該操作時序圖如下：

帶有 JavaScript 腳本 HTML 文檔

其時序圖如下：

瀏覽器基本結構

首先我們復習下上課說的瀏覽器的基本結構，由于課件版權問題，我就自己畫一個：

大致來說，瀏覽器分為八個部分：用戶界面：與用戶交互、接受用戶操作、 展現瀏覽器當前狀態。

瀏覽器引擎：一個可嵌入的組件，提供查詢和操作渲染引擎的高層接口(加載、刷新、后退、 錯誤信息等)，其使渲染引擎平臺無關，提高可移植性。

渲染引擎：瀏覽器的核心部分

解析 HTML 文檔和 CSS 描述

依據 CSS，完成 HTML 布局

網絡：提供網絡相關的功能，如協議解析、網絡 I/O 等。

JavaScript 解釋器：解析并執行 JavaScript 代碼，結果返回給渲染引擎。

渲染

XML 解析器：解析XML文檔。

用戶界面后端：提供繪制、窗口原語和字體等。

數據存儲：存儲書簽、Cookie、緩存等各種數據到硬盤上。

Edge 瀏覽器的參考架構

首先我們來完成這一部分，參考 Chrome 的架構，基本上我們把每個部分所使用的模塊找出來即可。

于是我們很容易可以查找 Microsoft Edge 的渲染引擎是

接下來我們從網上可以搜到 Edge 的 JavaScript 解釋器是和 ie 同名的 于是默念一遍 M$ 大法好。

接下來，我就找不到任何信息了，為了完成作業，我找遍了各種英文資料、微軟官方文檔，可一無所獲，但最后發現了

首先我們還是從 Process Explorer 中入手，查看 MicrosoftEdgecp.exe 調用的 .dll，我將整個列表截圖如下：

在這里我們可以發現一個叫 EdgeContent.dll 的庫，猜測這應該就是 Edge 的瀏覽器引擎。

于是我們繪制 Edge 瀏覽器的結構圖如下：

參考