CN103064849B - 一种层叠样式表处理方法和装置 - Google Patents

Abstract

本发明实施例公开了一种层叠样式表处理方法和装置，该方法包括：判断需要解析的CSS对象的CSS规则类型，所述CSS规则类型包括对所有标签都起效的第一类规则类型和对特定的标签起效的第二类规则类型，所述第一类规则存储在哈希链表中，所第二类规则存储在对应的标签链表中；根据所述CSS规则类型在相应的链表中获取对应的CSS规则；根据所述CSS规则解析所述CSS对象，所述CSS规则包括选择器和声明。采用本发明，可极大的减少CSS解析时的内存空间。

Description

一种层叠样式表处理方法和装置

技术领域

本发明涉及网页信息处理领域，尤其涉及一种层叠样式表处理方法和装置。

背景技术

层叠样式表（Cascading Style Sheets ，CSS）是一系列格式设置规则，比如规定字体的大小、颜色，在屏幕中的显示位置等等，它们控制WEB页面内容的外观。

CSS解析是指将CSS文本转换为结构化形式存储的过程，而CSS渲染则是为文档对象模型（Document Object Model，DOM）树中的节点寻找匹配的CSS规则并赋值的过程。树中的节点包括元素节点、内容节点、文本节点。

元素节点是DOM树中，一些包含属性但不包含子节点的结点，此类结点不需要关闭标签。如 <img> <br> <frame> 等。内容节点是DOM树中，一些包含属性且包含子节点的结点，需要关闭标签，此类节点是元素节点的子类。如 <a></a> <div></div> <table></table>等。文本节点是网页中，每段被HTML标签分割的文字块都作为DOM树中的一个文字结点，文字结点只能作为叶结点存在，不能有孩子。如“<p>文字节点1</p>”中的“文字节点1”。

这样，浏览器通过将解析出的CSS信息渲染到页面，使网页变得美观、绚丽。搜索引擎则需要利用CSS提供的信息辅助页面的分析，比如利用字体的大小分析页面的实际标题、利用页面元素在屏幕上的位置信息抽取页面主体内容等等，这些结果都将成为网页排序中的重要因子。此外，在搜索结果预览和页面转码等，需要展示页面的功能上，CSS的解析渲染更是发挥了重要的作用。因此，如何准确高效地解析渲染CSS，成为搜索引擎中一个很基本、也很重要的功能。

目前的CSS解析采用的是寻找关键字符的方法，对关键字符中间的部分进行解析，将解析结果存在相应的哈希桶里，过滤掉“不认识的部分”。在利用CSS渲染节点的时候，按照“只有标签选择器”、“只有类选择器”、“只有id选择器”、“有标签和类选择器”、“有标签和id选择器”五个方案的顺序寻找相应的CSS规则，找到匹配的则渲染节点，若规则中的声明有重复，后面的覆盖前面的。

但是，现有的CSS解析占用内存过大，仅哈希桶就占28M，加上存储辅助的指针，共计超过30M。

发明内容

本发明实施例所要解决的技术问题在于，提供一种层叠样式表处理方法和装置，能够减少CSS解析时占用的内存空间。

为了解决上述技术问题，本发明实施例提供了一种层叠样式表处理方法，包括：

判断需要解析的CSS对象的CSS规则类型，所述CSS规则类型包括对所有标签都起效的第一类规则类型和对特定的标签起效的第二类规则类型，所述第一类规则存储在哈希链表中，所第二类规则存储在对应的标签链表中；

根据所述CSS规则类型在相应的链表中获取对应的CSS规则；

根据所述CSS规则解析所述CSS对象，所述CSS规则包括选择器和声明。

相应地，本发明实施例还提供了一种层叠样式表处理装置，包括：

类型判断单元，用于判断需要解析的CSS对象的CSS规则类型，所述CSS规则类型包括对所有标签都起效的第一类规则类型和对特定的标签起效的第二类规则类型，所述第一类规则存储在哈希链表中，所第二类规则存储在对应的标签链表中；

规则获取单元，用于根据所述CSS规则类型在相应的链表中获取对应的CSS规则；

解析单元，用于根据所述CSS规则解析所述CSS对象，所述CSS规则包括选择器和声明。

实施本发明实施例，具有如下有益效果：在本发明实施例中，将CSS规则分类型进行存储，并将网页中所占比例较高的第一类规则存储在哈希链表中，一方面降低了存储空间，另一方面，由于哈希链表的长度大大下降，提高了后续渲染时的效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例中的层叠样式表处理方法的一个具体流程示意图；

