«

»

浏览器的渲染引擎

浏览器 渲染浏览器的渲染引擎的责任嘛。。。就是渲染,在浏览器屏幕上显示请求到的内容。默认情况下渲染引擎可以显示HTML和XML文档以及图片。可以通过插件(浏览器扩展)来显示其它类型。一个例子是用PDF浏览插件显示PDF文件。我们会在某章里讨论插件和扩展。在本章我们会着重于最主要的使用场景—显示经过CSS格式化过的HTML和图片。

渲染引擎

我们参照的浏览器—Firefox,Chrome和Safari基于两种渲染引擎创建。Firefox使用Gecko—一个“自制”的Mozilla渲染引擎。Safari和Chrome使用Webkit。

Webkit是一个开源的渲染引擎,始于Linux平台,后来被Apple修改用以支持Mac和Windows。查看http://webkit.org/以获得更多细节。

主要流程

在从网络层获得请求的文档后渲染引擎启动。通常是以8K块为单位对数据进行处理。

然后就是渲染引擎的基本流程:

浏览器的渲染引擎

图2:渲染引擎基本流程

渲染引擎开始处理HTML,把tag转换成一棵称之为“内容树”的DOM树结点。也会处理样式数据,不管在外联CSS文件里还是在内置样式元素里。样式信息和HTML里的可视化指令一起,用于创建另一棵树—渲染树。

渲染树包含带有可视化属性象颜色和座标等的矩形。这个矩形将按正确的顺序显示在屏幕上。

在渲染树构造完成后,进入“布局”处理。这意味着要给出每个结点在屏幕上显示的准确的座标。下一步是绘制—渲染树将会被布放,每个节点会用UI后端层来绘制。

重要之处在于理解这是个渐进的过程。为了更好的用户体验,渲染引擎将尽可能快的显示内容。在建立和布局这个渲染树之前不会去等待所有HTML被处理完。一部份内容被处理和显示,同时继续对源源不断来自网络的其余的内容进行处理。

主流程例子

下面是Webkit的主流程例子:

浏览器的渲染引擎

图3:Webkit主流程

下面是Gecko的主流程例子:

浏览器的渲染引擎

图4:Mozilla的Gecko渲染引擎主流程

从上面两幅图可以看出尽管Webkit和Gecko使用了稍稍不同的技术,但流程基本上是相似的。

Gecko称可视格式化元素的树为Frame树。每个元素是一个frame。Webkit使用了名词“Render Tree”,它由“Render Objects”组成。Webkit使用了名词“layout”来称呼放置元素的过程,而Gecko称它为“Reflow”。“Attachment”是联合DOM结点和可视化信息来创建渲染树的Webkit说法。一个很小的非语义区别是Gecko在HTML和DOM树之间有额外的层。这被称为“content sink”,是一个生成DOM元素的工厂。我们将依次讨论每个部份。

(待续)

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

相关文章

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

发表评论

电子邮件地址不会被公开。