浏览器基本结构
浏览器结构一般包括如下：
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结构，于是浏览器以同步方式解析，加载和执行脚本，浏览器在解析文档时，当解析到<script>标签时，会解析其中的脚本（对于外链的JavaScript文件，需要先加载该文件内容，再进行解析），然后立即执行，这整个过程都会阻塞文档解析，直到脚本执行完才会继续解析文档。就是说由于脚本是同步加载和执行的，它会阻塞文档解析，这也解释了为什么现在通常建议将<script>标签放在标签前面，而不是放在<head>标签里。
- 根据DOM和CSSOM，生成渲染树(Rendering Tree)
渲染树，代表一个文档的视觉展示，浏览器通过它将文档内容绘制在浏览器窗口，展示给用户，它由按顺序展示在屏幕上的一系列矩形对象组成，这些矩形对象都带有字体，颜色和尺寸，位置等视觉样式属性。对于这些矩对象，FireFox称之为框架（frame）,Webkit浏览器称之为渲染对象（render object, renderer），后文统称为渲染对象。
- 布局，根据生成的渲染树的每一个节点摆放到相应的位置上
创建渲染树后，下一步就是布局（Layout）,或者叫回流（reflow,relayout），这个过程就是通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸，将其安置在浏览器窗口的正确位置，而有些时候我们会在文档布局完成后对DOM进行修改，这时候可能需要重新进行布局，也可称其为回流，本质上还是一个布局的过程，每一个渲染对象都有一个布局或者回流方法，实现其布局或回流。
布局是一个从上到下，从外到内进行的递归过程，从根渲染对象，即对应着HTML文档根元素<html>，然后下一级渲染对象，如对应着<body>元素，如此层层递归，依次计算每一个渲染对象的几何信息（位置和尺寸）。
- 遍历渲染树的每一个节点，为每一个节点配套相应的样式
浏览器UI组件将遍历渲染树并调用渲染对象的绘制（paint）方法，将内容展现在屏幕上，也有可能在之后对DOM进行修改，需要重新绘制渲染对象，也就是重绘，绘制和重绘的关系可以参考布局和回流的关系。
Webkit引擎渲染流程图
Paste_Image.png
Gecko引擎渲染流程图
Paste_Image.png
网友评论