本文又是我的作业,完成思路借鉴了 浏览器安全 -原理 时序 Render DOM 树构建 一文,具体内容均为官方文档和实践得出,最后依然是对老师说的,我是 hejunlin 同学,请别判我抄袭。同时本文可以转载,但请全文转载并注明出处,详细信息具体参考 版权说明。
作业要求
针对一款典型浏览器,绘制浏览器处理时序图
- 对用户界面进行操作(如拖拽窗口)
- 带有 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 的渲染引擎是 EdgeHTML.dll,这点也很容易从 Process Explorer 中看出。
接下来我们从网上可以搜到 Edge 的 JavaScript 解释器是和 ie 同名的 Chakra,从其维基百科中我们可以知道微软于 2015 年 12 月 5 日,将 Chakra 的核心组件作为 ChakraCore 开源。于是默念一遍 M$ 大法好。
接下来,我就找不到任何信息了,为了完成作业,我找遍了各种英文资料、微软官方文档,可一无所获,但最后发现了浏览器安全 -原理 时序 Render DOM 树构建这篇文章,可能是师兄写的作业吧,终于有了思路。
首先我们还是从 Process Explorer 中入手,查看 MicrosoftEdgecp.exe 调用的 .dll,我将整个列表截图如下:
在这里我们可以发现一个叫 EdgeContent.dll 的库,猜测这应该就是 Edge 的浏览器引擎。
于是我们绘制 Edge 浏览器的结构图如下: