浏览器-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

对象;