本文又是我的作业,完成思路借鉴了 浏览器安全 -原理 时序 Render DOM 树构建 一文,具体内容均为官方文档和实践得出,最后依然是对老师说的,我是 hejunlin 同学,请别判我抄袭。同时本文可以转载,但请全文转载并注明出处,详细信息具体参考 版权说明

作业要求

  1. 针对一款典型浏览器,绘制浏览器处理时序图

    1. 对用户界面进行操作(如拖拽窗口)
    2. 带有 JavaScript 脚本 HTML 文档
  2. 查阅资料,绘制 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 浏览器的结构图如下:
请输入图片描述

参考

  1. Dependency Walker
  2. How browsers work
  3. 浏览器安全 -原理 时序 Render DOM 树构建
  4. 前端必读:浏览器内部工作原理
  5. 浏览器模糊测试综述
Last modification:November 26th, 2018 at 11:46 am
If you think my article is useful to you, please feel free to appreciate