許 可,張大方,趙 丹

(湖南大學(xué)信息科學(xué)與工程學(xué)院,湖南 長沙 410082)

一種自動分析CSS的改進方法研究

許 可,張大方,趙 丹

(湖南大學(xué)信息科學(xué)與工程學(xué)院,湖南 長沙 410082)

CILLA是一種通過動態(tài)獲取DOM樹來自動分析層疊樣式表(CSS)的方法，它能發(fā)現(xiàn)Web應(yīng)用中無效或無用的CSS代碼段。但是，該方法在分析帶偽類選擇器的CSS、帶屬性選擇器的CSS、在頁面元素屬性內(nèi)部聲明的CSS以及動態(tài)生成的CSS時誤報率較高。提出了一種改進的CILLA方法，實驗結(jié)果表明，改進后的方法能平均降低分析誤報率20%。

層疊樣式表;文檔對象模型;誤報率

1 引言

現(xiàn)在Web應(yīng)用開發(fā)已經(jīng)成為一種熱潮，其界面布局，尤其是個性化動態(tài)效果，也獲得了越來越多的關(guān)注。在界面設(shè)計中，層疊樣式表CSS(Cascading Style Sheets)扮演著十分重要的角色。它是一種通過定義HTML頁面元素的位置、布局、顏色及字體來控制Web應(yīng)用外觀的代碼[1]。

然而，編寫CSS代碼并不是一件十分簡單的事情[2]。在開發(fā)過程中，有時由于應(yīng)用的龐大復(fù)雜、設(shè)計上存在缺陷、開發(fā)人員的失誤等，會造成一些無用或冗余的CSS代碼段的生成[3]。比如，當(dāng)使用jqueryMobile來構(gòu)建Web應(yīng)用時，應(yīng)用界面只使用了其CSS框架中的部分樣式，這樣jqueryMobile中剩余部分CSS代碼對于該應(yīng)用來說就是冗余代碼；另外，當(dāng)多條CSS代碼作用于同一HTML元素時，低優(yōu)先級的CSS代碼會被高優(yōu)先級的代碼所覆蓋，從而造成該低優(yōu)先級的代碼段失效。

當(dāng)Web應(yīng)用中包含大量的這種無用代碼時，會加重網(wǎng)絡(luò)傳輸?shù)呢?fù)載以及服務(wù)器端和瀏覽器端的加載量，導(dǎo)致頁面的加載時間延長，應(yīng)用的響應(yīng)速度降低，嚴(yán)重浪費帶寬資源和影響用戶體驗；同時，這種無用代碼還會影響代碼質(zhì)量，降低程序的可維護性，甚至引發(fā)程序錯誤。 在移動Web應(yīng)用廣泛流行的今天，這種無用代碼帶來的危害更加突出。目前已有一些針對程序中無用代碼的分析處理方法。文獻[4,5]中提出了對死亡代碼以及不可達(dá)代碼段的優(yōu)化消除方法，這些方法的重點是優(yōu)化代碼生成。Tip F等人[6]使用程序轉(zhuǎn)換以及抽取方法來檢測和刪除Java中無法訪問的方法段及冗余代碼段，以此來達(dá)到減少基于互聯(lián)網(wǎng)分布式應(yīng)用的大小。而Mesbah A等人[7]則提出了一種自動分析CSS的方法—CILLA，用來識別和剔除Web應(yīng)用中無用的CSS代碼。CILLA能夠分析當(dāng)前DOM(Document Object Model)狀態(tài)樹[8]中所使用的CSS，找出其中未匹配到HTML元素的CSS代碼以及由于優(yōu)先級覆蓋原因而失效的CSS代碼。但是，該方法不能分析帶偽類選擇器的CSS，對于帶屬性選擇器的CSS，分析時則會產(chǎn)生錯誤結(jié)果，并且它沒有考慮對HTML元素中的內(nèi)部CSS以及通過Javascript動態(tài)生成的CSS的分析。因此，CILLA的誤報率比較高，平均達(dá)到20%。

