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 渲染过程的更多相关文章

  1. 《Webkit技术内幕》之页面渲染过程

    文章同步到github<Webkit技术内幕>之页面渲染过程 最近拜读了传说中的<Webkit技术内幕>一书,有很大收获,尤其是对页面渲染有了较深的认识.由于功力有限,而且书中 ...

  2. spring mvc DispatcherServlet详解之四---视图渲染过程

    整个spring mvc的架构如下图所示: 现在来讲解DispatcherServletDispatcherServlet的最后一步:视图渲染.视图渲染的过程是在获取到ModelAndView后的过程 ...

  3. iOS 事件处理机制与图像渲染过程(转)

    iOS 事件处理机制与图像渲染过程 iOS RunLoop都干了什么 iOS 为什么必须在主线程中操作UI 事件响应 CALayer CADisplayLink 和 NSTimer iOS 渲染过程 ...

  4. iOS 事件处理机制与图像渲染过程

    Peter在开发公众号功能时触发了一个bug,导致群发错误.对此我们深表歉意,并果断开除了Peter.以下交回给正文时间: iOS 事件处理机制与图像渲染过程 iOS RunLoop都干了什么 iOS ...

  5. 一步步实现windows版ijkplayer系列文章之六——SDL2源码分析之OpenGL ES在windows上的渲染过程

    一步步实现windows版ijkplayer系列文章之一--Windows10平台编译ffmpeg 4.0.2,生成ffplay 一步步实现windows版ijkplayer系列文章之二--Ijkpl ...

  6. SpringMVC DispatcherServlet-------视图渲染过程

    整个spring mvc的架构如下图所示: 现在来讲解DispatcherServletDispatcherServlet的最后一步:视图渲染.视图渲染的过程是在获取到ModelAndView后的过程 ...

  7. 二、Vue 页面渲染过程

    前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是 ...

  8. Vue是如何渲染页面的,渲染过程以及原理代码

    Vue是如何渲染页面的,渲染过程以及原理代码:https://www.cnblogs.com/ypinchina/p/7238402.html

  9. HTML渲染过程详解

    无意中看到寒冬关于前端的九个问题,细细想来我也只是对第一.二.九问有所了解,正好也趁着这个机会梳理一下自己的知识体系.由于本人对http协议以及dns对url的解析问题并不了解,所以这里之探讨url请 ...

随机推荐

  1. 洛谷P1731 [NOI1999]生日蛋糕(爆搜)

    题目背景 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层 生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1<=i<=M)层蛋糕是半径为Ri, 高度为Hi的圆柱 ...

  2. fullPage.js全屏滚动插件API

    API sectionsColor:['green','orange','red','lime']; //设置背景颜色 可以为每一个section设置background-color属性 contro ...

  3. 使用Python第三方库生成二维码

    本文主要介绍两个可用于生成二维码的Python第三方库:MyQR和qrcode. MyQR的使用: 安装: pip install MyQR 导入: from MyQR import myqr imp ...

  4. java对象中的三种状态和脏检查及刷新缓存机制

    瞬时状态 瞬时状态又称临时状态.如果java对象与数据库中的数据没有任何的关联,即此java对象在数据库中没有相关联的记录,此时java对象的状态为瞬时状态,session对于 瞬时状态的ava对象是 ...

  5. dom4j支持Xpath的具体操作

    ***默认情况下,dom4j不支持xpath. 如果想要使用xpath,需要引入jaxen-1.1-beta-6.jar包. 在dom4j中提供了两个方法来支持xpath. ***selectNode ...

  6. Ajax之404,200等查询

    xmlhttp.readyState的值及解释: 0:请求未初始化(还没有调用 open()). 1:请求已经建立,但是还没有发送(还没有调用 send()). 2:请求已发送,正在处理中(通常现在可 ...

  7. Generating Complex Procedural Terrains Using GPU

    前言:感慨于居然不用tesselation也可以产生这么复杂的地形,当然致命的那个关于不能有洞的缺陷还是没有办法,但是这个赶脚生成的已经足够好了,再加上其它模型估 计效果还是比较震撼的.总之好文共分享 ...

  8. h5移动端页面meta标签

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  9. Python3 列表,元组,字典,字符串知识小结

    一.知识概要 1. 列表,元组,字典,字符串的创建方式 2. 列表,元组,字典,字符串的方法调用 3. 列表,元组,字典,字符串的常规用法 二.列表 # 列 表 # 列表基础 list_1 = ['a ...

  10. (数据科学学习手札02)Python与R在循环语句与条件语句上的异同

    循环是任何一种编程语言的基本设置,是进行批量操作的基础,而条件语句是进行分支运算的基础,Python与R有着各自不同的循环语句与条件语句语法,也存在着一些相同的地方. Python 1.for循环 ' ...