一种自动分析CSS的改进方法研究

许 可,张大方,赵 丹

(湖南大学信息科学与工程学院,湖南 长沙 410082)

一种自动分析CSS的改进方法研究

许 可,张大方,赵 丹

(湖南大学信息科学与工程学院,湖南 长沙 410082)

CILLA是一种通过动态获取DOM树来自动分析层叠样式表(CSS)的方法，它能发现Web应用中无效或无用的CSS代码段。但是，该方法在分析带伪类选择器的CSS、带属性选择器的CSS、在页面元素属性内部声明的CSS以及动态生成的CSS时误报率较高。提出了一种改进的CILLA方法，实验结果表明，改进后的方法能平均降低分析误报率20%。

层叠样式表;文档对象模型;误报率

1 引言

现在Web应用开发已经成为一种热潮，其界面布局，尤其是个性化动态效果，也获得了越来越多的关注。在界面设计中，层叠样式表CSS(Cascading Style Sheets)扮演着十分重要的角色。它是一种通过定义HTML页面元素的位置、布局、颜色及字体来控制Web应用外观的代码[1]。

然而，编写CSS代码并不是一件十分简单的事情[2]。在开发过程中，有时由于应用的庞大复杂、设计上存在缺陷、开发人员的失误等，会造成一些无用或冗余的CSS代码段的生成[3]。比如，当使用jqueryMobile来构建Web应用时，应用界面只使用了其CSS框架中的部分样式，这样jqueryMobile中剩余部分CSS代码对于该应用来说就是冗余代码；另外，当多条CSS代码作用于同一HTML元素时，低优先级的CSS代码会被高优先级的代码所覆盖，从而造成该低优先级的代码段失效。

当Web应用中包含大量的这种无用代码时，会加重网络传输的负载以及服务器端和浏览器端的加载量，导致页面的加载时间延长，应用的响应速度降低，严重浪费带宽资源和影响用户体验；同时，这种无用代码还会影响代码质量，降低程序的可维护性，甚至引发程序错误。 在移动Web应用广泛流行的今天，这种无用代码带来的危害更加突出。目前已有一些针对程序中无用代码的分析处理方法。文献[4,5]中提出了对死亡代码以及不可达代码段的优化消除方法，这些方法的重点是优化代码生成。Tip F等人[6]使用程序转换以及抽取方法来检测和删除Java中无法访问的方法段及冗余代码段，以此来达到减少基于互联网分布式应用的大小。而Mesbah A等人[7]则提出了一种自动分析CSS的方法—CILLA，用来识别和剔除Web应用中无用的CSS代码。CILLA能够分析当前DOM(Document Object Model)状态树[8]中所使用的CSS，找出其中未匹配到HTML元素的CSS代码以及由于优先级覆盖原因而失效的CSS代码。但是，该方法不能分析带伪类选择器的CSS，对于带属性选择器的CSS，分析时则会产生错误结果，并且它没有考虑对HTML元素中的内部CSS以及通过Javascript动态生成的CSS的分析。因此，CILLA的误报率比较高，平均达到20%。

本文在CILLA的基础上，提出了一种改进的方法，通过实现的用来处理带伪类以及属性选择器的CSS的PA(Pseudo class and Attribute)-Match算法以及用来提取在页面元素属性内部声明和动态生成的CSS的I(Inline)-Search算法，降低了分析的误报率。实验结果表明，改进后的方法比原来的方法能够平均降低20%的误报率。

2 背景知识

CSS代码中的每条规则由两个部分组成：选择器和声明。图1所示的就是一个简单的CSS代码段，它用来作用于图2所示的DOM结构。如图1中所示，p:first-child表示一个选择器，{font-style:italic;}表示该条CSS规则的属性声明。整条规则表示将某元素中第一个p元素中所有字体样式设置为斜体。在本文中，我们使用图1和图2中的内容作为研究样例。CSS提供三种选择器机制来选取DOM中对应的元素。

(1)元素选择器：直接使用DOM元素，如p:first-child{font-style:italic;}及span[title="home"] {font-style:italic;}分别使用p元素与span元素。并且前者p元素后接:first-child这是一种带伪类的选择器，后者span元素后接[title= "home"] 是一种带有属性的选择器。

