网页渲染机制

浏览器基本结构

---

浏览器结构一般包括如下：
1.用户界面(User Interface)：用户所看到的界面，并且与之交互的功能；
2.浏览器引擎(Browser Engine)：负责控制和管理下一级的渲染引擎；
3.渲染引擎(Rendering Engine)：负责用户的请求（比如html和xml，渲染引擎会解析HTML和XML，以及相应的CSS，然后返回解析的内容）；
4.网络(Networking)：负责处理网路相关事物，处理http请求等；
5.UI后端(UI Backend)：负责绘制浏览器提示框等浏览器组件，其底层使用的是操作系统的用户接口；
6.JavaScript解析器(JavaScript Interpreter)：用来解析以及执行JavaScript代码；
7.数据储存(data storage)：负责持久存储诸如cookie和缓存等应用数据。

渲染引擎以及渲染路径

---

渲染引擎所做是的将内容展现出来，默认是支持HTML、XML还有图片类型，对于其他诸如PDF等类型的内容则需要安装相应插件，但浏览器的展示工作流程基本是一样的。

• 首先解析HTML，生成DOM节点树。

---

解析文档的时候，是从上至下扫描并且解析文档；DOM树，即文档内所有节点构成的一个树形结构。

---

• 其次加载并且解析样式，生成CSSOM(CSS Object Model)

---

CSSOM树，与DOM树结构相似，只是另外为每一个节点关联了样式信息。

---

• 加载并且执行JavaScript代码

---

或许是由于通常会在JavaScript脚本中改变文档DOM结构，于是浏览器以同步方式解析，加载和执行脚本，浏览器在解析文档时，当解析到