简述网页的渲染引擎

渲染引擎

我们的参考浏览器 - Firefox，Chrome和Safari是建立在两个渲染引擎上。
Firefox使用Gecko - 一个“自制”Mozilla渲染引擎。
Safari和Chrome都使用Webkit。

Webkit是一个开源渲染引擎，作为Linux平台的引擎启动，并被Apple修改为支持Mac和Windows。有关更多详细信息，请参阅
http://webkit.org/。

主流

呈现引擎将开始从网络层获取所请求的文档的内容。这通常是在8K块。

之后，这是渲染引擎的基本流程：

图2：渲染引擎​​的基本流程。

呈现引擎将开始解析HTML文档，并将标签转换为称为“内容树”的树中的DOM节点。它将解析外部CSS文件和样式元素中的样式数据。样式信息以及HTML中的可视化指令将用于创建另一个树 - 渲染树（Render Tree）。

渲染树包含具有视觉属性（如颜色和尺寸）的矩形。矩形以正确的顺序显示在屏幕上。

在构造渲染树之后，它通过“ 布局(Layout)”过程。
这意味着给每个节点在其应该出现在屏幕上的确切坐标。
下一个阶段是绘画（Painting）- 渲染树将被遍历，每个节点将使用UI后端图层绘制。

重要的是要理解这是一个渐进的过程。
为了更好的用户体验，呈现引擎将尽力在屏幕上显示内容。
它不会等到所有的HTML被解析之后才开始构建和布局渲染树。
将对内容的一部分进行解析和显示，同时该过程继续保持来自网络的其余内容。

主要流程示例

图3：Webkit主流程

图4：Mozilla的Gecko渲染引擎主流程（3.6）

从图3和图4可以看出，尽管Webkit和Gecko使用略有不同的术语，但流程基本相同。

Gecko调用可视化格式化元素的树 - 帧树（Frame tree）。每个元素是一个框架。Webkit使用术语“渲染树（Render Tree）”，它由“渲染对象（Render Objects）”组成。Webkit使用术语“布局（Layout）”来放置元素，而Gecko将其称为“Reflow”。“附件（Attachment）”是Webkit的术语，用于连接DOM节点和可视信息以创建渲染树。一个次要的非语义差别是Gecko在HTML和DOM树之间有一个额外的层。它被称为“内容宿（Content Sink）”，是一个制作DOM元素的工厂。