(2)ID选择器：以#开头，用来匹配DOM中带有对应ID值的元素，如#test{font-weight:normal;}。

(3)类选择器：以.开头，用来匹配DOM中带有对应class值的元素，如.school{font-weight:normal;}。

Web应用中对CSS的引入有如下三种方式：

(1)Inline:直接在HTML文件中使用style属性，如图2中style="font-weight:bold"；或者通过Javascript动态生成，如$(".school").css("font-weight","bold")。

(2)Embedded:在HTML文件〈header〉〈/header〉标签对之间使用〈style〉〈/style〉标签对进行引入。

(3)External style sheets：在HTML文件〈header〉〈/header〉标签对之间，通过〈link〉标签引入外部.css文件。

这三种引入方式的CSS覆盖优先级由高到低，Inline CSS具有最高的优先级。而处于同一级别下的CSS则按照其选择器定位DOM元素的详细程度以及代码前后位置来确定其优先级权重。

1 p:first-child{font-style:italic;}

2 span[title="home"]{font-style:italic;}

3 #test{font-weight:normal;}

4 .school{font-weight:normal;}

Figure 1 Example.css bold is the effective code segment

图1 example.css粗体表示的是有效的代码段

〈HTML〉

〈HEAD〉

〈LINK rel="stylesheet" type="text/css" href="example.css"〉

〈SCRIPT type="text/javascript" charset="utf-8" src="jquery1.7.2.js"〉〈/SCRIPT〉

〈/HEAD〉

〈BODY〉

〈P〉World〈/P〉

〈P〉Hello〈/P〉

〈SPAN title="home"〉Some text1〈/SPAN〉

〈DIV id = "test" style="font-weight:bold"〉Some text2〈/DIV〉

〈SPAN class="school"〉Some text3〈/SPAN〉

〈SCRIPT type="text/javascript"〉

$(".school").css("font-weight","bold");

〈/SCRIPT〉

〈/BODY〉

Figure 2 Example.html(top section is the DOM tree,bottom section is the view in browser)

CILLA方法通过分析Web应用中Embedded以及External style sheets中的CSS，标记出其中的无用CSS，其基本思想如图3所示。CILLA首先从应用中所有的CSS(但没包括带伪类选择器的CSS以及Inline CSS)中找出那些不能在当前DOM中找到匹配元素的CSS，即图3中的US；然后在剩下的CSS中找出那些因被高优先级CSS覆盖而失效的CSS，即图3中的IS；最后，US以及IS表示的就是该Web应用中无用的CSS代码。CILLA使用工具CSSParser提取解析CSS，使用工具Crawljax[9]来自动动态获取Web应用当前的DOM树。

Figure 3 Model of CILLA图3 CILLA基本思想模型

按照CSS中的概念及其覆盖规则，样例example.css中的规则1以及规则2应该是有效CSS，如图2中，分别作用于World及Some Text1，将其字体样式设置为斜体；规则3将ID为test的元素字体粗细设为正常样式，但该条CSS是无效的，因为它被对应元素中的Inline CSS style= "font-weight:bold"覆盖，如图2中，Some Text2的字体显示为粗体；规则4也是无效CSS，它被动态生成的CSS $(".school").css("font-weight","bold")覆盖，如图2中，Some Text3的字体也显示为粗体。因此，正确地分析结果应该是规则1和规则2是该Web应用中的有效CSS代码，而规则3和规则4是该应用中的无用的CSS代码段。但是，使用CILLA方法进行分析时，其结果如表1所示。可见，CILLA对上述CSS规则分析存在缺陷。它不能处理带伪类选择器的CSS，如规则1，它对其直接忽略处理，我们不能知道该规则是否匹配，是否有效；并且对于带属性的选择器规则2，它错误地认为该规则为无效，而实际上该规则是有效的；此外，由于没有考虑到Inline CSS和动态生成的CSS，CILLA对于被高优先级Inline CSS覆盖而失效无用的规则3和规则4，其分析结果却错误地认为这两条规则为有效CSS。由于存在这些方面的不足，造成了其误报率较高。所以，本文的目标就是弥补这些缺陷，提高CILLA的分析准确率。

Table 1 Sample analysis produced by CILLA

