网页渲染必须在很早的阶段进行，可以早到页面布局刚刚定型。因为样式和脚本都会对网页渲染产生关键性的影响。所以专业开发者必须了解一些技巧，从而避免在实践的过程中遇到性能问题。
Webkit渲染主要流程如下：
webkit.jpg
Mozilla的Gecko渲染引擎主要流程如下：
Mozilla.jpg
由图可以发现，两个引擎过程基本相同。主要有三个步骤：
1.解析。浏览器会解析HTML/SVG/XHTML，事实上，webkit有三个C++的类对应这三类文档。浏览器解析这三种文件会产生一个DOM Tree；解析CSS，产生style rules；解析Javacript，主要通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree
2.解析完成后，浏览器引擎会通过DOM Tree和CSS Rule Tree来构造Rendering Tree。
3.调用操作系统Native GUI的API绘制。
两者的语义差别：
webkit把可视化好的可视元素成为Render Tree,用Layout来表示元素的布局
Gecko把可视化好的可视元素成为Frame Tree，每个元素就是一个frame，元素的布局成为Reflow
还有一个细小的差别差别在于：Gecko在HTML与DOM树之间还多一个层content Sink，这是创建DOM对象的工厂。
1467471767787_3.jpg
1.解析 HTML 标签, 构建 DOM 树
一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。创建一棵由一组待生成渲染的对象组成的渲染树（在Webkit中这些对象被称为渲染器或渲染对象，而在Gecko中称之为“frame”。）渲染树反映了文档对象模型的结构，但是不包含诸如<head>标签或含有display:none属性的不可见元素。在渲染树中，每一段文本字符串都表现为独立的渲染器。每一个渲染对象都包含与之对应的DOM对象，或者文本块，还加上计算过的样式。换言之，渲染树是一个文档对象模型的直观展示。
2.解析 CSS 标签, 构建 CSSOM 树
解析CSS会产生CSS规则树。
3.解析JavaScript，脚本
主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.
4.把 DOM 和 CSSOM 组合成 渲染树 (render tree)
Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
5.在渲染树的基础上进行布局, 计算每个节点的几何结构
6.把每个节点绘制到屏幕上 (painting)
Repaint重绘
当改变那些不会影响元素在网页中的位置的元素样式时，譬如background-color(背景色)， border-color(边框色)， visibility(可见性)，浏览器只会用新的样式将元素重绘一次(这就是重绘，或者说重新构造样式)。
Reflow重排
当改变影响到文本内容或结构，或者元素位置时，重排或者说重新布局就会发生。reflow 会从<html>这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置，在reflow过程中，可能会增加一些frame，比如一个文本字符串必需被包装起来。这些改变通常由以下事件触发：
- DOM操作（元素添加，删除，修改，或者元素顺序的改变）;
- 容变化，包括表单域内的文本改变;
- CSS属性的计算或改变;
- 添加或删除样式表;
- 更改“类”的属性;
- 浏览器窗口的操作（缩放，滚动）;
- 伪类激活（：悬停）。
注：display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发现位置变化。
浏览器如何优化渲染
浏览器尽可能将重绘/重构 限制在被改变元素的区域内。比如，对于位置固定或绝对的元素，其大小改变只影响元素本身及其子元素，然而，静态定位元素的大小改变会触发后续所有元素的重流。
另一种优化技巧是，在运行几段JavaScript代码时，浏览器会缓存这些改变，在代码运行完毕后再将这些改变经一次通过加以应用。
网友评论