webkit浏览器渲染过程

webkit浏览器渲染过程

最近在翻《webkit技术内幕》这本书,大致摘录一些有用的信息作为笔记,加深印象吧

输入URL到dom树建立

  1. 当用户输入url的时候,webkit调用其资源加载器加载该url对应的网页

  2. 加载器依赖网络模块建立连接,发送请求并接收答复

    要点:1.chrome的dns缓存、资源预加载,dns查询,TCP/IP协议 的三次握手,以及滑动窗口协议

  3. webkit接收到各种网页或者资源的数据,其中一些资源可能是同步或者异步获取的

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

  5. 解释器更具词语构建节点(Node),形成DOM树

  6. 如果节点是javascript代码的话,就调用javascript引擎解释并执行

  7. javascript代码可能会修改DOM树的结构

  8. 如果节点需要依赖其他资源,例如图片,css,视频等调用资源加载器来加载他们,但是他们是异步的,不影响当前dom树的继续构建,如果是javascript的url(没有标记异步方式),则需要停止当前的DOM构建,知道javascript的资源被加载并且javascript引擎执行完毕才继续构建dom树

在上述的过程中,页面在加载的过程中会发生DOMContentLoaded事件在dom树构建完成之后,而dom的onload事件在dom树构建完成并且页面依赖的资源都加载完成之后发生。因为某些资源的加载并不会阻碍dom树的构建,所以这两个事件大多数情况下不是同时发生的。

接下来是webkit利用DOM树和css构建renderObject树以及绘图上下文

  1. css文件被css解释器解释成内部表示结构,(个人理解为css树)

  2. css解释器工作完成之后回合dom树上附上解释后的样式信息,这就是renderObject树

  3. renderObject节点在创建的同时webkit会根据页面的层次结构创建renderLayer树,同时构建一个虚拟的绘图上下文

renderObject树的建立并不表示dom树会被销毁,实际上dom树、renderObject树、renderLayer树、绘图上下文会一直存在,一直到页面销毁。

最后就是更具绘图上下文来绘制图像,主要依赖2D、3D图形库

具体流程见下图webkit浏览器渲染过程 第1张

参考文档

本文标题:webkit浏览器渲染过程
本文链接:https://56way.com/p/71.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。