3 改进方法的算法实现

通过研究CILLA发现,原方法对样例中CSS规则1和规则2分析存在缺陷的原因是，Mesbah A等人在验证每条CSS规则是否匹配到当前DOM树中元素时，使用的是一种XPATH[7]验证方法。该方法先将对应规则的选择器作为参数，再利用其实现的一种XPATH生成算法来生成该选择器所代表元素对应的XPATH，然后利用该XPATH验证是否能在当前DOM树中找到匹配的元素，如图4a所示。但是,该XPATH验证算法不能处理带伪类选择器的CSS，且对带属性选择器的CSS生成的XPATH会错误地表示为空。其原因是在第二步转化XPATH的过程中，原算法没有实现对于带有伪类选择器的CSS的处理而是直接对其进行忽略，而对于带属性选择器的CSS原算法不能正确定位这些选择器在DOM树中所匹配的元素。因此，造成对于规则1和规则2的错误分析结果。我们将这类问题归结为XPATH验证缺陷问题。原方法中没有考虑到Inline CSS以及动态生成的CSS由于其优先级高而覆盖外部CSS使其失效，因而造成对于规则3和规则4的错误分析结果。实际上动态生成的CSS相当于动态在HTML元素内部声明CSS，本质上也是Inline CSS的一种，故我们将样例中规则3和规则4所形成的这类问题归结为未考虑Inline CSS问题。本文分别实现了两个算法来解决上述两个问题：算法PA-Match用来修复无法处理伪类选择器CSS以及对带属性选择器CSS误报的缺陷，算法I-Search用来修复没有考虑Inline CSS以及动态生成的CSS而造成误报的缺陷。

3.1 PA-Match算法

我们在原算法的工作流程中增加一个判断：如果传入的CSS带有伪类选择器或属性选择器，则利用本文实现的PA-Match算法来处理，使用queryElementBySelector模块直接在DOM树中查找对应元素来进行匹配验证，如图4b所示。算法具体实现如下,其中R表示所有的CSS规则。

1 foreachrule∈Rdo

2S←rule.GETSELECTORS()

3 foreachselector∈Sdo

4 if(selectoris pseudoClassSelector ‖selectoris attributeSelector)

5nodes←queryElementBySelector(selector,dom)

6 ifnodes≠∅ then

7selector.matched←true

8selector.matchedNodes←nodes

9 else…

Figure 4 XPATH verification and PA-Match verification图4 XPATH验证及加入PA-Match的验证

算法第1行首先对所有的CSS规则R执行遍历，然后获取每条规则所包含的所有选择器并将其赋值于S。接着遍历该规则的选择器集S，判断每个选择器是否为伪类选择器或者为带属性的选择器，如算法第3～4行所示。如果该选择器是伪类选择器或者是带属性的选择器，则调用queryElementBySelector模块，如算法第5行所示，验证是否能够通过该选择器在当前DOM树中找到对应元素节点。如果找到的节点nodes不为空，则证明该CSS规则能在当前DOM树中找到对应元素，将其选择器状态置为能匹配，并记录对应的匹配节点，算法表述为第6～8行。从第9行开始，算法对于其它类型的选择器按照原方法中的XPATH验证方法进行匹配验证。在queryElementBySelector模块中，以选择器selector以及当前DOM树作为输入，通过调用PseudoClassSearcher以及AttributeSearcher匹配器来在DOM树中查找伪类选择器以及带属性选择器所表示的元素，如果能找到对应元素，该模块返回对应的元素节点，否则返回空值，其具体工作流程如图5所示。由于在PA-Match算法中，我们只对带伪类选择器以及带属性选择器的CSS进行直接DOM匹配验证，对于其他的CSS仍按照原方法的XPATH方法进行匹配验证，所以PA-Match算法的实现不会影响原方法的正确分析率。

Figure 5 Workflow of queryElementBySelector module图5 queryElementBySelector模块工作流程

3.2 I-Search算法

该算法是用来在获取Web应用的所有CSS规则阶段，提取当前DOM树结构中的上述CSS。算法具体实现如下,其中输入为Σ(所访问过的DOM状态集)，输出为IC所有的 Inline CSS。

1 SetIC← ∅

2 foreachdom∈Σdo

