WebKit 渲染过程
webkit笔记,主要来自 朱永盛 《WebKit技术内幕》 学习笔记,转载就注明原著,该书是国内仅有的Webkit内核的书籍,学习的好导师,推荐有兴趣的朋友可以购买
Webkit渲染过程包括很多数据和模块
数据:网页内容,DOM树,内部表示,图像
模块:HTML解释器,CSS解释器,JavaScript引擎,布局和绘图模块
根据数据的方向,渲染分三个阶段
1,网页的URL 到构建完DOM 树
2,DOM树 到 构建完 Webkit的绘图上下文
3,绘图上下文 到 最终的图像
下面是详细的对三个步骤的描述(本应该虚线,表示依赖关系)
从网页URL 到 DOM 树
上图描述的是从 网页URL 到 构建完 DOM树这个过程,数字表示的是基本顺序,也不是严格的一致,因为这个过程可能重复并且交叉
具体过程:
1,当 user 输入网页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树的创建
在上述过程中,网页在加载和渲染过程中会发出 "DOMConent" 事件和 DOM 的 "onload" 事件,分别在 DOM 树构建完之后,以及 DOM 树建完并且网页所依赖的资源都
加载完之后发生,因为某些资源的加载并不会阻碍 DOM 树的创建,所以这两个事件多数时候不是同时发生的
接下来就是 WebKit利用 CSS 和 DOM 树构建 RenderObject 树 直到 绘图上下文
从 CSS 和 DOM 树 到 绘图上下文
这一阶段 的具体过程如下:
1, CSS 文件 被 CSS 解释器 解释成内部表示结构
2, CSS 解释器工作完之后,在 DOM 树上附加解释后的样式信息,这就是 RenderObject 树
3, RenderObject 节点在创建的同时,WebKit会根据网页的层次结构 创建 RenderLayer 树,同时构建一个虚拟的绘图上下文。
其实这中间还有复杂的内部过程,具体后面章节中介绍
RenderObject树的建立并不表示 DOM 树会被销毁,事实上,上述图中的四个内部表示结构一直存在,直到网页被销毁,因为它们对于网页的渲染起了非常大的作用
最后就是根据绘图上下文来生成最终的图像,这一过程主要依赖于 2D 和 3D 图像库(都应该是曲线)
从绘图上下文 到 最终的图像
图中这一阶段对应的具体过程如下:
1,绘图上下文是一个与平台无关的抽象类,它将每个绘图操作桥接到不同的具体实现类,也就是绘图具体实现类
2,绘图实现类也可能有简单的实现,也有可能有复杂的实现。在Chromium中,它的实现相当复杂,需要Chromium的合成器来完成复杂的多进程 和 GPU加速机制 。后面详述
3,绘图实现类将 2D 图形库 或者 3D 图形库 绘制的结果保存下来,交给浏览器来同浏览器界面一起显示
这一过程实际上可能不想图中描述的那么简单,现代浏览器为了绘图上的高效性 和 安全性,可能会在这一过程中引入复杂的机制。 而且,绘图也从之前单纯的软件渲染,
到现在的GPU 硬件渲染、混合渲染模型等方式,这些同样会以以后加以剖析
WebKit 渲染过程的更多相关文章
- 《Webkit技术内幕》之页面渲染过程
文章同步到github<Webkit技术内幕>之页面渲染过程 最近拜读了传说中的<Webkit技术内幕>一书,有很大收获,尤其是对页面渲染有了较深的认识.由于功力有限,而且书中 ...
- spring mvc DispatcherServlet详解之四---视图渲染过程
整个spring mvc的架构如下图所示: 现在来讲解DispatcherServletDispatcherServlet的最后一步:视图渲染.视图渲染的过程是在获取到ModelAndView后的过程 ...
- iOS 事件处理机制与图像渲染过程(转)
iOS 事件处理机制与图像渲染过程 iOS RunLoop都干了什么 iOS 为什么必须在主线程中操作UI 事件响应 CALayer CADisplayLink 和 NSTimer iOS 渲染过程 ...
- iOS 事件处理机制与图像渲染过程
Peter在开发公众号功能时触发了一个bug,导致群发错误.对此我们深表歉意,并果断开除了Peter.以下交回给正文时间: iOS 事件处理机制与图像渲染过程 iOS RunLoop都干了什么 iOS ...
- 一步步实现windows版ijkplayer系列文章之六——SDL2源码分析之OpenGL ES在windows上的渲染过程
一步步实现windows版ijkplayer系列文章之一--Windows10平台编译ffmpeg 4.0.2,生成ffplay 一步步实现windows版ijkplayer系列文章之二--Ijkpl ...
- SpringMVC DispatcherServlet-------视图渲染过程
整个spring mvc的架构如下图所示: 现在来讲解DispatcherServletDispatcherServlet的最后一步:视图渲染.视图渲染的过程是在获取到ModelAndView后的过程 ...
- 二、Vue 页面渲染过程
前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是 ...
- Vue是如何渲染页面的,渲染过程以及原理代码
Vue是如何渲染页面的,渲染过程以及原理代码:https://www.cnblogs.com/ypinchina/p/7238402.html
- HTML渲染过程详解
无意中看到寒冬关于前端的九个问题,细细想来我也只是对第一.二.九问有所了解,正好也趁着这个机会梳理一下自己的知识体系.由于本人对http协议以及dns对url的解析问题并不了解,所以这里之探讨url请 ...
随机推荐
- plupload批量上传分片(后台代码)
plupload批量上传分片功能, 对于文件比较大的情况下,plupload支持分片上传,后台代码如下: /** * * 方法:upLoadSpecialProgramPictrue * 方法说明:本 ...
- PHP大数组,大文件的处理
[原文来自于转载, 但他的结论不太正确, 尤其对foreach的判断这块上, 我拎过来进行修理 ] 在做数据统计时,难免会遇到大数组,而处理大数据经常会发生内存溢出,这篇文章中,我们聊聊如何处 ...
- springboot整合swagger笔记
首先,在pom.xml中添加依赖 <!--swagger--> <dependency> <groupId>io.springfox</groupId> ...
- I/O流、字符集
1)InputStream.OutPutStream是输出输入的基础流,均为抽象类,提供了read和writer方法,所有的子类均实现read和writer方法,read在遇到输入源的结尾时返回-1. ...
- Redis面试问题
下面列出的这些其中有一些是我面试时遇到的,但是当时自己还不会,所以在网站上找了以下,然后整理出来,加强记忆 感谢码洞将这些问题整理出来: Redis有哪些数据结构? 字符串String.字典Hash. ...
- ELK 安装部署实战 (最新6.4.0版本)
一.实战背景 根据公司平台的发展速度,对于ELK日志分析日益迫切.主要的需求有: 1.用户行为分析 2.运营活动点击率分析 作为上述2点需求,安装最新版本6.4.0是非常有必要的,大家可根据本人之前博 ...
- 07 json与os模块(进阶)
json和os模块 阶段一 .数据交换 1.json的基本介绍 JSON全名是JavaScript Object Notation(即:JavaScript对象标记)它是JavaScript的子集. ...
- python并发编程之多进程、多线程、异步、协程、通信队列Queue和池Pool的实现和应用
什么是多任务? 简单地说,就是操作系统可以同时运行多个任务.实现多任务有多种方式,线程.进程.协程. 并行和并发的区别? 并发:指的是任务数多余cpu核数,通过操作系统的各种任务调度算法,实现用多个任 ...
- Ubuntu装完后要做的几件事
Ubuntu装完后要做的几件事 改hosts 无论哪里,改hosts都是第一件事,没hosts咋google.没google咋活.在终端输入命令 sudo gedit /etc/hosts在# The ...
- SapScript
* [OPEN_FORM] SAPscript: フォーム印刷の開始 * [START_FORM] SAPscript: 書式を開始 * [WRITE_FORM] SAPscript: 書式ウィンドウ ...