CN101183372A - 一种样式表处理系统及方法 - Google Patents

Abstract

本发明公开了一种样式表处理系统，包括：样式文档创建单元，用于从网页源代码文件获取样式宿主名列表及样式块，并生成样式文档，其中所述样式文档包括样式宿主名列表与样式块的对应关系，所述样式块包括一个或多个文本描述的样式规则，每一样式规则包括属性描述名和值；样式属性类创建单元，用于将所述样式文档中文本描述的样式规则转换为数值描述的样式规则，并生成包括数值描述的样式规则的样式属性类；挂载单元，用于将所述样式属性类挂载到HTML树中对应的节点元素。本发明还公开了一种对应的方法。本发明特别适用于系统资源非常匮乏的设备，例如手机等，通过有效降低系统资源的占用，从而给用户体验带来极大的提升。

Description

一种样式表处理系统及方法

技术领域

本发明涉及网页浏览器领域，更具体地说，涉及一种样式表处理系统及方法。

背景技术

样式表(Cascading Style Sheet，CSS)是HTML的一部分，其作为对HTML元素(或者标识)展示效果的一种扩展，功能极为强大。通过使用样式表，可以完全放弃HTML元素的属性，就能实现精美的网页排版与布局。

样式表可以令网页制作者的工作更加轻松，例如当每个水平线语句都需要使用<hr width＝″75％″size＝5 align＝″center″>的时候，使用样式表，只需要在HTML文件中指定一次，网页样式就可以被整个网站应用。而且在上述需要更改时，只需要在一个地方改变参数，而无需更改所有网页中的HTML。不仅如此，当一个文件包含了所有的样式信息时，样式表还可以减少下载的时间。

然而，在使用浏览器解析样式表时，往往需要使用复杂的算法，从而占据较大的内存及CPU资源。这对于文件较小的情况影响不大，但对于文件较大或者系统资源相对匮乏的设备(例如手机)，则将影响显示的流畅性，且很可能造成系统崩溃。

发明内容

本发明要解决的技术问题在于，针对上述样式表解析时占用内存和CPU较高的问题，提供一种样式表处理系统及方法。

本发明解决上述技术问题的技术方案是，提供一种样式表处理系统，包括：

样式文档创建单元，用于从网页源代码文件获取样式宿主名列表及样式块，并生成样式文档，其中所述样式文档包括样式宿主名列表与样式块的对应关系，所述样式块包括一个或多个文本描述的样式规则，每一样式规则包括属性描述名和值；

样式属性类创建单元，用于将所述样式文档中文本描述的样式规则转换为数值描述的样式规则，并生成包括数值描述的样式规则的样式属性类；

挂载单元，用于将所述样式属性类挂载到HTML树中对应的节点元素。

在本发明所述的一种样式表处理系统中，还包括用于绘制HTML树的绘制单元，所述绘制单元在HTML树的函数迭代进入子节点时压栈，并在完成子节点的绘制返回父节点时出栈。

在本发明所述的一种样式表处理系统中，所述样式属性类创建单元通过将样式规则中的属性描述名进行哈希计算并与样式属性类创建单元预先设置的支持属性名的哈希值比较，确定所述样式属性类中对应属性。

在本发明所述的一种样式表处理系统中，所述样式属性类创建单元根据对象属性调用对应函数解析样式规则中的值。

在本发明所述的一种样式表处理系统中，所述样式文档创建单元还包括样式块合并子单元，用于合并样式文档中指向相同样式宿主名的不同样式块。

在本发明所述的一种样式表处理系统中，所述挂载单元通过将样式宿主名列表中的样式宿主名进行哈希计算，并与HTML树中的HTML节点元素类型名、元素id属性值、元素class属性值进行哈希计算得到的哈希值进行对比，确定样式属性类需要挂载的节点元素。

本发明还提供一种样式表处理方法，包括以下步骤：

(a)从网页源代码文件获取样式宿主名列表及样式块，并生成样式文档，其中所述样式文档包括样式宿主名列表与样式块的对应关系，所述样式块包括一个或多个文本描述的样式规则，每一样式规则包括属性描述名和值；

(b)将所述样式文档中文本描述的样式规则转换为数值描述的样式规则，并生成包括数值描述的样式规则的样式属性类；

(c)将所述样式属性类挂载到HTML树中对应的节点元素。

在本发明所述的样式表处理方法中，还包括绘制样式表的步骤，其在HTML树的函数迭代进入子节点时压栈，并在完成子节点的绘制返回父节点时出栈。