3N←dom.GETELEMENTWITHSTYLE()

4 foreachnode∈Ndo

5css←GETSTYLEVALUE(node)

6IC←ELEMENTWITHSTYLE(node,css)

该算法将当前所访问的DOM状态集作为输入，在这些DOM状态集中进行遍历。对于每一个DOM状态，它首先抽取那些含有style属性的节点，并将这些节点集归于N，如第3行所示。然后遍历这些节点集N，对于每一个节点，按照第5行方法抽取其CSS规则，将该节点以及其对应的CSS规则信息存储到结果集IC中，如第6行所示。该结果集IC即我们所要寻找的Inline CSS及动态生成的CSS集合。在获得了这些CSS集合后，我们改进了原来的覆盖优先级判断流程，将这些新加入的CSS集与原来的CSS集进行覆盖优先级判断比较，该流程如图6所示。首先判断原来获取到的非Inline CSS与使用I-Search算法获取到的Inline CSS是否指向DOM树中的同一个元素，若指向不同元素，则它们之间不存在覆盖优先级的问题，因此可判定它们都是有效CSS；若指向相同元素，则需要进一步判断这些CSS的规则定义中是否包含相同的属性，因为Inline CSS具有最高优先级，在属性相同的情况下，它会覆盖非Inline CSS而使其失效。

Figure 6 Determing whether External style sheets and Embedded are overlaid by Inline CSS图6 判断External style sheets与Embedded(E-CSS)是否被Inline CSS(I-CSS)覆盖

使用包含上述两部分算法的改进方法，对于图1～图2所展示的样例进行分析，得到表2所示的结果。

Table 2 Sample analysis produced by improved CILLA

可见，改进后，新方法能够对样例CSS给出完全正确的分析结果。原方法不能分析的p:first-child这种带伪类选择器的CSS，我们能正确分析出规则1是有效的。对于带属性选择器的CSS规则2，我们也能正确分析出该规则为有效。同时，对于Inline CSS，我们能够正确分析各CSS覆盖优先级情况，正确判断规则3和规则4因为被Inline CSS覆盖而失效。

4 实验结果与分析

我们从网络上随机选择了六个Web应用作为实验样本，如表3所示。这些Web应用包括网络搜索引擎应用Baidu、用于图片分享的应用Phormer、公司企业网站EmployeeSolutions以及Equus、网页创意设计展示的Tonyyoo和用于艺术文化展览介绍的IglooOrg。

Table 3 Test samples

表3中，第一列ID表示实验样本对象的编号，第二列给出了该样本对象的名称，最后一列则列出了该Web应用的网络域名地址。然后，我们分别使用CILLA以及改进后的方法对以上六个实验样本进行分析实验，得到表4和表5中的结果。

Table 4 Test samples analysis produced by CILLA

表4和表5中，总CSS为所有带选择器的CSS加上所有Inline CSS；忽略代表因为带伪类选择器在原方法中未进行处理的CSS；匹配代表能在DOM树中找到对应元素的CSS，未匹配则表示不能找到对应元素的CSS；匹配但无效代表在匹配的CSS中，由于覆盖优先级的原则而不起作用的CSS；误报降低率的计算是将改进后能分析的带伪类选择器CSS总数加上Inline CSS总数再加上纠正分析结果的CSS数，这三数之和除以总CSS数得出的百分比。

Table 5 Test samples analysis produced by improved CILLA

每个样本中，分别列出了使用原方法以及新方法分析后的数据结果。通过改进前后数据对比我们能看到，新方法并没有对原方法正确的分析结果造成影响，且它能处理原方法一些不能处理的情况。对于样本1，新方法发现41条伪类选择器CSS中有33条能匹配，8条不能找到对应的元素，并且还发现了1条Inline CSS,误报率降低9.3%。对于样本2，新方法发现原来13条伪类选择器CSS中有12条能匹配，1条不能匹配，误报率降低24.6%。对于样本3，新方法发现22条伪类选择器CSS中有5条能匹配，17条不能匹配，误报率降低8.1%。对于样本4，新方法发现20条伪类选择器CSS中有12条能匹配，8条不能匹配，误报率降低48.8%。在样本5中，新方法能找出16条Inline CSS，在59条伪类选择器CSS中有17条能匹配，42条不能匹配，并且新方法中还纠正了2条带属性选择器被误报为失效的错误，误报率降低14.1%。对于样本6，新方法发现8条带伪类选择器CSS均能在其DOM树中找到对应元素，误报率降低15.4%。针对上述六个样本，改进后的方法能平均降低原方法的分析误报率20%。从上述实验对比中，我们可以看到，新方法能更好地对Web应用中的CSS进行分析，能比较明显地降低原方法的分析误报率。

