浏览器-05 HTML和CSS解析1

• 一个浏览器内核几个主要部分,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的支持,方便开发者对页面进行分区域来排版;

• StyleRuleImport类,这个一个伪类型,CSS中并没有该类型的定义,是WebKit处理CSS文件方便引入的;
• 该类需要两个类来辅助完成
  * StyleSheetContents类,就是 CSS 文件中各个规则的处理和内部表示,这些规则被称为子规则,构成一个列表;
  * CSSStyleSheet,该类是个包装类,代表CSS文件包,􏰀一个StyleSheetContents对象;