w3ctech

Webkit技术笔记(2):详解 webkit 网页渲染过程

这篇主要讲的是 Webkit 的网页渲染过程,所以和网上那个比较流行的面试题(输入url到页面展示有哪些过程)有点不同啦。

这里说的网页渲染过程其实包含两个过程一个是网页加载过程,从url到构建 DOM 树,第二个就是网页渲染过程,从 DOM 树到生成可视化图像,因为两个过程有交叉,所以直接叫做 网页渲染过程了。

上一篇大致讲了页面的基本渲染流程,这里再详细记录一下 webkit 的网页渲染过程。 主要大致分三个过程:第一阶段是从URL到构建完 DOM树,第二阶段是 DOM 树到构建完 webkit 的绘图上下文,第三个阶段是从绘图上下文到最终生成的图像。

我们还是分别看图来理解三个阶段

这里分别解释一下1-8每步的作用:

1.表示当用户输入 URL时,Webkit调用其资源加载器,加载该url对应的资源

2.加载器依赖网络模块建立链接,发生请求,并接受答复。

3.webkit接收到各种网页请求或者资源的数据,其中某些资源可能同步或异步。

4.网页交给 HTML 解释器转变成一系列的词语(Token)

5.解释器根据词语构建 DOM 节点,形成 DOM 树

6 如果节点有 js 代码,调用 javaScript 引擎

7.其中 js 有可能修改 DOM 树结构

8.如果节点还需要加载其他资源(视频图片之类的),就会调用加载器加载他们,但这个过程是异步的,不会阻碍当前 DOM 树的创建。

上面就是第一阶段的过程了,下面再说第二阶段

这个具体过程大概是:

1.css文件被 css解释器解释内部表示结构

2.css解释器工作完成之后,在 DOM 树上附加解释后的样式信息,这就是 RenderObject

3.RenderObject 节点在创建的同时,webkit 根据网页的层次结构创建 RenderLayer 树,同时构建一个虚拟的绘图上下文。

上面图中的四个内部表示结构是一直存在的,除非网页被销毁。

最后一个就是第三阶段,根据绘图上下文生成最后的图像。还是画个图来看:

以上三个阶段基本介绍完了一个完成的网页渲染过程。由于现在的网页有动态交互等,所以浏览器其实一直在不停的重复执行渲染过程。

下面举个例子在浏览器里来看看实际的情况吧。

我把的我demo在 chrome 浏览器里打开,(demo是个html文件只有一张图)。

然后打开chrome 的开发者工具,在 network 里发现如下所示的结果

可以发现最终加载了两个资源,一个html页面,一个图片。我们还可以发现右边两条竖线,第一条表示 DOM 已经加载完成,第二条表示资源全部加载完成。你仔细观察会发现第二条线出现在图片加载完成之后(这不废话吗,呵呵)。 第二条线出现之后表明第一阶段完成了,下面再看看第二,三阶段。

同样在 chrome 里的开发者工具里点击 TimeLine,然后点击那个红圆点,刷新页面,重新渲染网页。网页加载完之后再点击那个红圆点。应该会出现如下所示的情况:

这个 TimeLine 是根据时间来获取网页渲染的动作过程的。 从图中我们可以看出蓝色部分表示的是第一阶段加载 DOM资源的,紫色的虽然只显示了 Layout布局,但他表示的是第二阶段。绿色的表示的是第三阶段绘图阶段(paint绘制节点和composite Layers合成网页的层次)。

好了,至此这个webkit网页渲染过程就介绍完了。期待下文...

前端圈微信

扫码关注前端圈微信公众号

共收到0条回复