5 结束语

本文在对自动分析CSS方法-CILLA存在的一些问题进行研究总结的基础上，通过算法改进以及新功能模块的引入，弥补了原方法不能分析处理伪类选择器CSS、对带属性选择器分析产生错误结果、未考虑Inline CSS等缺陷。对比实验表明表明，改进后的方法能平均降低原方法的分析误报率20%。但是，该改进还是存在某些不足，对于某些带伪元素选择器的CSS以及CSS3中一些新的选择器类型，我们不能进行分析处理，这会造成误报的产生。

[1] Badros G,Borning A,Marriott K.Constraint cascading style sheets for the web[C]∥Proc of the 12th Annual ACM Symposium on User Interface Software and Technology,1999:73-82.

[2] Keller M, Nussbaumer M. CSS code quality:A metric for abstractness; or why humans beat machines in CSS coding[C]∥Proc of the 7th International Conference on the Quality of Information and Communications Technology (QUATIC’10),2010:116-121.

[3] Keller M, Nussbaumer M. Cascading style sheets:A novel approach towards productive styling with today's standards[C]∥Proc of the 18th International Conference on World Wide Web,2009:1161-1162.

[4] Aho A V, Lam M S, Sethi R, et al. Compilers:Principles, techniques,and tools[M].2nd ed. New York:Addison Wesley, 2008:337-342.

[5] Debray S K, Evans W, Muth R. Compiler techniques for code compaction[J].ACM Transactions on Programming Languages and Systems,2000,22(2):378-415.

[6] Tip F,Sweeney P F,Laffra C,et al.Practical extraction techniques for Java[J].ACM Transactions on Programming Languages and Systems,2002,24(6):625-666.

[7] Mesbah A, Mirshokraie S. Automated analysis of CSS rules to support style maintenance[C]∥Proc of the 34th ACM/IEEE International Conference on Software Engineering (ICSE’12),2012:440-450.

[8] Zou Jie, Le D, Thoma G R. Combining DOM tree and geometric layout analysis for online medical journal article segmentation[C]∥Proc of the 6th ACM/IEEE-CS Joint Conference on Digital Libraries, 2006:119-128.

[9] Mesbah A, Bozdag E, van Deursen A. Crawling Ajax by inferring user interface state changes[C]∥Proc of the 8th International Conference on Web Engineering (ICWE’08), 2008:122-134.

XU Ke,born in 1986,MS candidate,his research interests include software testing, and software engineering.

An improved automatic CSS analysis method

XU Ke,ZHANG Da-fang,ZHAO Dan
(College of Information Science and Engineering,Hunan University,Changsha 410082,China)

CILLA is an automatic Cascading Style Sheets (CSS) analysis method by obtaining Document Object Model (DOM) tree dynamically. It can find out the effectless and useless CSS code snippets in Web applications. However, there is a high false positive rate when using CILLA to analyze CSS with Pseudo-Classes, CSS with attribute selector, CSS declared in the attribute of page element, or CSS generated automatically. An improved CILLA method is proposed to solve these problems. The experimental result shows that the improved method can reduce 20% false positive rate on average.

cascading style sheets;document object model;false positive

2012-08-21;

2012-12-11

国家973计划资助项目(2012CB315801)；国家自然科学基金资助项目(61173167)

1007-130X(2014)03-0475-06

TP311

A

10.3969/j.issn.1007-130X.2014.03.017

许可(1986-),男,湖南宁乡人，硕士生，研究方向为软件测试和软件工程。E-mail:xuke513@gmail.com

通信地址： 410082 湖南省长沙市湖南大学信息科学与工程学院

Address:College of Information Science and Engineering,Hunan University,Changsha 410082,Hunan,P.R.China