在本发明所述的样式表处理方法中，所述步骤(a)包括：

以文本状态依次处理网页源代码文件中的样式表代码；

在以文本状态处理样式表代码时，若检测到“/*”，则以注释状态处理后续样式表代码，并在检测到“*/”符号时以文本状态处理后续代码；

在以文本状态处理样式表代码时，若检测到英文字母或“.”、“#”、“_”、“：”之一，则以样式宿主名列表状态处理后续代码，其中在以样式宿主名列表状态处理代码时，以“，”切分各个元素；

在以样式宿主名列表状态处理代码时，若检测到“{”，则以样式块状态处理后续代码，并在检测到“}”时以文本状态处理后续代码，其中在以样式块状态处理代码时，将“：”之前的代码作为属性描述名，将“：”和“；”之间的代码作为值。

在本发明所述的样式表处理方法中，在以样式宿主名列表状态处理代码和以样式块状态处理代码时，分别将样式宿主名列表和样式块添加到样式文档。

在本发明所述的样式表处理方法中，还包括合并样式文档中指向相同样式宿主名的不同样式块。

在本发明所述的样式表处理方法中，在合并样式块时，若指向相同样式宿主名的样式块中的样式规则无冲突，则将两个样式块中的所有样式规则合并形成新的样式块；若指向相同样式宿主名的样式块中的样式规则存在冲突，则删除优先级低的样式块中的冲突样式规则，并将剩余的样式规则合并形成新的样式块。

在本发明所述的样式表处理方法中，所述样式文档中存储样式宿主名列表中各样式宿主名的哈希值，在合并样式块时将相同哈希值的样式宿主名对应的样式块进行合并。

在本发明所述的样式表处理方法中，所述步骤(b)包括：

将样式规则中的属性描述名进行哈希计算并与属性名的哈希值比较，以确定所述对象的属性；

根据所述对象的属性调用对应函数解析样式规则中的值。

本发明的一种样式表处理系统及方法，通过创建样式属性类并将样式属性类挂载到HTML树，减少了内存占用。本发明在绘制HTML树时，通过堆栈减少了子节点样式表的挂载，进一步减少了内存的占用。此外，本发明还通过哈希表匹配样式宿主名和使用状态机解析样式表代码，降低了对CPU的占用。本发明的系统及方法特别适用于系统资源非常匮乏的设备，例如手机等，通过有效降低系统资源的占用，从而给用户体验带来极大的提升。

附图说明

下面将结合附图及实施例对本发明作进一步说明，附图中：

图1是本发明一种样式表处理系统实施例的结构示意图；

图2是本发明一种样式表处理系统另一实施例的结构示意图；

图3是本发明一种样式表处理方法实施例的流程图。

具体实施方式

如图1所示，是本发明的一种样式表处理系统实施例的结构示意图。该系统包括样式文档创建单元11、样式属性类创建单元12以及挂载单元13。

样式文档创建单元11用于从网页源代码文件中获取样式宿主名列表及样式块，并生成样式文档，其中样式文档包括样式宿主名列表与样式块的对应关系，样式块包括一个或多个文本描述的样式规则，每一样式规则包括属性描述名(name)和值(value)。

在实现时，样式文档创建单元11首先构造样式规则(StyleRule)、样式块(StyleSheet)、样式宿主名列表(StyleSelector)及样式文档(StyleDocument)。以下通过例1，说明上述各名词定义。

例1：select，input{

vertical-align:middle；

padding:0；

margin:0；

}

其中Select与input为样式宿主名；“{”与“}”之间的内容为样式块；样式块中每一行就是一个样式规则。样式规则采用属性描述名(name)与值(value)两个字符串表示，其中“：”号前面的是属性描述名，后面的是值。样式块相当于一个样式规则的列表，用于存储一至多个样式规则。样式宿主名列表是一个简单的列表，用于存储对应的样式宿主名。样式文档是将所有的样式块与对应样式宿主名列表作统一管理的文档工具。

其次，样式文档创建单元11通过一个状态机完成样式表的解析，生成样式文档。状态机设置以下几种状态：

STYLE_TEXT：文本状态

STYLE_REMARK：注释状态

TYLE_SELECTOR：样式宿主名列表状态

STYLE_SHEET：样式块状态

