webkit网页渲染过程

这里写图片描述

资源加载单元:
当用户从地址栏输入URL地址的时候,发起了一个资源请求,这个请求就会通知各种资源加载器,在资源加载过程中用到了浏览器提供的网络功能(比如:建立连接等)和存储功能(cached等)。最终从网络中或者从本地缓存中得到要获得的资源。

其实这一部分牵扯到http知识网络知识等,《http权威指南》《计算机网络》可能会对这一部分理解有帮助。(好吧这个寒假哏了他们)

解析HTML单元:
在资源加载单元中获得了要加载的资源之后比如一个网页,会将这个内容交给html解析器,开始对html文件从上到下进行解析。如果遇到css代码,那么就会交给css解析器,但是不会立即与html解析过程异步执行,而是等到html解析完DOM树之后才会解析css,对于外部的css文件,加载可以是与html解析过程是异步的但是执行必须在DOM树构建之后(这个是yy的具体css解析是否能在DOM创建之后还有待考证)。如果遇到js代码,那么会将js代码交给js引擎进行处理,在外部js加载和处理过程中除了显示的声明异步加载之外其他与html解析是同步的,所以,js代码的加载和解析会阻塞DOM树的构建进程。

并且值得注意的是,当HTML代码中遇到要请求外部资源的时候比如请求css文件js文件或者图片的话会再一次调用上个单元中的各种资源加载器进行资源的加载,这种加载可能对HTML解析器产生阻塞。当DOM生成之后会触发onload事件,当各个资源加载完了之后会触发DOMcontent事件。

css解析器与渲染单元:
将上个模块或者资源加载单元中得到的css文件通过css加载器进行处理最终形成内部表示结构。

在渲染过程中会将DOM树先构建成RenderObject树,在这一过程中,会将css文件的样式对应的添加到每一个元素节点上,在这一过程中,可能还会伴随递归的布局计算。在生成RenderObject树的过程中,根据元素的类型或者某些特殊的样式,会将某些节点看做是一层,即将这些节点绘制成RenderLayout树,最终会形成一个或者多个绘图层次上下文。

绘制单元:
这一过程主要是将上一个单元形成的绘图上下文(也就是抽象的一些数据结构)在这一单元内转变成实打实的图像。

在这个过程中,将会处理绘图上下文,其中用到2D图像库或者3D图像库中的GPU渲染和加速机制。最终形成的图像显示到浏览器视口中。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值