浏览器的渲染机制

浏览器的基础结构

在了解浏览器的渲染机制之前我们先熟悉一下浏览器的基础结构，一般我们把浏览器的基础结构分为一下七个部分：

1. 用户界面（User lnterface）:即用户看到的及与之交互的功能组件，比如地址栏，返回，前进按钮等；
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和缓存等应用数据。

浏览器内核

各大浏览器在内核上有一定差别，大致可以分为以下几内：

• Trident内核： 比如IE;
• Webkit内核：比如 Chrome，Safari
• Geckon内核： 比如FireFox

浏览器的渲染机制

Webkit内核浏览器渲染机制
以Webkit内核浏览器为例，浏览器的渲染可以分为以下几步：
1.构建DOM树（DOM tree）:在刚开始渲染时，浏览器会自上而下解析HTML文档生成DOM节点树，也叫做内容树（content tree）;
2.加载解析样式，构建CSSOM树（CSS Object Model tree）；
3.加载并执行JavaScript代码；
4.根据DOM树和CSSOM树，生成渲染树（render tree）
5.布局（layout）:根据渲染树将节点树的每一个节点布局在屏幕的正确位置；
6.绘制（painting）：遍历渲染树绘制的所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成的。
Gecko内核浏览器渲染机制
Gecko浏览器和Webkit浏览器渲染流程大致相同,不同的是：
1.Webkit浏览器中的渲染树(render tree)，在Gecko浏览器中对应的则是框架树（frame tree）,渲染对象(render object)对应的是框架（frame）;
2.Webkit中的布局（Layout）过程，在Gecko中称为回流（Reflow）,本质是一样的，后文会解释回流的另一层含义–重新布局；
3.Gecko中HTML和DOM树中间多了一层内容池（Content sink）,可以理解成生成DOM元素的工厂。
点击查看更多浏览器的工作原理