原文：Tali Garsiel
译文：zzzaquarius
来源：http://blog.csdn.net/zzzaquarius/article/details/6532299
（接上文）
绘制顺序
css2定义了绘制过程的顺序－http://www.w3.org/TR/CSS21/zindex.html。这个就是元素压入堆栈的顺序，这个顺序影响着绘制，堆栈从后向前进行绘制。
一个块渲染对象的堆栈顺序是：
1. 背景色
2. 背景图
3. border
4. children
5. outline
Firefox显示列表
Firefox读取渲染树并为绘制的矩形创建一个显示列表，该列表以正确的绘制顺序包含这个矩形相关的渲染对象。
用这样的方法，可以使重绘时只需查找一次树，而不需要多次查找——绘制所有的背景、所有的图片、所有的border等等。
Firefox优化了这个过程，它不添加会被隐藏的元素，比如元素完全在其他不透明元素下面。
Webkit矩形存储
重绘前，webkit将旧的矩形保存为位图，然后只绘制新旧矩形的差集。
动态变化
浏览器总是试着以最小的动作响应一个变化，所以一个元素颜色的变化将只导致该元素的重绘，元素位置的变化将大致元素的布局和重绘，添加一个Dom节点，也会大致这个元素的布局和重绘。一些主要的变化，比如增加html元素的字号，将会导致缓存失效，从而引起整数的布局和重绘。
渲染引擎的线程
渲染引擎是单线程的，除了网络操作以外，几乎所有的事情都在单一的线程中处理，在Firefox和Safari中，这是浏览器的主线程，Chrome中这是tab的主线程。
网络操作由几个并行线程执行，并行连接的个数是受限的（通常是2－6个）。
事件循环
浏览器主线程是一个事件循环，它被设计为无限循环以保持执行过程的可用，等待事件（例如layout和paint事件）并执行它们。下面是Firefox的主要事件循环代码。
while (!mExiting)
NS_ProcessNextEvent(thread);
CSS2 可视模型 CSS2 visual module
画布 The Canvas
根据CSS2规范，术语canvas用来描述格式化的结构所渲染的空间——浏览器绘制内容的地方。画布对每个维度空间都是无限大的，但浏览器基于viewport的大小选择了一个初始宽度。
根据http://www.w3.org/TR/CSS2/zindex.html的定义，画布如果是包含在其他画布内则是透明的，否则浏览器会指定一个颜色。
CSS盒模型
CSS盒模型描述了矩形盒，这些矩形盒是为文档树中的元素生成的，并根据可视的格式化模型进行布局。每个box包括内容区域（如图片、文本等）及可选的四周padding、border和margin区域。
每个节点生成0－n个这样的box。
所有的元素都有一个display属性，用来决定它们生成box的类型，例如：
block－生成块状box
inline－生成一个或多个行内box
none－不生成box
默认的是inline，但浏览器样式表设置了其他默认值，例如，div元素默认为block。可以访问http://www.w3.org/TR/CSS2/sample.html查看更多的默认样式表示例。
定位策略 Position scheme
这里有三种策略：
1. normal－对象根据它在文档的中位置定位，这意味着它在渲染树和在Dom树中位置一致，并根据它的盒模型和大小进行布局
2. float－对象先像普通流一样布局，然后尽可能的向左或是向右移动
3. absolute－对象在渲染树中的位置和Dom树中位置无关
static和relative是normal，absolute和fixed属于absolute。
在static定位中，不定义位置而使用默认的位置。其他策略中，作者指定位置——top、bottom、left、right。
Box布局的方式由这几项决定：box的类型、box的大小、定位策略及扩展信息（比如图片大小和屏幕尺寸）。
Box类型
Block box：构成一个块，即在浏览器窗口上有自己的矩形
Inline box：并没有自己的块状区域，但包含在一个块状区域内
block一个挨着一个垂直格式化，inline则在水平方向上格式化。
Inline盒模型放置在行内或是line box中，每行至少和最高的box一样高，当box以baseline对齐时——即一个元素的底部和另一个box上除底部以外的某点对齐，行高可以比最高的box高。当容器宽度不够时，行内元素将被放到多行中，这在一个p元素中经常发生。
定位 Position
Relative
相对定位——先按照一般的定位，然后按所要求的差值移动。
Floats
一个浮动的box移动到一行的最左边或是最右边，其余的box围绕在它周围。下面这段html：
<p>
<img style=”float:right” src=”images/image.gif” width=”100″ height=”100″>Lorem ipsum dolor sit amet, consectetuer…
</p>
将显示为：
Absolute和Fixed
这种情况下的布局完全不顾普通的文档流，元素不属于文档流的一部分，大小取决于容器。Fixed时，容器为viewport（可视区域）。
图17：fixed
注意－fixed即使在文档流滚动时也不会移动。
Layered representation
这个由CSS属性中的z-index指定，表示盒模型的第三个大小，即在z轴上的位置。Box分发到堆栈中（称为堆栈上下文），每个堆栈中靠后的元素将被较早绘制，栈顶靠前的元素离用户最近，当发生交叠时，将隐藏靠后的元素。堆栈根据z-index属性排序，拥有z-index属性的box形成了一个局部堆栈，viewport有外部堆栈，例如：
<STYLE type=”text/css”>
div {
position: absolute;
left: 2in;
top: 2in;
}
</STYLE>
<P>
<DIV
style=”z-index: 3;background-color:red; width: 1in; height: 1in; “>
</DIV>
<DIV
style=”z-index: 1;background-color:green;width: 2in; height: 2in;”>
</DIV>
</p>
结果是：
虽然绿色div排在红色div后面，可能在正常流中也已经被绘制在后面，但z-index有更高优先级，所以在根box的堆栈中更靠前。
国外也有网友根据浏览器的工作原理绘制了几张工作流程图，方便大家通过简易的图片来了解这个辛苦的过程：
公益传播测试知识、技能与正能量！感谢作者！分享测试生活，思考测试人生！
文章图片来自网络，如有侵权请见谅，请联系我们妥善处理。
twftesting@163.com
欢迎加入我们：
官网：www.huicewang.com
中国软件测试群： 172923163
测试编程技术交流群: 231767115
性能测试技术交流群: 385202672
咨询QQ：2657535456
公众号：慧测