本文在CILLA的基礎(chǔ)上，提出了一種改進的方法，通過實現(xiàn)的用來處理帶偽類以及屬性選擇器的CSS的PA(Pseudo class and Attribute)-Match算法以及用來提取在頁面元素屬性內(nèi)部聲明和動態(tài)生成的CSS的I(Inline)-Search算法，降低了分析的誤報率。實驗結(jié)果表明，改進后的方法比原來的方法能夠平均降低20%的誤報率。

2 背景知識

CSS代碼中的每條規(guī)則由兩個部分組成：選擇器和聲明。圖1所示的就是一個簡單的CSS代碼段，它用來作用于圖2所示的DOM結(jié)構(gòu)。如圖1中所示，p:first-child表示一個選擇器，{font-style:italic;}表示該條CSS規(guī)則的屬性聲明。整條規(guī)則表示將某元素中第一個p元素中所有字體樣式設(shè)置為斜體。在本文中，我們使用圖1和圖2中的內(nèi)容作為研究樣例。CSS提供三種選擇器機制來選取DOM中對應(yīng)的元素。

(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中帶有對應(yīng)ID值的元素，如#test{font-weight:normal;}。

(3)類選擇器：以.開頭，用來匹配DOM中帶有對應(yīng)class值的元素，如.school{font-weight:normal;}。

Web應(yīng)用中對CSS的引入有如下三種方式：

(1)Inline:直接在HTML文件中使用style屬性，如圖2中style="font-weight:bold"；或者通過Javascript動態(tài)生成，如$(".school").css("font-weight","bold")。

(2)Embedded:在HTML文件〈header〉〈/header〉標(biāo)簽對之間使用〈style〉〈/style〉標(biāo)簽對進行引入。

(3)External style sheets：在HTML文件〈header〉〈/header〉標(biāo)簽對之間，通過〈link〉標(biāo)簽引入外部.css文件。

這三種引入方式的CSS覆蓋優(yōu)先級由高到低，Inline CSS具有最高的優(yōu)先級。而處于同一級別下的CSS則按照其選擇器定位DOM元素的詳細(xì)程度以及代碼前后位置來確定其優(yōu)先級權(quán)重。

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應(yīng)用中Embedded以及External style sheets中的CSS，標(biāo)記出其中的無用CSS，其基本思想如圖3所示。CILLA首先從應(yīng)用中所有的CSS(但沒包括帶偽類選擇器的CSS以及Inline CSS)中找出那些不能在當(dāng)前DOM中找到匹配元素的CSS，即圖3中的US；然后在剩下的CSS中找出那些因被高優(yōu)先級CSS覆蓋而失效的CSS，即圖3中的IS；最后，US以及IS表示的就是該Web應(yīng)用中無用的CSS代碼。CILLA使用工具CSSParser提取解析CSS，使用工具Crawljax[9]來自動動態(tài)獲取Web應(yīng)用當(dāng)前的DOM樹。

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

按照CSS中的概念及其覆蓋規(guī)則，樣例example.css中的規(guī)則1以及規(guī)則2應(yīng)該是有效CSS，如圖2中，分別作用于World及Some Text1，將其字體樣式設(shè)置為斜體；規(guī)則3將ID為test的元素字體粗細(xì)設(shè)為正常樣式，但該條CSS是無效的，因為它被對應(yīng)元素中的Inline CSS style= "font-weight:bold"覆蓋，如圖2中，Some Text2的字體顯示為粗體；規(guī)則4也是無效CSS，它被動態(tài)生成的CSS $(".school").css("font-weight","bold")覆蓋，如圖2中，Some Text3的字體也顯示為粗體。因此，正確地分析結(jié)果應(yīng)該是規(guī)則1和規(guī)則2是該Web應(yīng)用中的有效CSS代碼，而規(guī)則3和規(guī)則4是該應(yīng)用中的無用的CSS代碼段。但是，使用CILLA方法進行分析時，其結(jié)果如表1所示?？梢?，CILLA對上述CSS規(guī)則分析存在缺陷。它不能處理帶偽類選擇器的CSS，如規(guī)則1，它對其直接忽略處理，我們不能知道該規(guī)則是否匹配，是否有效；并且對于帶屬性的選擇器規(guī)則2，它錯誤地認(rèn)為該規(guī)則為無效，而實際上該規(guī)則是有效的；此外，由于沒有考慮到Inline CSS和動態(tài)生成的CSS，CILLA對于被高優(yōu)先級Inline CSS覆蓋而失效無用的規(guī)則3和規(guī)則4，其分析結(jié)果卻錯誤地認(rèn)為這兩條規(guī)則為有效CSS。由于存在這些方面的不足，造成了其誤報率較高。所以，本文的目標(biāo)就是彌補這些缺陷，提高CILLA的分析準(zhǔn)確率。

Table 1 Sample analysis produced by CILLA

3 改進方法的算法實現(xiàn)

通過研究CILLA發(fā)現(xiàn),原方法對樣例中CSS規(guī)則1和規(guī)則2分析存在缺陷的原因是，Mesbah A等人在驗證每條CSS規(guī)則是否匹配到當(dāng)前DOM樹中元素時，使用的是一種XPATH[7]驗證方法。該方法先將對應(yīng)規(guī)則的選擇器作為參數(shù)，再利用其實現(xiàn)的一種XPATH生成算法來生成該選擇器所代表元素對應(yīng)的XPATH，然后利用該XPATH驗證是否能在當(dāng)前DOM樹中找到匹配的元素，如圖4a所示。但是,該XPATH驗證算法不能處理帶偽類選擇器的CSS，且對帶屬性選擇器的CSS生成的XPATH會錯誤地表示為空。其原因是在第二步轉(zhuǎn)化XPATH的過程中，原算法沒有實現(xiàn)對于帶有偽類選擇器的CSS的處理而是直接對其進行忽略，而對于帶屬性選擇器的CSS原算法不能正確定位這些選擇器在DOM樹中所匹配的元素。因此，造成對于規(guī)則1和規(guī)則2的錯誤分析結(jié)果。我們將這類問題歸結(jié)為XPATH驗證缺陷問題。原方法中沒有考慮到Inline CSS以及動態(tài)生成的CSS由于其優(yōu)先級高而覆蓋外部CSS使其失效，因而造成對于規(guī)則3和規(guī)則4的錯誤分析結(jié)果。實際上動態(tài)生成的CSS相當(dāng)于動態(tài)在HTML元素內(nèi)部聲明CSS，本質(zhì)上也是Inline CSS的一種，故我們將樣例中規(guī)則3和規(guī)則4所形成的這類問題歸結(jié)為未考慮Inline CSS問題。本文分別實現(xiàn)了兩個算法來解決上述兩個問題：算法PA-Match用來修復(fù)無法處理偽類選擇器CSS以及對帶屬性選擇器CSS誤報的缺陷，算法I-Search用來修復(fù)沒有考慮Inline CSS以及動態(tài)生成的CSS而造成誤報的缺陷。

3.1 PA-Match算法

我們在原算法的工作流程中增加一個判斷：如果傳入的CSS帶有偽類選擇器或?qū)傩赃x擇器，則利用本文實現(xiàn)的PA-Match算法來處理，使用queryElementBySelector模塊直接在DOM樹中查找對應(yīng)元素來進行匹配驗證，如圖4b所示。算法具體實現(xiàn)如下,其中R表示所有的CSS規(guī)則。

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規(guī)則R執(zhí)行遍歷，然后獲取每條規(guī)則所包含的所有選擇器并將其賦值于S。接著遍歷該規(guī)則的選擇器集S，判斷每個選擇器是否為偽類選擇器或者為帶屬性的選擇器，如算法第3～4行所示。如果該選擇器是偽類選擇器或者是帶屬性的選擇器，則調(diào)用queryElementBySelector模塊，如算法第5行所示，驗證是否能夠通過該選擇器在當(dāng)前DOM樹中找到對應(yīng)元素節(jié)點。如果找到的節(jié)點nodes不為空，則證明該CSS規(guī)則能在當(dāng)前DOM樹中找到對應(yīng)元素，將其選擇器狀態(tài)置為能匹配，并記錄對應(yīng)的匹配節(jié)點，算法表述為第6～8行。從第9行開始，算法對于其它類型的選擇器按照原方法中的XPATH驗證方法進行匹配驗證。在queryElementBySelector模塊中，以選擇器selector以及當(dāng)前DOM樹作為輸入，通過調(diào)用PseudoClassSearcher以及AttributeSearcher匹配器來在DOM樹中查找偽類選擇器以及帶屬性選擇器所表示的元素，如果能找到對應(yīng)元素，該模塊返回對應(yīng)的元素節(jié)點，否則返回空值，其具體工作流程如圖5所示。由于在PA-Match算法中，我們只對帶偽類選擇器以及帶屬性選擇器的CSS進行直接DOM匹配驗證，對于其他的CSS仍按照原方法的XPATH方法進行匹配驗證，所以PA-Match算法的實現(xiàn)不會影響原方法的正確分析率。

