1、浏览器结构
1.1、 User Interface 用户界面
包括：
- 用来输入URI的地址栏
- 前进、后退按钮
- 书签选项
- 用于刷新及暂停当前加载文档的刷新、暂停按钮
- 用于到达主页的主页按钮
- ......
- 也就是所看到的除了用来显示所请求页面的主窗口之外的其他部分
例如：
1.2、浏览器引擎
用来查询及操作渲染引擎的接口。
可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心
1.3、渲染引擎（浏览器内核）
用来显示请求的内容。
解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面，也有人称之为排版引擎，我们常说的浏览器内核主要指的就是渲染引擎。
各浏览器使用的引擎
firefox:gecko引擎
IE:Trident引擎，
2015年微软推出自己新的浏览器，原名叫斯巴达，后改名edge，使用edge引擎
chrome\safari\opera:webkit引擎，13年chrome和opera开始使用Blink引擎，blink是webkit的一个分支。
UC使用U3引擎
QQ浏览器和微信内核使用X5引擎，16年开始使用Blink引擎
1.4、Networking（网络）
用来完成网络调用，例如http请求，或者资源下载的模块。
1.5、JavaScript Interpreter（JS解释器或JS引擎）
用来解释执行JS代码。
用来解释执行JS脚本的模块，如 V8 引擎、JavaScriptCore
1.6、UI Backend（UI后端）
用来绘制基本的浏览器窗口内的控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同，但功能都是一样的。
1.7、Data Persistence（数据存储）
浏览器在硬盘中保存 cookie、localStorage等各种数据，可通过浏览器引擎提供的API进行调用。
2、浏览器渲染过程（使用渲染引擎）
2.1、Parse HTML && Construct（解析和构建阶段）
该阶段通过多个解析器完成页面内容的解析工作，得到DOM树与CSSOM树（CSS Rule Tree）。
2.1.1、DOM树的建立
- 浏览器通过指定编码(如：UTF-8)可以得到正确的内容字符串(characters)，
- 然后进行词法分析得到Token序列(开始标签、结束标签)，
- 接着Token之间进行优先级比较，完成对Node的创建和父子关系建立，直至最终完成DOM树的建立。
2.1.2、CSSOM树的建立
同理HTML解析器在遇到内联style标签时，也会触发CSS解析器对样式内容的解析。 CSSOM树的构建与DOM树构建是并行的。
2.1.3 解析JavaScript脚本
主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree. 加载JS脚本会阻塞DOM树和CSSOM树的构建。
2.1.4 将DOM tree 和 CSSOM tree 构建成渲染树（Rendering Tree / Layout Tree）
2.2 Layout / Reflow（布局，也可称为回流阶段）
当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。
这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
布局流程的输出是一个“盒模型”，它会精确地捕获每个元素在视口内的确切位置和尺寸，所有相对测量值都将转换为屏幕上的绝对像素。
2.3 Paint（绘制阶段）
将渲染树转换成屏幕上的像素。