图2是本发明实施例中的一条CSS规则的解析结构示意图；

图3是本发明实施例中的一种CSS规则分类存储结构的部分示意图；

图4是本发明实施例中的CSS渲染方法的一个具体流程示意图；

图5是本发明实施例中的层叠样式表处理装置的一个具体组成示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明实施例中，定义了CSS规则，并将CSS规则分为两种类型，即对所有标签都起效的第一类规则类型和对特定的标签起效的第二类规则类型。并将网页中所占比重最大的第一类规则存储在一个哈希链表中，由于哈希链表（或称哈希桶，哈希桶是哈希索引组织中的存储单位，可包含一个或多个索引记录）的个数控制在64个左右，里面只存放指针，在64位机上只占用内存0.5K。之后每添加一条规则便增加一个节点，放入相应的桶里，不必有辅助性的内存申请。统计数据显示，平均解析一个网页需要4M（兆比特）左右的内存，比原先的30M+ 下降了很多。这样的存储使得每条链表的长度得到了有效控制，一方面节省了存储资源，另一方面，则提高了CSS渲染对链表遍历时的效率。

如图1所示，为本发明实施例中的层叠样式表处理方法的一个具体流程示意图。该方法包括如下流程。

101、判断需要解析的CSS对象的CSS规则类型，所述CSS规则类型包括对所有标签都起效的第一类规则类型和对特定的标签起效的第二类规则类型，所述第一类规则存储在哈希链表中，所第二类规则存储在对应的标签链表中。

其中的CSS规则中包括选择器和声明。并且在CSS规则中可包括一个或多个声明，用类Selector表示所述选择器，用类StyleInfo表示所述声明，用类Attribute的链表表示所述选择器的后代关系。

若采用上述类定义规则，则将所述CSS规则的选择器的Attribute链表的首项作为所述CSS规则的类型的分类标准，当所述首项对所有标签都起效则所述CSS规则的类型为第一类规则类型，当所述首项已指定特定标签则所述CSS规则的类型为第二类规则类型。

如图2所示，为一条CSS规则的解析结构示意图。同时，在如图2的示例中，为了便于CSS规则的存储和渲染查找，Attribute链表的顺序采用和CSS语法中相反的方向。即，Attribute链表的头部是.class2,p.c1次之，div#d1排第三，.cs最后。

如图3所示，则为CSS规则分类存储结构的部分示意图。在本实施例中，第二类规则类型中针对div, table, p 等标签的规则独自存成各标签对应的一个链中。对所有标签都起效的第一类规则类型的CSS规则，则与 .class2 落在同一个哈希桶里的形成一链。如图2所示的CSS规则，它的选择器由 class2打头，p.c1, div#d1, .cs 依次挂在下方。其余的CSS规则也依此存储。

102、根据所述CSS规则类型在相应的链表中获取对应的CSS规则。

103、根据所述CSS规则解析所述CSS对象。

在上述方法的基础上，本发明实施例还进一步提供了CSS渲染的方法，即，DOM树中的每一个节点具有一个声明，所述声明用于存储所述节点的CSS信息，所述方法还包括为所述DOM树中的节点渲染CSS信息。其中，所述为所述DOM树中的节点渲染CSS信息包括：根据CSS规则类型层级获得与节点匹配的CSS规则；将所述CSS规则的声明渲染到节点上。

在具体根据规则渲染时，首先获得所述DOM树中的节点的class属性和id属性，节点中只有这两个属性是关系到CSS信息的，其余属性可以忽略。class属性和id属性的区别在于，一个id属性只能被所述DOM树中的一个节点所拥有，而一个class属性可以被所述多个DOM树中的节点拥有。之后遍历节点的所有匹配规则，防止遗漏造成的节点渲染不完全。如，图4所示，为所述DOM树中的节点渲染CSS信息包括以下步骤。

201、判断节点的属性是否包括class属性，当判断结果为包括时，执行步骤202，否则执行步骤203。

202、在所述class属性对应的哈希链表中查找匹配的CSS规则并将所述CSS规则的声明渲染到节点上，并执行步骤203。

203、判断所述节点的属性是否包括id属性，当判断结果为包括时执行步骤204，否则执行步骤205。

204、在所述id属性对应的哈希链表中查找匹配的CSS规则并将所述CSS规则的声明渲染到节点上，然后执行步骤205。

205、在所述节点对应的标签链表中查找CSS规则并将所述CSS规则的声明渲染到节点上。