Figure 5 Workflow of queryElementBySelector module圖5 queryElementBySelector模塊工作流程

3.2 I-Search算法

該算法是用來在獲取Web應(yīng)用的所有CSS規(guī)則階段，提取當(dāng)前DOM樹結(jié)構(gòu)中的上述CSS。算法具體實現(xiàn)如下,其中輸入為Σ(所訪問過的DOM狀態(tài)集)，輸出為IC所有的 Inline CSS。

1 SetIC← ?

2 foreachdom∈Σdo

3N←dom.GETELEMENTWITHSTYLE()

4 foreachnode∈Ndo

5css←GETSTYLEVALUE(node)

6IC←ELEMENTWITHSTYLE(node,css)

該算法將當(dāng)前所訪問的DOM狀態(tài)集作為輸入，在這些DOM狀態(tài)集中進行遍歷。對于每一個DOM狀態(tài)，它首先抽取那些含有style屬性的節(jié)點，并將這些節(jié)點集歸于N，如第3行所示。然后遍歷這些節(jié)點集N，對于每一個節(jié)點，按照第5行方法抽取其CSS規(guī)則，將該節(jié)點以及其對應(yīng)的CSS規(guī)則信息存儲到結(jié)果集IC中，如第6行所示。該結(jié)果集IC即我們所要尋找的Inline CSS及動態(tài)生成的CSS集合。在獲得了這些CSS集合后，我們改進了原來的覆蓋優(yōu)先級判斷流程，將這些新加入的CSS集與原來的CSS集進行覆蓋優(yōu)先級判斷比較，該流程如圖6所示。首先判斷原來獲取到的非Inline CSS與使用I-Search算法獲取到的Inline CSS是否指向DOM樹中的同一個元素，若指向不同元素，則它們之間不存在覆蓋優(yōu)先級的問題，因此可判定它們都是有效CSS；若指向相同元素，則需要進一步判斷這些CSS的規(guī)則定義中是否包含相同的屬性，因為Inline CSS具有最高優(yōu)先級，在屬性相同的情況下，它會覆蓋非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所示的結(jié)果。