样式文档创建单元11根据样式表的文本规则，以上述几种状态处理网页样式源代码文件，并构造出样式文档。样式文档创建单元11首先以文本状态处理网页样式源代码文件；在文本状态中检测到“/*”符号时，转换为以注释状态处理后续代码，并在注释状态中检测到“*/”符号时转换回以文本状态处理后续代码，注释状态中的文本全部忽略；在文本状态检测到英文字母或“.”、“#”、“*”、“_”、“：”时，切换到以样式宿主名列表状态处理后续代码，此时，通过检测“，”，来切分检索出每一个对应样式宿主名，组成样式宿主名列表；在样式宿主名列表状态中检测到“{”时，切换到以样式块状态处理后续代码，若检测到“}”，切换到以样式文本状态处理后续代码。在样式块状态中，检测到“：”符号，将符号前的内容作为属性描述名，继续检测符号“；”，并将符号“：”与“；”之间的内容作为值。

在检测到“}”之前，样式文档创建单元11将样式宿主名列表与样式块合并到样式文档中。在该样式文档中，样式规则以文本描述方式存储。

样式文档创建单元11中还可包括样式块合并子单元(图中未示出)，用于合并样式文档中相同样式宿主名的样式块，也就是将从样式宿主名列表中取出的每一个样式宿主名，与样式文档中已经存在的样式宿主名对比，如果发现存在相同的，则把两个相同的样式宿主名所对应的样式块进行合并。在合并过程中，遵循样式表的优先级顺序，即样式块中的样式规则无冲突，则将两个样式块中的所有样式规则合并形成新的样式块；若样式块中的样式规则存在冲突，则删除优先级低的样式块中的冲突样式规则，并将剩余的样式规则合并形成新的样式块。样式规则从低到高的优先级顺序为：系统默认、通过继承得到的样式、HTML元素相关的样式(例如<h1>)、在外部css(Cascading Style Sheets，层叠样式表)文件中的样式、HTML内部style block(样式元素文本块，即<style></style>中间的内容)中的样式、外部css文件中class(类别)样式、html内部style block中class样式、外部css文件中id样式、html内部style block中id样式、元素的样式(style)属性中style(样式属性，元素的属性，例如：<a style＝″border-color:#00CC66″>)样式。

合并过程中，为了给样式宿主名的字符串比较带来更高的效率，样式文档创建单元11可采用哈希(hash)对比法，即每一个对应元素名称字符串的哈希值存入样式文档中，后续获取的元素名称字符串也转换成哈希值，并与样式文档中的哈希值进行对比，若哈希值相同，则认为样式宿主名名称相同。通过哈希值对比，极大地提高了对比的速度。

通过上述简单状态机，相比逐级拆封的传统样式表解析方法，可以极大地提高效率。完成解析后，形成了一个样式文档，该样式文档中保存了样式对应元素与样式块的对应关系的映射表。

样式属性类创建单元12用于将样式文档中文本描述的样式规则转换为数值描述的样式规则，并生成包括数值描述的样式规则的样式属性类。一个样式属性类包括一个样式宿主名、一个宿主类型(元素类型、id属性、class属性)和一个对应的样式块。上述宿主类型根据样式文本描述生成，其中英文字母开头为元素类型，“#”开头为id属性，“.”开头为class属性。为提高速度，样式属性类创建单元12在样式规则转换时，将样式规则中的属性描述名进行hash运算，并与预先设置的支持属性名的哈希值进行比较，从而确定样式规则中对象的属性；同时样式属性类创建单元12根据对象的属性，调用不同的函数进行解析样式规则中的值。一般值分为以下几种类型：

1)、数字型：如字体宽度，边框宽度，颜色的RGB表示法等。

2)、描述型：如颜色的名称表示法(Red、Blue)，字体样式(粗体、斜体)。为了提高速度，对于描述型值，在样式属性类中，通常以数值进行宏定义。

挂载单元13用于将样式属性类挂载到HTML树(HtmlTree)，其中HTML树由多个节点元素构成。在挂载时，挂载单元13遍历HTML树，对于每一节点元素，先按照HTML树节点元素类型在样式属性类列表中查找，找到满足对应宿主类型与对应的元素类型描述，若发现有相应的样式属性类，则将该类挂到此元素上；再检查HTML树节点元素的id属性，若节点元素存在id属性，则在样式属性类列表中查找，找到满足对应宿主类型与相同的id属性描述，并在发现与上述id对应的样式属性类时将其挂到元素上；最后检查HTML树节点元素的class属性，若节点元素存在class属性，则在样式属性类的列表中查找，找到满足对应宿主类型与相同的class属性描述，并在发现与class对应的样式属性类时将其挂在元素上。如果有此三种中的两种或三种需要挂在元素上，则新建一个样式属性类，将这两种或三种进行合并，合并结果挂在元素上。合并过程，可按照上文提到的优先级顺序进行。上述id属性描述与class属性描述都可采用哈希方法提高速度。

