«

»

浏览器的绘制阶段

浏览器 绘制在浏览器的绘制阶段,会遍历渲染者树,并调用渲染者的“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里主事件循环的代码:

 

(待续)

1 星2 星3 星4 星5 星 (尚无评分)
Loading...Loading...

相关文章

浏览器中元素的定位类型 网页中元素的定位用由position属性确定,分为绝对定位,相对定位。除此之外还有浮动定位。position的取...
浏览器中CSS的盒模型 首先是CSS中画布的概念,根据CSS2规范,名词“画布”描述为“格式化的结构渲染所用的空间”---也就是浏览器...
浏览器的布局 下来就是浏览器的布局过程。当渲染者被创建并且增加到树上时,它并没有位置和尺寸。计算这些值被称为布...
浏览器样式表的规则匹配和级联顺序 浏览器中CSS样式的匹配并非总是那么简单,某些情况下可能需要对规则加以处理以使匹配更容易。下面是几个...
浏览器中使用规则树来计算样式 当计算某个元素的样式内容时,我们首先计算规则树里的一条路径或是使用一条已经存在的路径。接下来就开...
浏览器的样式计算 建立渲染树时需要计算每个渲染对象的可视化属性。这是通过计算每个元素的样式属性来实现的。样式包含HTM...
浏览器中渲染树的构造 当DOM树被构造的同时,浏览器构造了另外一棵树,渲染树。这是棵按其显示顺序排列的可视化元素构成的树。...
浏览器处理脚本和样式表的顺序 因特网的模式是同步的,开发者希望解析器在遇到一个