Table 2 Sample analysis produced by improved CILLA

可見，改進后，新方法能夠?qū)永鼵SS給出完全正確的分析結(jié)果。原方法不能分析的p:first-child這種帶偽類選擇器的CSS，我們能正確分析出規(guī)則1是有效的。對于帶屬性選擇器的CSS規(guī)則2，我們也能正確分析出該規(guī)則為有效。同時，對于Inline CSS，我們能夠正確分析各CSS覆蓋優(yōu)先級情況，正確判斷規(guī)則3和規(guī)則4因為被Inline CSS覆蓋而失效。

4 實驗結(jié)果與分析

我們從網(wǎng)絡(luò)上隨機選擇了六個Web應(yīng)用作為實驗樣本，如表3所示。這些Web應(yīng)用包括網(wǎng)絡(luò)搜索引擎應(yīng)用Baidu、用于圖片分享的應(yīng)用Phormer、公司企業(yè)網(wǎng)站EmployeeSolutions以及Equus、網(wǎng)頁創(chuàng)意設(shè)計展示的Tonyyoo和用于藝術(shù)文化展覽介紹的IglooOrg。

Table 3 Test samples

表3中，第一列ID表示實驗樣本對象的編號，第二列給出了該樣本對象的名稱，最后一列則列出了該Web應(yīng)用的網(wǎng)絡(luò)域名地址。然后，我們分別使用CILLA以及改進后的方法對以上六個實驗樣本進行分析實驗，得到表4和表5中的結(jié)果。