如图2所示，在本发明的另一实施例中，除了包括用于解析样式表的样式文档创建单元21、样式属性类创建单元22、以及挂载单元23外，还包括绘制单元24。

绘制单元24用于绘制HTML树，该HTML树的节点中包含挂载上去的样式属性类。该绘制单元24在HTML树的函数迭代进入子节点的时候压栈，并在完成子节点的绘制返回父节点的时候出栈。由于HTML树的绘制是采用函数迭代的方式，因此绘制单元24采用一个样式栈(styleStack)来保留在当前的HTML树深度上的样式。在压栈时，将当前栈顶的样式属性类与当前节点元素的样式属性类进行合并操作，并将产生的新的样式属性类压栈，同时使用新的样式属性类绘制当前节点元素。

由于采用了样式栈，所以每个节点元素就不需要都保存一个用于绘制的样式属性类，而只需要保存自身的样式属性类描述，内存上得到了非常大的节省。同时，在合并出当前元素的样式属性类时，记录了相对于栈顶的样式属性类所作的变动，对于这部分变动进行了Pen、Brush等绘制设备的参数设置，而不是对于整个样式属性类进行参数设置，减少了绘制设备改动，提高了效率。而在完成子节点元素的绘制，返回上级元素时，利用了函数迭代的特性，在函数返回时，对于调用函数时设置的绘制设备参数，进行了还原，而不是用整个栈顶样式属性类进行设置，从而提高了效率。

如图3所示，是本发明一种样式表处理方法实施例的流程图。该方法包括：

步骤S31：从网页源代码文件中获取样式块及样式宿主名列表，并生成样式文档，所述样式文档包括样式块与样式宿主名列表的对应关系，其中所述样式块包括一个或多个文本描述的样式规则，所述样式规则包括属性描述名和值。

在该步骤中，首先以文本状态依次处理网页源代码文件中的代码；在以文本状态处理代码时，若检测到“/*”，则以注释状态处理后续代码，并在检测到“*/”符号时以文本状态处理后续代码；在以文本状态处理代码时，若检测到“.”、“#”、“_”、“：”之一，则以样式宿主名列表状态处理后续代码，其中在以样式宿主名列表状态处理代码时，以“，”切分各个元素；在以样式宿主名列表状态处理代码时，若检测到“{”，则以样式块状态处理后续代码，并检测到“}”时以文本状态处理后续代码，其中在以样式块状态处理代码时，将“：”之前的代码作为属性描述名，将“：”和“；”之间的代码作为值。在以样式宿主名列表状态处理代码和以样式块状态处理代码时，分别将样式宿主名列表和样式块添加到样式文档。

在该步骤中，还包括合并样式文档中相同样式元素的样式块的步骤。在合并样式块时，若样式块中的样式规则无冲突，则将两个样式块中的所有样式规则合并形成新的样式块；若样式块中的样式规则存在冲突，则删除优先级低的样式块中的冲突样式规则，并将剩余的样式规则合并形成新的样式块。特别地，可通过哈希对比实现样式块合并，即样式文档中存储样式宿主名列表中各元素的哈希值，在合并样式块时将相同哈希值的元素对应的样式块进行合并。

步骤S32：将所述样式文档中文本描述的样式规则转换为数值描述的样式规则，并生成包括数值描述的样式规则的样式属性类。

在该步骤中，将样式规则中的属性描述名进行哈希计算并与属性名的哈希值比较，以确定属性；然后根据对象的属性调用相应函数解析样式规则中的值。

步骤S33：将样式属性类挂载到HTML树的对应节点元素。

此外，上述方法还可包括绘制样式表的步骤，其在HTML树的函数迭代进入子节点的时候压栈，并在完成子节点的绘制返回父节点的时候出栈。在压栈时，将当前栈顶的样式属性类与当前节点元素的样式属性类进行合并操作，并将产生的新的样式属性类压栈，同时使用新的样式属性类绘制当前节点元素。

上述系统及方法，可应用于浏览器中，特别是资源特别匮乏的设备(例如手机等)的浏览器中，从而实现快速、流畅的网页浏览。

以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求的保护范围为准。

Claims (14)

1.一种样式表处理系统，其特征在于，包括：

