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

文档序号:6610688阅读:160来源:国知局
专利名称:一种样式表处理系统及方法
技术领域
本发明涉及网页浏览器领域,更具体地说,涉及一种样式表处理系统及方法。
背景技术
样式表(Cascading Style Sheet, CSS )是HTML的一部分,其作为对HTML 元素(或者标识)展示效果的一种扩展,功能极为强大。通过使用样式表,可 以完全放弃HTML元素的属性,就能实现精美的网页排版与布局。
样式表可以令网页制作者的工作更加轻松,例如当每个水平线语句都需要 使用<hr width="75%" size=5 align="center">的时候,使用样式表,只需要在 HTML文件中指定一次,网页样式就可以被整个网站应用。而且在上述需要更 改时,只需要在一个地方改变参数,而无需更改所有网页中的HTML。不仅如 此,当一个文件包含了所有的样式信息时,样式表还可以减少下载的时间。
然而,在使用浏览器解析样式表时,往往需要使用复杂的算法,从而占据 较大的内存及CPU资源。这对于文件较小的情况影响不大,但对于文件较大 或者系统资源相对匮乏的设备(例如手机),则将影响显示的流畅性,且很可 能造成系统崩溃。

发明内容
本发明要解决的技术问题在于,针对上述样式表解析时占用内存和CPU
较高的问题,提供一种样式表处理系统及方法。
本发明解决上述技术问题的技术方案是,提供一种样式表处理系统,包括 样式文档创建单元,用于从网页源代码文件获取样式宿主名列表及样式
块,并生成样式文档,其中所述样式文档包括样式宿主名列表与样式块的对应
关系,所述样式块包括一个或多个文本描述的样式规则,每一样式规则包括属
性描述名和值;
样式属性类创建单元,用于将所述样式文档中文本描述的样式规则转换为 数值描述的样式规则,并生成包括数值描述的样式规则的样式属性类;
挂载单元,用于将所述样式属性类挂载到HTML树中对应的节点元素。
在本发明所述的一种样式表处理系统中,还包括用于绘制HTML树的绘 制单元,所述绘制单元在HTML树的函数迭代进入子节点时压栈,并在完成 子节点的绘制返回父节点时出栈。
在本发明所述的一种样式表处理系统中,所述样式属性类创建单元通过将 样式规则中的属性描述名进行哈希计算并与样式属性类创建单元预先设置的 支持属性名的p合希值比4交,确定所述样式属性类中对应属性。
在本发明所述的一种样式表处理系统中,所述样式属性类创建单元#4居对 象属性调用对应函数解析样式规则中的值。
在本发明所述的一种样式表处理系统中,所述样式文档创建单元还包括样 式块合并子单元,用于合并样式文档中指向相同样式宿主名的不同样式块。
在本发明所述的一种样式表处理系统中,所述挂载单元通过将样式宿主名 列表中的样式宿主名进行哈希计算,并与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 )。 以下通过例l,说明上述各名词定义。
例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首先以文本状态处理 网页样式源代码文件;在文本状态中检测到7*"符号时,转换为以注释状态 处理后续代码,并在注释状态中检测到"*/"符号时转换回以文本状态处理后 续代码,注释状态中的文本全部忽略;在文本状态;险测到英文字母或"."、"#"、 "*,,、"—,,、":"时,切换到以样式宿主名列表状态处理后续代码,此时,通 过检测",",来切分检索出每一个对应样式宿主名,组成样式宿主名列表;在 样式宿主名列表状态中检测到"{"时,切换到以样式块状态处理后续代码, 若检测到"},,,切换到以样式文本状态处理后续代码。在样式块状态中,检测 到":"符号,将符号前的内容作为属性描述名,继续检测符号";",并将符号 ":"与";"之间的内容作为值。
在检测到"}"之前,样式文档创建单元11将样式宿主名列表与样式块合 并到样式文档中。在该样式文档中,样式规则以文本描述方式存储。
样式文档创建单元11中还可包括样式块合并子单元(图中未示出),用于 合并样式文档中相同样式宿主名的样式块,也就是将从样式宿主名列表中取出 的每一个样式宿主名,与样式文档中已经存在的样式宿主名对比,如果发现存 在相同的,则把两个相同的样式宿主名所对应的样式块进行合并。在合并过程 中,遵循样式表的优先级顺序,即样式块中的样式规则无冲突,则将两个样式
块中的所有样式规则合并形成新的样式块;若样式块中的样式规则存在冲突,
则删除优先级低的样式块中的冲突样式规则,并将剩余的样式规则合并形成新
的样式块。样式规则从低到高的优先级顺序为系统默认、通过继承得到的样 式、HTML元素相关的样式(例如〈hl〉)、在外部ess ( Cascading Style Sheets, 层叠样式表)文件中的样式、HTML内部style block (样式元素文本块,即 〈stylex/style〉中间的内容)中的样式、外部ess文件中class (类别)样式、 html内部style block中class样式、外部ess文件中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:从网页源代码文件中获取样式块及样式宿主名列表,并生成样
式块包括一个或多个文本描述的样式规则,所述样式规则包括属性描述名和 值。
在该步骤中,首先以文本状态依次处理网页源代码文件中的代码;在以文 本状态处理代码时,若检测到7*,,,则以注释状态处理后续代码,并在检测 到"*/,,符号时以文本状态处理后续代码;在以文本状态处理代码时,若;f企测 到".,,、"#"、"—"、""之一,则以样式宿主名列表状态处理后续代码,其 中在以样式宿主名列表状态处理代码时,以",,,切分各个元素;在以样式宿 主名列表状态处理代码时,若检测到"{",则以样式块状态处理后续代码,并 检测到"}"时以文本状态处理后续代码,其中在以样式块状态处理代码时, 将""之前的代码作为属性描述名,将""和";"之间的代码作为值。在 以样式宿主名列表状态处理代码和以样式块状态处理代码时,分别将样式宿主 名列表和样式块添加到样式文档。
并样式块时,若样式块中的样式规则无冲突,则将两个样式块中的所有样式规 则合并形成新的样式块;若样式块中的样式规则存在冲突,则删除优先级低的 样式块中的冲突样式规则,并将剩余的样式规则合并形成新的样式块。特别地, 可通过哈希对比实现样式块合并,即样式文档中存储样式宿主名列表中各元素
步骤S32:将所述样式文档中文本描述的样式规则转换为数值描述的样式
规则,并生成包括数值描述的样式规则的样式属性类。
在该步骤中,将样式规则中的属性描述名进行哈希计算并与属性名的哈希
值比较,以确定属性;然后根据对象的属性调用相应函数解析样式规则中的值。 步骤S33:将样式属性类挂载到HTML树的对应节点元素。 此外,上述方法还可包括绘制样式表的步骤,其在HTML树的函数迭代 进入子节点的时候压栈,并在完成子节点的绘制返回父节点的时候出栈。在压 栈时,将当前栈顶的样式属性类与当前节点元素的样式属性类进行合并操作, 并将产生的新的样式属性类压栈,同时使用新的样式属性类绘制当前节点元 素。
上述系统及方法,可应用于浏览器中,特别是资源特别匮乏的设备(例如 手机等)的浏览器中,从而实现快速、流畅的网页浏览。
以上所述,仅为本发明较佳的具体实施方式
,但本发明的保护范围并不局 限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,可轻易 想到的变化或替换,都应涵盖在本发明的保护范围之内。因此,本发明的保护 范围应该以权利要求的保护范围为准。
权利要求
1、一种样式表处理系统,其特征在于,包括样式文档创建单元,用于从网页源代码文件获取样式宿主名列表及样式块,并生成样式文档,其中所述样式文档包括样式宿主名列表与样式块的对应关系,所述样式块包括一个或多个文本描述的样式规则,每一样式规则包括属性描述名和值;样式属性类创建单元,用于将所述样式文档中文本描述的样式规则转换为数值描述的样式规则,并生成包括数值描述的样式规则的样式属性类;挂载单元,用于将所述样式属性类挂载到HTML树中对应的节点元素。
2、 根据权利要求1所述的一种样式表处理系统,其特征在于,还包括用 于绘制HTML树的绘制单元,所述绘制单元在HTML树的函数迭代进入予节 点时压栈,并在完成子节点的绘制返回父节点时出栈。
3、 根据权利要求1所述的一种样式表处理系统,其特征在于,所述样式 属性类创建单元通过将样式规则中的属性描述名进行哈希计算并与样式属性 类创建单元预先设置的支持属性名的哈希值比较,确定所述样式属性类中对应 属性。
4、 根据权利要求3所述的一种样式表处理系统,其特征在于,所述样式 属性类创建单元根据对象属性调用对应函数解析样式规则中的值。
5、 根据权利要求1所述的一种样式表处理系统,其特征在于,所述样式 文档创建单元还包括样式块合并子单元,用于合并样式文档中指向相同样式宿 主名的不同样式块。
6、 根据权利要求1所述的一种样式表处理系统,其特征在于,所述挂载的HTML节点元素类型名、元素id属性值、元素class属性值进行哈希计算得 到的哈希值进行对比,确定样式属性类需要挂载的节点元素。
7、 一种样式表处理方法,其特征在于,包括以下步骤(a)从网页源代码文件获取样式宿主名列表及样式块,并生成样式文档, 其中所述样式文档包括样式宿主名列表与样式块的对应关系,所述样式块包括一个或多个文本描述的样式规则,每一样式规则包括属性描述名和值;(b )将所述样式文档中文本描述的样式规则转换为数值描述的样式规则,并生成包括数值描述的样式规则的样式属性类;(c)将所述样式属性类挂载到HTML树中对应的节点元素。
8、 根据权利要求7所述的样式表处理方法,其特征在于,还包括绘制样 式表的步骤,其在HTML树的函数迭代进入子节点时压栈,并在完成子节点 的绘制返回父节点时出栈。
9、 根据权利要求7所述的样式表处理方法,其特征在于,所述步骤(a) 包括在以文本状态处理样式表代码时,若检测到"/*",则以注释状态处理后 续样式表代码,并在检测到"*/,,符号时以文本状态处理后续代码;在以文本状态处理样式表代码时,若检测到英文字母或".,,、"#"、"—"、 ":,,之一,则以样式宿主名列表状态处理后续代码,其中在以样式宿主名列 表状态处理代码时,以","切分各个元素;在以样式宿主名列表状态处理代码时,若检测到"{,,,则以样式块状态处 理后续代码,并在^r测到"}"时以文本状态处理后续代码,其中在以样式块 状态处理代码时,将""之前的代码作为属性描述名,将",,和";"之间 的代码作为值。
10、 根据权利要求9所述的样式表处理方法,其特征在于,在以样式宿主 名列表状态处理代码和以样式块状态处理代码时,分别将样式宿主名列表和样 式块添加到样式文档。
11、 根据权利要求9或IO所述的样式表处理方法,其特征在于,还包括 合并样式文档中指向相同样式宿主名的不同样式块。
12、 根据权利要求11所述的样式表处理方法,其特征在于,在合并样式 块时,若指向相同样式宿主名的样式块中的样式规则无冲突,则将两个样式块 中的所有样式规则合并形成新的样式块;若指向相同样式宿主名的样式块中的样式规则存在冲突,则删除优先级低的样式块中的沖突样式规则,并将剩余的 样式规则合并形成新的样式块。
13、 根据权利要求11所述的样式表处理方法,其特征在于,所述样式文 档中存储样式宿主名列表中各样式宿主名的哈希值,在合并样式块时将相同哈 希值的样式宿主名对应的样式块进行合并。
14、 根据权利要求7所述的样式表处理方法,其特征在于,所述步骤(b) 包括将样式规则中的属性描述名进行哈希计算并与属性名的哈希值比较,以确 定所述对象的属性;根据所述对象的属性调用对应函数解析样式规则中的值。
全文摘要
本发明公开了一种样式表处理系统,包括样式文档创建单元,用于从网页源代码文件获取样式宿主名列表及样式块,并生成样式文档,其中所述样式文档包括样式宿主名列表与样式块的对应关系,所述样式块包括一个或多个文本描述的样式规则,每一样式规则包括属性描述名和值;样式属性类创建单元,用于将所述样式文档中文本描述的样式规则转换为数值描述的样式规则,并生成包括数值描述的样式规则的样式属性类;挂载单元,用于将所述样式属性类挂载到HTML树中对应的节点元素。本发明还公开了一种对应的方法。本发明特别适用于系统资源非常匮乏的设备,例如手机等,通过有效降低系统资源的占用,从而给用户体验带来极大的提升。
文档编号G06F17/30GK101183372SQ20071012542
公开日2008年5月21日 申请日期2007年12月21日 优先权日2007年12月21日
发明者宇 纪, 赵斗斗 申请人:腾讯科技(深圳)有限公司
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1