Table 4 Test samples analysis produced by CILLA

表4和表5中，總CSS為所有帶選擇器的CSS加上所有Inline CSS；忽略代表因為帶偽類選擇器在原方法中未進行處理的CSS；匹配代表能在DOM樹中找到對應(yīng)元素的CSS，未匹配則表示不能找到對應(yīng)元素的CSS；匹配但無效代表在匹配的CSS中，由于覆蓋優(yōu)先級的原則而不起作用的CSS；誤報降低率的計算是將改進后能分析的帶偽類選擇器CSS總數(shù)加上Inline CSS總數(shù)再加上糾正分析結(jié)果的CSS數(shù)，這三數(shù)之和除以總CSS數(shù)得出的百分比。

Table 5 Test samples analysis produced by improved CILLA

每個樣本中，分別列出了使用原方法以及新方法分析后的數(shù)據(jù)結(jié)果。通過改進前后數(shù)據(jù)對比我們能看到，新方法并沒有對原方法正確的分析結(jié)果造成影響，且它能處理原方法一些不能處理的情況。對于樣本1，新方法發(fā)現(xiàn)41條偽類選擇器CSS中有33條能匹配，8條不能找到對應(yīng)的元素，并且還發(fā)現(xiàn)了1條Inline CSS,誤報率降低9.3%。對于樣本2，新方法發(fā)現(xiàn)原來13條偽類選擇器CSS中有12條能匹配，1條不能匹配，誤報率降低24.6%。對于樣本3，新方法發(fā)現(xiàn)22條偽類選擇器CSS中有5條能匹配，17條不能匹配，誤報率降低8.1%。對于樣本4，新方法發(fā)現(xiàn)20條偽類選擇器CSS中有12條能匹配，8條不能匹配，誤報率降低48.8%。在樣本5中，新方法能找出16條Inline CSS，在59條偽類選擇器CSS中有17條能匹配，42條不能匹配，并且新方法中還糾正了2條帶屬性選擇器被誤報為失效的錯誤，誤報率降低14.1%。對于樣本6，新方法發(fā)現(xiàn)8條帶偽類選擇器CSS均能在其DOM樹中找到對應(yīng)元素，誤報率降低15.4%。針對上述六個樣本，改進后的方法能平均降低原方法的分析誤報率20%。從上述實驗對比中，我們可以看到，新方法能更好地對Web應(yīng)用中的CSS進行分析，能比較明顯地降低原方法的分析誤報率。

5 結(jié)束語

本文在對自動分析CSS方法-CILLA存在的一些問題進行研究總結(jié)的基礎(chǔ)上，通過算法改進以及新功能模塊的引入，彌補了原方法不能分析處理偽類選擇器CSS、對帶屬性選擇器分析產(chǎn)生錯誤結(jié)果、未考慮Inline CSS等缺陷。對比實驗表明表明，改進后的方法能平均降低原方法的分析誤報率20%。但是，該改進還是存在某些不足，對于某些帶偽元素選擇器的CSS以及CSS3中一些新的選擇器類型，我們不能進行分析處理，這會造成誤報的產(chǎn)生。

[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)；國家自然科學(xué)基金資助項目(61173167)

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

TP311

A

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

許可(1986-),男,湖南寧鄉(xiāng)人，碩士生，研究方向為軟件測試和軟件工程。E-mail:xuke513@gmail.com

通信地址： 410082 湖南省長沙市湖南大學(xué)信息科學(xué)與工程學(xué)院

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