• 一个浏览器内核几个主要部分,HTML/CSS解析器，网络处理，JavaScript引擎，2D/3D图形引擎，多媒体支持等;

HTML 解析和 DOM

网页基本结构

  • 一个网页(Page),每个Page都有一个主框(Main Frame),该框通常包含一个HTML Document, 主框也可能包含子框(sub frame);
  • 这些框构成一个树型结构,以主框为根节点,每个框也可能包含自己的HTML Document,它是一颗DOM树;
  • WebKit相对应的类,和网页的结构一一对应;

WebKit设计模式

  • 以类Chrome为例,需要实现:

    • 具备有获取各个平台资源的能力;
    • 把 WebKit 的状态和进度等信息分发给WebKit的使用者;
  • WebKit通过Chrome的接口来完成后使用ChromeClient抽象类来实现;
  • 每个port实现类ChromeClient,一方面监听WebKit状态,一方面返回WebKit所需要的资源和信息;
  • WebKit直接调用Chrome的接口,Chrome调用ChromeClient的接口,而ChromeClient的实现由各个移植来完成;
  • WebKit中很多都是该模式的类组合:
    • Frame和FrameLoader:Frame是页面框和框的加载器;一个负责页面的表示,一个负责加载需要的接口及实现;
    • Document和DocumentLoader;
    • CachedImage和ImageLoader;
    • WebView和Page:Page是WebKit 内部表示网页的类,WebView是WebKit对外表示网页的类,Page只有一个实现,WebView`在不同的移植中有不同的实现;
  • 类Chrome是一个非常重要的类,是WebKit与它的使用者之间的桥梁,主要功能:
    • 跟UI和渲染显示相关的需要移植实现的接口集合类;
    • 继承自HostWindow(宿主窗口),其包含一系列接口,用来通知重绘或者更新相应整个窗口,滚动窗口等;
    • 窗口相关操作,例如显示,隐藏等;
    • 显示/隐藏窗口中的toolbar,statusbar,scroolbar等;
    • 显示JavaScript相关的窗口,例如JavaScript的Alert,confirm, prompt窗口等;

HTML解析的一般过程

DOM 标准

  • 定义的是一组平台无关和语言无关的接口,该接口允许编程语言动态访问和更改结构化文档;

DOM level 1

  • Core:一 组底层的接口,其接口可以表示任何结构化的文档,同时也允许对其进行扩展,典型的例子是支持XML文档;
  • HTML:一组基于Core定义的上层接口,主要是为了方便HTML文档的访问;

DOM level 2

  • Core:对DOM level1中core部分的扩展,如getElementById;还有很多跟名空间(namespace)相关的接口;
  • Views:允许动态访问和修改文档内容的表示,主要是两个接口AbstractView和DocumentView;
  • Events:主要有EventTarget,Mouse events等接口,但不支持Keyboard;
  • Style:加入接口可以修改样式属性;
  • Traversal and range:遍历树加上对制定范围的文档修改删除等操作;
  • HTML: 扩充DOM level1的HTML部分,允许动态访问和修改HTML文档;

DOM level 3

  • Core:加入了新的adoptNode和textContent支持;
  • Load and save:动态加载和序列化DOM表示;
  • Validation:根据scheme验证文档的有效性;
  • Events:主要扩展对keyboard,Touch的支持
  • XPath: 使用XPath1.0来访问DOM树;是一种简单直观的检索DOM树节点的方式;

WebKit的CSS实现

解析器

  • 解析器对上层的接口是CSSParser,所有任务均有其处理;
  • 调用CSSParser的createStyleRule函数,将选择器和属性列表处理生成StyleRule类型对象;
  • 可能调用情况:
    • 当DOM建立好之后在创建RenderObject的时候会调用CSSParser;
    • JS代码被执行时,JavaScript引擎会间接调用CSSParser为元素的 属性style解析;
  • 实际上WebKit会为每个网页设置一个缺省的样式,不同的的移植(port)会有不同的缺省样式;

内部表示

  • 被解析后的CSS样式就是一组样式规则,每一个规则包含一组选择器和一组样式属性;

  • 样式规则是一种基本的样式类型,CSS的标准包含了多种规则类型:
    • Style:这个是基本类型,一般大多数规则属于这个类型;
    • Import:是WebKit中为方便引入的,其对应的是一个导入CSS文件的Style元素;
    • Media: 对应于CSS标准中的@media类型;
    • Fontface:CSS3新引入的自定义字体的规则类型;
    • Page:对于CSS标准中的@page类型;
    • Keyframes:WebKit的@-webkit-key-frames类型,用来指定特定帧的样式属性信息;
    • Region:对CSS标准正在进行中的Regions的支持,方便开发者对页面进行分区域来排版;