`

WebKit渲染过程----《WebKit技术内幕》读书笔记

阅读更多

       webkit一般性渲染过程

      


       在浏览器中,有一个最重要的模块,它主要作用是将页面转变成可视化的图形结果,这就是浏览器内核。通常,它也被称为渲染引擎。所谓的渲染,就是根据描述或者定义构建数学模型,通过模型生成图像的过程。浏览器的渲染引擎就是能够将HTML/CSS/JavaScript文本及其相应的资源文件转换成图像结果的模块。
     根据渲染引擎所提供的渲染网页的功能,一般而言,它需要包含很多模块,主要分三层,最上层用虚线框住的是渲染引擎所提供的功能。


 
      从图中大致可以看出,一个渲染引擎主要包括HTML解释器、CSS解释器、布局和JavaScript引擎等,其他还有绘图模块、网络等并没有在图中直接表示出来。
  •       HTML解释器:解释HTML文本的解释器,主要作用是将HTML文本解释成DOM树,DOM是一种文档的表示方法。
  •       CSS解释器:级联样式表的解释器,它的作用是为DOM中的各个元素对象计算出样式信息,从而为计算最后网页的布局提供基础设施。
  •       布局:在DOM创建之后,Webkit需要将其中的元素对象同样式信息结合起来,计算它们的大小位置等布局信息,形成一个能够表示这所有信息的内部表示模型。
  •       JavaScript引擎:使用JavaScript代码可以修改网页的内容,也能修改CSS的信息,JavaScript引擎能够解释JavaScript代码并通过DOM接口和CSSOM接口来修改网页内容和样式信息,从而改变渲染的结果。
      这些模块依赖很多其他的基础模块,这其中包括网络、存储、2D/3D图形、音频视频和图片解码器等。实际上,渲染引擎中还应该包括如何使用这些依赖模块的部分。
     一般的渲染过程:如下图,从左上角开始,首先是网页内容,输入到HTML解释器,HTML解释器在解释它后构建成一棵DOM树,这期间如果遇到JavaScript代码则交给JavaScript引擎去处理;如果网页中包含CSS,则交给CSS解释器去解释。当DOM建立的时候,渲染引擎接收来自CSS解释器的样式信息,构建一个新的内部绘图模型。该模型由布局模块计算模型内部各个元素的位置和大小信息,最后由绘图模块完成从该模型到图像的绘制。


 
      图中虚线表示在渲染过程中,每个阶段可能使用到的其他模块。在网页内容的下载中,需要使用到网络和存储,这点显而易见。但计算布局和绘图的时候,需要使用2D/3D的图形模块,同时因为要生成最后的可视化结果,这时需要开始解码音频、视频和图片,同其他内容一起绘制到最后的图像中。
      在渲染完成之后,用户可能需要跟渲染的结果进行交互,或者网页自身有动画操作,一般而言,这需要持续的重复渲染过程。
 
Webkit的加载和渲染
 
        浏览器的主要作用就是将用户输入的URL转变成可视化的图像。按照某些文档的分析,这其中包含两个过程,其一是网页加载过程,就是从URL到构建DOM树;其二是网页渲染过程,从DOM树到生成可视化图像。其实,这两个过程也会交叉,很难给予明确的区分,所以,为了简单起见,统称网页渲染过程。
    网页渲染还有一个特性,就是网页通常比我们的屏幕可视面积要大,而当前可见的区域,我们称为视图(viewport)。因为网页比可视区域大,所以浏览器在渲染网页的时候,一般会加入滚动条以帮助翻滚网页。就用户体验来说,垂直方向滚动效果好于水平方向。
 
        Webkit的渲染过程
     整个渲染的过程中的包含数据和模块是:数据包含网页内容、DOM、内部表示和图像,模块则包括HTML解释器、CSS解释器、JavaScript引擎以及布局和绘图模块。
    根据数据的流向,这里将渲染过程分成三个阶段,第一个阶段是从网页的URL到构建完DOM树,第二个阶段是从DOM树到构建完WebKit的绘图上下文,第三个阶段是从绘图上下文到生成最终的图像。


 
      图中描述的是从网页URL到构建完DOM树的这个过程,数字表示的是基本顺序,当然也不是严格一致,因为这个过程可能重复并且可能交叉。
    具体的过程如下。
    1.当用户输入网页URL的时候,WebKit调用其资源加载器加载该URL对应的网页。
    2.加载器依赖网络模块建立连接,发送请求并接收答复。
    3.WebKit接收到各种网页或者资源的数据,其中某些资源可能是同步或异步获取的。
    4.网页被交给HTML解释器转变成一系列的词语(Token)。
    5.解释器根据词语构建节点(Node),形成DOM树。
    6.如果节点是JavaScript代码的话,调用JavaScript引擎解释并执行。
    7.JavaScript代码可能会修改DOM树的结构
    8.如果节点需要依赖其他资源,例如图片、CSS、视频等,调用资源加载器来加载它们,但是它们是异步的,不会阻碍当前DOM树的继续创建;如果是JavaScript资源URL(没有标记异步方式),则需要停止当前DOM树的创建,直到JavaScript的资源加载并被JavaScript引擎执行后才继续DOM树的创建。
 
    在上述的过程中,网页在加载和渲染过程中会发出“DOMContent”事件和DOM的"onload"事件,分别在DOM树构建完成之后,以及DOM树建完并且网页所依赖的资源都加载完成之后发生,因为某些资源的加载并不会阻碍DOM树的创建,所以这两个事件多数时候不是同时发生的。
    接下来就是WebKit利用CSS和DOM树构建RenderObject树直到绘图上下文
    

 
    这一阶段的具体过程如下:
    1.css文件被css解释器解释成内部表示结构
    2.CSS解释器工作完之后,在DOM树上附加解释后的样式信息,这就是RenderObject树
    3.RenderObject节点在创建的同时,WebKit会根据网页的层次结构创建RenderLayer树,同时构建一个虚拟的绘图上下文。
 
    RenderObject树的建立并不表示DOM树会被销毁,事实上,上述图中的四个内部表示结构一直存在,直到网页被销毁,因为它们对于网页的渲染起了非常大的作用。
    最后就是根据绘图上下文生成最终的图像,这一过程主要依赖2D和3D图形库,如下图:


 
    图中这一阶段对应的具体过程如下:
    
1.绘图上下文是一个与平台无关的抽象类,它将每个绘图操作桥接到不同的具体实现类,也就是绘图具体实现类。
2.绘图实现类也可能有简单的实现,也可能有复杂的实现。
3.绘图实现类将2D图形库或者3D图形库绘制的结果保存下来,交给浏览器来同浏览器界面一起显示。
 
       这一过程实际上可能不像图中描述的那么简单,现代浏览器为了绘图上的高效性和安全性,可能会在这一过程中引入复杂的机制。而且,绘图也从之前单纯的软件渲染,到现在的GPU硬件渲染、混合渲染模型等方式。
   上面介绍的是一个完整的渲染过程。现代网页很多事动态网页,这意味着在渲染完成之后,由于网页的动画或者用户的交互,浏览器其实一直在不停地重复执行渲染过程。
 
   
 
          
  • 大小: 3.4 KB
  • 大小: 11.3 KB
  • 大小: 14.8 KB
  • 大小: 13.3 KB
  • 大小: 9.1 KB
  • 大小: 8.9 KB
0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics