在浏览器的绘制阶段，会遍历渲染者树，并调用渲染者的“paint”方法在屏幕上显示内容。绘制需要用到UI基础组件。本章介绍有关UI的内容。象布局一样，绘制也可能是全局的—整棵树都被绘制–或者是增量的。在增量绘制过程中，某些渲染者发生了改动却没有影响整棵树。改变的渲染者在屏幕上重画它的客户区域。这会导致OS把它看成个“脏”区域，然后产生了“paint”事件。OS会聪明的完成它，把几个相连的区域一并处理。
在Chrome中这会非常复杂，因为渲染者在不同的进程里而非主进程。Chrome某种程度上模拟了OS的行为。表现层监听这些事件，转发消息到根渲染者。遍历树直至到达对应渲染者。这会重绘它自己（通常也包括它的子元素）。
绘制的顺序
CSS2里定义了绘制进程的顺序— http://www.w3.org/TR/CSS21/zindex.html。这实际上是元素堆放在内容栈中的次序。因为栈是从后往前绘制的，所以会对绘制顺序产生影响。块渲染者的栈顺序是：
1 背景色
2 背景图片
3 边框
4 子元素
5 外形
Firefox显示列表
Firefox检查渲染树，为要绘制的矩形建立了显示列表。包含了以正确的绘制顺序（先是渲染者的背景，然后是边框等等）排列的，对应于矩形的渲染者。
这种方式树的绘制只需要遍历一次，而不是先画所有背景，再画所有图片，然后是所有边框这样的遍历多次。
Firefox通过不添加设为隐藏的元素，象被其它不透明元素完全覆盖的元素，来优化这个过程。
Webkit矩形存储
在绘制之前，Webkit把旧的矩形保存成位图。然后只绘制新旧矩形之间的差别部份。
动态改变
浏览器尝试以尽可能最小的动作应对改变。所以改变某元素的颜色只会导致该元素重绘。元素位置的改变会导致元素，它的子元素以及亲戚元素的重新布放和绘制。增加一个DOM节点会导致布局和节点的重绘。重大的改变，象增加”HTML”元素的字号，会导致缓存失效，整棵树都会被重新布放和绘制。
渲染者引擎的线程
渲染者进程是单线程的。几乎所有东西，除了网络操作，都是在单一线程里发生的。在Firefox和safari里这是浏览器的主线程。在Chrome里这是标签页的主线程。
网络操作可以被几个并行线程执行。并行连接的个数是有限的（通常是2-6个连接。Firefox是3个，例如（for iexplorer？），用了6个）。
事件循环
浏览器的主线程是个事件循环。这是个无限循环，保持进程存活。它等待事件（象布局和绘制事件）并处理它们。这是Firefox里主事件循环的代码：
while (!mExiting)
NS_ProcessNextEvent(thread);
（待续）
原创文章，作者：苏葳，如需转载，请注明出处：https://www.swmemo.com/2095.html