样式文档创建单元，用于从网页源代码文件获取样式宿主名列表及样式块，并生成样式文档，其中所述样式文档包括样式宿主名列表与样式块的对应关系，所述样式块包括一个或多个文本描述的样式规则，每一样式规则包括属性描述名和值；

样式属性类创建单元，用于将所述样式文档中文本描述的样式规则转换为数值描述的样式规则，并生成包括数值描述的样式规则的样式属性类；

挂载单元，用于将所述样式属性类挂载到HTML树中对应的节点元素。

2.根据权利要求1所述的一种样式表处理系统，其特征在于，还包括用于绘制HTML树的绘制单元，所述绘制单元在HTML树的函数迭代进入子节点时压栈，并在完成子节点的绘制返回父节点时出栈。

3.根据权利要求1所述的一种样式表处理系统，其特征在于，所述样式属性类创建单元通过将样式规则中的属性描述名进行哈希计算并与样式属性类创建单元预先设置的支持属性名的哈希值比较，确定所述样式属性类中对应属性。

4.根据权利要求3所述的一种样式表处理系统，其特征在于，所述样式属性类创建单元根据对象属性调用对应函数解析样式规则中的值。

5.根据权利要求1所述的一种样式表处理系统，其特征在于，所述样式文档创建单元还包括样式块合并子单元，用于合并样式文档中指向相同样式宿主名的不同样式块。

6.根据权利要求1所述的一种样式表处理系统，其特征在于，所述挂载单元通过将样式宿主名列表中的样式宿主名进行哈希计算，并与HTML树中的HTML节点元素类型名、元素id属性值、元素class属性值进行哈希计算得到的哈希值进行对比，确定样式属性类需要挂载的节点元素。

7.一种样式表处理方法，其特征在于，包括以下步骤：

(a)从网页源代码文件获取样式宿主名列表及样式块，并生成样式文档，其中所述样式文档包括样式宿主名列表与样式块的对应关系，所述样式块包括一个或多个文本描述的样式规则，每一样式规则包括属性描述名和值；

(b)将所述样式文档中文本描述的样式规则转换为数值描述的样式规则，并生成包括数值描述的样式规则的样式属性类；

(c)将所述样式属性类挂载到HTML树中对应的节点元素。

8.根据权利要求7所述的样式表处理方法，其特征在于，还包括绘制样式表的步骤，其在HTML树的函数迭代进入子节点时压栈，并在完成子节点的绘制返回父节点时出栈。

9.根据权利要求7所述的样式表处理方法，其特征在于，所述步骤(a)包括：

以文本状态依次处理网页源代码文件中的样式表代码；

在以文本状态处理样式表代码时，若检测到“/*”，则以注释状态处理后续样式表代码，并在检测到“*/”符号时以文本状态处理后续代码；

在以文本状态处理样式表代码时，若检测到英文字母或“.”、“#”、“_”、“：”之一，则以样式宿主名列表状态处理后续代码，其中在以样式宿主名列表状态处理代码时，以“，”切分各个元素；

在以样式宿主名列表状态处理代码时，若检测到“{”，则以样式块状态处理后续代码，并在检测到“}”时以文本状态处理后续代码，其中在以样式块状态处理代码时，将“：”之前的代码作为属性描述名，将“：”和“；”之间的代码作为值。

10.根据权利要求9所述的样式表处理方法，其特征在于，在以样式宿主名列表状态处理代码和以样式块状态处理代码时，分别将样式宿主名列表和样式块添加到样式文档。

11.根据权利要求9或10所述的样式表处理方法，其特征在于，还包括合并样式文档中指向相同样式宿主名的不同样式块。

12.根据权利要求11所述的样式表处理方法，其特征在于，在合并样式块时，若指向相同样式宿主名的样式块中的样式规则无冲突，则将两个样式块中的所有样式规则合并形成新的样式块；若指向相同样式宿主名的样式块中的样式规则存在冲突，则删除优先级低的样式块中的冲突样式规则，并将剩余的样式规则合并形成新的样式块。

13.根据权利要求11所述的样式表处理方法，其特征在于，所述样式文档中存储样式宿主名列表中各样式宿主名的哈希值，在合并样式块时将相同哈希值的样式宿主名对应的样式块进行合并。

14.根据权利要求7所述的样式表处理方法，其特征在于，所述步骤(b)包括：

将样式规则中的属性描述名进行哈希计算并与属性名的哈希值比较，以确定所述对象的属性；

根据所述对象的属性调用对应函数解析样式规则中的值。

Images