How Browsers Work<二>渲染引擎--painting

在绘制这一阶段，渲染树会被遍历并且渲染中“paint”方法可以理解为将内容绘制到屏幕上。绘制使用了UI后端的基本部件。更多在UI章节。

Global and Incremental

像layout一样，painting可能是全局的-整棵树被绘制-或者是增量的。在增量的绘制中，一些渲染器以某种不影响整棵树的方法改变。改变渲染器使得绘制在屏幕上的矩形无效。这将使OS发现脏的区域并且生成一个“paint”事件，OS是比较聪明的，他会合并几个这样的区域为一个。在chrome由于渲染器先是处于一个不同的进程中然后再回到主进程，他会更加复杂。chrome在一些程度上模拟OS的行为。他会监听一些时间并且给根渲染器传递消息。渲染树会一直被遍历，直到相关的渲染器被找到，然后将重新绘制这个渲染器到屏幕上（通常还包括他的孩子）。

绘制的顺序

CSS2定义了绘制的过程-http://www.w3.org/TR/CSS21/zindex.html。这个顺序通常与元素被压入stacking contexts的顺序有关。由于栈是后进先出的，这将影响绘制的顺序，一个块渲染器中栈的顺序：

背景色

背景图片

border

children

outline

Firefox display list

火狐遍历渲染器树并且对每个绘制的矩形建一个display列表，它包含这个矩形相关的渲染器，并且以一个正确的顺序排列。

这样的话被重新绘制时树将会被遍历一次而不是多次-比如先绘制背景色，再绘制所有图片，之后再border等。

火狐优化这个过程通过不加入一些元素并把它隐藏，比如一些元素完全在其他不透明的元素之下。

Webkit rectangle storage

在重新绘制之前，webkit会议微凸的形式保存旧的矩形，然会只绘制新旧相交的差值。

Dynamic changes（动态改变）

浏览器对于一些文档的尽量做出最小的变化，当改变一个元素的颜色时仅仅重新绘制这个元素；改变元素的位置时将造成这个元素的布局改变并重新和绘制，也可能会波及他的孩子和兄弟节点；当添加一个DOM节点时将布局这个节点并且重新绘制。大量的改变，比如“html”元素字体大小的改变建造成缓存无效，使得整棵树重新布局并且重新被绘制。

The rendering engine’s threads（渲染引擎的线程）

渲染引擎是单线程的，除了网络操作，几乎每个过程都发生在一个单一的线程中。在Firefox和safari这将是浏览器的主线程。在chrome中这是tag的主线程。

网络操作是几个并行的线程同时进行，并行的数量也会有限制（通常是2-6.firefox3使用的是6）。

Event loop（事件循环）

浏览器的主线程是一个事件循环它通过无限循环来使进程处于活跃状态。他等待事件的发生并且处理他们。下面是Firefox关于主线程循环事件的代码：

while (!mExiting)
NS_ProcessNextEvent(thread);