在按上述方法进行渲染时，需要为节点在链表中查找匹配的CSS规则，将节点和链表中的每个CSS规则作一次匹配比较。如果匹配成功，则将该规则的声明渲染到节点上，并继续下一个规则的匹配比较。必须要遍历完链表，即在本发明实施例中不会只要有一个规则匹配成功就停止匹配和渲染的原因是因为，后续的匹配成功的CSS规则可能定义了前面CSS规则没有定义的声明。比如：div标签能成功匹配 div{color:read} 和 div{font-szie:14px}两条CSS规则，需要遍历完整个div链表才能保证所有的匹配的CSS信息都成功渲染要该节点上。

当然，在本发明实施例中也存在一种可能性，即与节点匹配的两个或两个以上CSS规则中定义了同一个声明，如果前后两个匹配成功的CSS规则定义了同一个声明，应该选择哪一个声明进行渲染？比如， <div id="d1" class="c1"><p id="d2" class="c2">正文</p></div> 中的p节点，与CSS规则 div .c2{color:green} 和CSS规则div#d1 p{color:red}都匹配，此时p节点的color值该取哪个呢？

为此，在本发明实施例中定义了将与所述节点匹配程度较高的CSS规则的声明渲染到所述节点上。而匹配程度可以根据优先匹配规则进行定义。

该优先匹配规则可包括下述规则中的一个或多个：

当多个CSS规则匹配同一个标签时，id 选择器匹配越多的，匹配程度越高；

当id 选择器匹配个数一样时，类选择器匹配越多的，匹配程度越高；

当id 和类选择器匹配个数一样时，标签匹配越多的，匹配程度越高；

当id选择器、类选择器、标签匹配个数都一样时，出现在后面的CSS规则优先匹配。

如上述例子中的p节点。它的CSS渲染过程如下：

1）有class属性c2，在c2对应的哈希链中找到匹配的规则div .c2{color:green}，给自己渲染上css的color信息green。并记下该规则与节点匹配程度：id匹配0个，class匹配1个，标签匹配1个，CSS规则出现的次序为CSS规则中的一个属性，暂记为n1。

2）有id属性d2，在d2对应的标签链中没找到匹配的规则，跳过。

3) 在p标签对应的标签链中找到对应的规则div#d1 p{color:red}。此时，该规则定义的color在p标签中已被渲染，则查看该规则与标签的匹配程度：id匹配1个，class匹配0个，标签匹配2个。与将p渲染成green的CSS规则比较。根据规则1，id匹配个数大1，所以覆盖p节点的CSS信息，将其color值渲染成red。

在本发明实施例中，在构建DOM树的过程中，能够为DOM树的节点高效准确地渲染上匹配的CSS信息，可以为后续的页面分析提供强有力的支持。同时，规则分类存储方案极大地缩小了使用的内存空间，如，可从先前的30M+，缩减至的 4M。

相应的，如图5所示，为本发明实施例中的层叠样式表处理装置的具体组成示意图。该装置3包括：类型判断单元30，用于判断需要解析的CSS对象的CSS规则类型，所述CSS规则类型包括对所有标签都起效的第一类规则类型和对特定的标签起效的第二类规则类型，所述第一类规则存储在哈希链表中，所第二类规则存储在对应的标签链表中；规则获取单元32，用于根据所述CSS规则类型在相应的链表中获取对应的CSS规则；解析单元34，用于根据所述CSS规则解析所述CSS对象，所述CSS规则包括选择器和声明。

其中，该装置3还可以进行CSS渲染，此时，DOM树中的每一个节点具有一个声明，所述声明用于存储所述节点的CSS信息，装置3还包括渲染单元36，用于为所述DOM树中的节点渲染CSS信息。图3中为都包括的情形。

在进行渲染时，当与节点匹配的两个或两个以上CSS规则中定义了同一个声明时，所述渲染单元36还用于将与所述节点匹配程度较高的CSS规则的声明渲染到所述节点上。

当然，上述渲染单元36具体在进行渲染时可采用前述方法中的过程，此处不做赘述。

在本发明实施例中，将CSS规则分类型进行存储，并将网页中所占比较较高的第一类规则存储在哈希链表中，一方面降低了存储空间，另一方面，由于哈希链表的长度大大下降，提高了后续渲染时的效率。

而在进行渲染时，按不同的CSS规则类型分别进行匹配和渲染，保证了节点渲染时不会遗漏规则，节点可以正确的渲染。并当渲染中出现声明冲突时，提出了冲突的解决机制。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体（Read-Only Memory，ROM）或随机存储记忆体（Random AccessMemory，RAM）等。

