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 硬件渲染、混合渲染模型等方式,这些同样会以以后加以剖析

时间: 2024-10-18 09:04:40

WebKit 渲染过程的相关文章

浏览器渲染过程

有时候想要进行性能优化时了解浏览器的渲染过程无疑是十分重要的.下面来看 首先介绍一下主流浏览器的渲染引擎: IE:Trident chrome:Blink Safire:webkit Firefox:Gecko Opera:Blink QQ浏览器/微信webview:X5/Blink 可能有很多会感到疑惑:chrome不是webkit么?其实Blink也算是webkit的一种升级吧,前缀还是不变的. 然后介绍一下渲染过程 1.DOM解析(与CSS解析同时进行): 把HTML文档解析成DOM树的过

前端必备的浏览器知识(渲染过程、回流和重绘等)

常用哪几种浏览器测试?有哪些浏览器内核(Rendering Engine)? (Q1)浏览器:Chrome,IE,FireFox,Safari,Opera. (Q2)对应内核:Webkit,Trident,Gecko,Webkit,Presto.(国内的浏览器,除了傲游是直接基于Webkit开发的,其他基本都是基于谷歌在webkit上开发的Chromium,当然谷歌自己也是用的Chromium.另外值得的一提的是手机的系统(安卓.苹果)默认浏览器都是基于webkit内核的) 如何理解浏览器内核?

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

整个spring mvc的架构如下图所示: 现在来讲解DispatcherServletDispatcherServlet的最后一步:视图渲染.视图渲染的过程是在获取到ModelAndView后的过程. 视图渲染的过程: DispatcherServlet.java doService()--->doDispatch()--->processDispatchResult()--->render() processDispatchResult():主要处理异常.请求状态及触发请求完成事件,

<转>iOS 事件处理机制与图像渲染过程

原文:http://mp.weixin.qq.com/s?__biz=MjM5OTM0MzIwMQ==&mid=401383686&idx=1&sn=1613dfa8fa762a0efee4bc4af496fddf&scene=0#wechat_redirect iOS RunLoop都干了什么 RunLoop是一个接收处理异步消息事件的循环,一个循环中:等待事件发生,然后将这个事件送到能处理它的地方. 如图1-1所示,描述了一个触摸事件从操作系统层传送到应用内的main

网页在浏览器上的渲染过程

最近在学习性能优化,学习了雅虎军规 ,可是觉着有点云里雾里的,因为里面有些东西虽然自己也一直在使用,但是感觉不太明白所以然,比如减少DNS查询,css和js文件的顺序.所以就花了时间去了解浏览器的工作,有一篇经典的文章<how browsers work> ,讲的很详细,也有中文译本 .不过就是文章有点太长,也讲了一堆东西,还是自己总结一下. 为什么要了解浏览器加载.解析.渲染这个过程? 好,我们先说一下,为什么要了解这些呢?如果想写出一个最佳实践的页面,就要好好了解. 了解浏览器如何进行加载

《转之微信移动团队微信公众号》iOS 事件处理机制与图像渲染过程

致歉声明: Peter在开发公众号功能时触发了一个bug,导致群发错误.对此我们深表歉意,并果断开除了Peter.以下交回给正文时间: iOS 事件处理机制与图像渲染过程 iOS RunLoop都干了什么 iOS 为什么必须在主线程中操作UI 事件响应 CALayer CADisplayLink 和 NSTimer iOS 渲染过程 渲染时机 CPU 和 GPU渲染 Core Animation Facebook Pop介绍 AsyncDisplay介绍 参考文章 iOS RunLoop都干了什

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

iOS 事件处理机制与图像渲染过程 iOS RunLoop都干了什么 iOS 为什么必须在主线程中操作UI 事件响应 CALayer CADisplayLink 和 NSTimer iOS 渲染过程 渲染时机 CPU 和 GPU渲染 Core Animation Facebook Pop介绍 AsyncDisplay介绍 参考文章 iOS RunLoop都干了什么 RunLoop是一个接收处理异步消息事件的循环,一个循环中:等待事件发生,然后将这个事件送到能处理它的地方. 如图1-1所示,描述了

通过浏览器渲染过程来进行前端优化

介绍 做web开发,我个人觉得必须要弄清楚浏览器的渲染过程,否则我们很难进行前端优化. 我今天就简单说一下页面加载和前端优化. 页面加载 我按照最简单的方式进行描述,实际上更复杂,不管是在浏览器端还是服务端,比如dns解析,代理服务器,负载均衡器等等. 1.用户访问网页,发送一个http请求到网络服务器. 2.网络服务器(应用服务器)解析请求,发送请求给数据库服务器. 3.数据服务器返回数据给网络服务器,网络服务器解析数据,并生成html文件内容放入http response中,返回给浏览器.

从浏览器渲染过程看重绘回流

渲染过程 浏览器渲染过程如下: 解析 HTML,生成 DOM 树,解析 CSS,生成 CSSOM 树. 将 DOM 树和 CSSOM 树结合,生成渲染树(Render Tree). Layout(回流): 根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小). Painting(重绘): 根据渲染树以及回流得到的几何信息,得到节点的绝对像素. Display: 将像素渲染到屏幕上. 阻塞问题: 构建 CSSOM 会阻塞浏览器渲染,但不会阻塞解析 HTML 构建 DOM树.