WebKit技术内幕《二》网页加载与渲染

[Hjw52]

WebKit技术内幕《二》网页加载与渲染

• webKit资源加载机制

1. 资源缓存

   当webKit请求资源时，先从资源池查找是否存在相应的资源（通过URL，不同的URL被认为不同的资源。），如果有，直接取出使用，否则创建一个新的CachedResource子类的对象并真正发送请求给服务器，当webKit收到资源后将其设置到该资源类的对象中去，以便内存缓存后下次使用。

2. 资源加载器

   webKit共有三种类型的加载器：

   • 针对每种资源类型的特定加载器，仅加载某一种资源：例如ImageLoader
   • 资源缓存机制的资源加载器，所有的特定加载器都可以共享它所查找出来的缓存资源--CacheResourceLoader类。
   • 通用的资源加载器--resourceLoader类，webKit使用该类只负责获取资源的数据，属于CachedResource类，但不是继承CacheResourceLoader类。

   

通常资源的加载是异步执行的，这样不会阻碍WebKit的渲染过程。webKit能够并发下载资源以及下载JavaScript代码。

• DOM树

DOM结构的基本要素就是“节点”，整个文档（Document）也是一个节点，称文档节点。除了文档节点还有元素节点，属性节点，注释节点等等。

Document继承Node，具有一些属性和方法。

• HTML解释器

HTML解释器的工作就是讲网页资源由字节流解释成DOM树结构。

大体概括为：

1. 词法分析，解释器检查网页编码格式，通过HTMLTokenizer类将字节流转化为一个个词语。
2. XSSAuditor验证词语，过滤不安全内容。
3. 词语到节点，调用HTMLTreeBuilder类来创建
4. 节点到DOM树，调用HTMLConstructionSite类来完成

• 事件机制

  事件在工作分为两主体，一是事件，二是事件目标。Node节点继承EventTarget类。下图接口用来注册和移除监听。

  

当渲染引擎收到事件，它会检查哪个元素是直接的事件目标，事件会经过自顶向下捕获和自底向上冒泡的两个过程。

• RenderObject树

  在DOM树构建完成后，webKit要为DOM树节点构建RenderObject树，一个RenderObject对应绘制DOM节点所需要的各种信息。那么问题来了，DOM树哪些节点需要创建RenderObject呢？大概有以下三类：

  1. document节点
  2. 可视节点，如body，div 。(ps: 不可视节点比如head script等)
  3. 匿名的RenderObject 不对应任何DOM，例如RenderBlock

• webKit布局

当webKit创建RenderObject对象后，根据框模型计算各对象的位置，大小等信息的过程称为布局计算。

Frame类用于表示网页的框结构，每个框都有一个frameView类表示框的视图结构。其中layout和needslayout用来计算布局和是否需要重新布局。布局计算先递归子女节点的位置和大小，最后得出自己节点布局。当可视区域发生变化后，webKit都需要重新计算布局。

• 渲染方式

网页渲染的方式主要有三种：

1. 软件渲染：CPU完成，处理2D方面的操作，适合简单网页

   RenderObject图像的绘制又分为以下三阶段：

   • 绘制层中背景和边框
   • 绘制浮动内容
   • 绘制前景，即内容部分等

2. 硬件加速渲染：GPU完成，适合3D绘图，但消耗内存资源

3. 混合渲染：既有CPU也有GPU

CPU绘制使用缓存机制可以减少重绘开销，每个renderLayer对象对应图像的一个图层，浏览器把所有图层合成图像就叫做合成化渲染。