以上所揭露的仅为本发明一种较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。

Claims (12)

1.一种层叠样式表处理方法，其特征在于，所述方法包括

判断需要解析的层叠样式表CSS对象的CSS规则类型，所述CSS规则类型包括对所有标签都起效的第一类规则类型和对特定的标签起效的第二类规则类型，所述第一类规则存储在哈希链表中，所第二类规则存储在对应的标签链表中；

根据所述CSS规则类型在相应的链表中获取对应的CSS规则；

根据所述CSS规则解析所述CSS对象，所述CSS规则包括选择器和声明。

2.如权利要求1所述的方法，其特征在于，所述CSS规则中包括多个声明，用类Selector表示所述选择器，用类StyleInfo表示所述声明，用类Attribute的链表表示所述选择器的后代关系。

3.如权利要求2所述的方法，其特征在于，所述类Attribute的链表的顺序与CSS语法中的相反。

4.如权利要求2所述的方法，其特征在于，将所述CSS规则的选择器的Attribute链表的首项作为所述CSS规则的类型的分类标准，当所述首项对所有标签都起效则所述CSS规则的类型为第一类规则类型，当所述首项已指定特定标签则所述CSS规则的类型为第二类规则类型。

5.如权利要求1至4中任一项所述的方法，其特征在于，文档对象模型DOM树中的每一个节点具有一个声明，所述声明用于存储所述节点的CSS信息，所述方法还包括为所述DOM树中的节点渲染CSS信息。

6.如权利要求5所述的方法，其特征在于，所述为所述DOM树中的节点渲染CSS信息包括：

根据CSS规则类型层级获得与节点匹配的CSS规则；

将所述CSS规则的声明渲染到节点上。

7.如权利要求5所述的方法，其特征在于，所述为所述DOM树中的节点渲染CSS信息包括：

判断节点的属性是否包括class属性，当判断结果为包括class属性时，在所述class属性对应的哈希链表中查找匹配的CSS规则并将所述CSS规则的声明渲染到节点上，并进一步判断所述节点的属性是否包括id属性，当判断结果为不包括class属性时进一步判断所述节点的属性是否包括id属性；

当判断所述节点的属性包括id属性时，在所述id属性对应的哈希链表中查找匹配的CSS规则并将所述CSS规则的声明渲染到节点上，然后在所述节点对应的标签链表中查找CSS规则并将所述CSS规则的声明渲染到节点上，当判断所述节点的属性不包括id属性时，在所述节点对应的标签链表中查找CSS规则并将所述CSS规则的声明渲染到节点上。

8.如权利要求6所述的方法，其特征在于，当与节点匹配的两个或两个以上CSS规则中定义了同一个声明时，将与所述节点匹配程度较高的CSS规则的声明渲染到所述节点上。

9.如权利要求8所述的方法，其特征在于，所述将与所述节点匹配程度较高的CSS规则的声明渲染到所述节点上包括，根据优先匹配规则将与所述节点匹配程度较高的CSS规则的声明渲染到所述节点上；

其中，所述优先匹配规则包括下述规则中的一个或多个：

当多个CSS规则匹配同一个标签时，id 选择器匹配越多的，匹配程度越高；

当id 选择器匹配个数一样时，类选择器匹配越多的，匹配程度越高；

当id 和类选择器匹配个数一样时，标签匹配越多的，匹配程度越高；

当id选择器、类选择器、标签匹配个数都一样时，出现在后面的CSS规则优先匹配。

10.一种层叠样式表处理装置，其特征在于，所述装置包括：

类型判断单元，用于判断需要解析的CSS对象的CSS规则类型，所述CSS规则类型包括对所有标签都起效的第一类规则类型和对特定的标签起效的第二类规则类型，所述第一类规则存储在哈希链表中，所第二类规则存储在对应的标签链表中；

规则获取单元，用于根据所述CSS规则类型在相应的链表中获取对应的CSS规则；

解析单元，用于根据所述CSS规则解析所述CSS对象，所述CSS规则包括选择器和声明。

11.如权利要求10所述的装置，其特征在于，DOM树中的每一个节点具有一个用于存储所述节点的CSS信息的声明，所述装置还包括渲染单元，用于为所述DOM树中的节点渲染CSS信息。

12.如权利要求11所述的装置，其特征在于，当与节点匹配的两个或两个以上CSS规则中定义了同一个声明时，所述渲染单元还用于将与所述节点匹配程度较高的CSS规则的声明渲染到所述节点上。