本文又是我的作业，完成思路借鉴了 版权说明。

作业要求针对一款典型浏览器，绘制浏览器处理时序图对用户界面进行操作(如拖拽窗口)

带有 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 浏览器的结构图如下：

参考