一種自動(dòng)分析CSS的改進(jìn)方法研究

許 可,張大方,趙 丹

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

一種自動(dòng)分析CSS的改進(jìn)方法研究

許 可,張大方,趙 丹

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

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

層疊樣式表;文檔對(duì)象模型;誤報(bào)率

1 引言

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

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

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

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

2 背景知識(shí)

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

(1)元素選擇器：直接使用DOM元素，如p:first-child{font-style:italic;}及span[title="home"] {font-style:italic;}分別使用p元素與span元素。并且前者p元素后接:first-child這是一種帶偽類(lèi)的選擇器，后者span元素后接[title= "home"] 是一種帶有屬性的選擇器。

(2)ID選擇器：以#開(kāi)頭，用來(lái)匹配DOM中帶有對(duì)應(yīng)ID值的元素，如#test{font-weight:normal;}。

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

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

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

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

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

這三種引入方式的CSS覆蓋優(yōu)先級(jí)由高到低，Inline CSS具有最高的優(yōu)先級(jí)。而處于同一級(jí)別下的CSS則按照其選擇器定位DOM元素的詳細(xì)程度以及代碼前后位置來(lái)確定其優(yōu)先級(jí)權(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方法通過(guò)分析Web應(yīng)用中Embedded以及External style sheets中的CSS，標(biāo)記出其中的無(wú)用CSS，其基本思想如圖3所示。CILLA首先從應(yīng)用中所有的CSS(但沒(méi)包括帶偽類(lèi)選擇器的CSS以及Inline CSS)中找出那些不能在當(dāng)前DOM中找到匹配元素的CSS，即圖3中的US；然后在剩下的CSS中找出那些因被高優(yōu)先級(jí)CSS覆蓋而失效的CSS，即圖3中的IS；最后，US以及IS表示的就是該Web應(yīng)用中無(wú)用的CSS代碼。CILLA使用工具CSSParser提取解析CSS，使用工具Crawljax[9]來(lái)自動(dòng)動(dòng)態(tài)獲取Web應(yīng)用當(dāng)前的DOM樹(shù)。

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是無(wú)效的，因?yàn)樗粚?duì)應(yīng)元素中的Inline CSS style= "font-weight:bold"覆蓋，如圖2中，Some Text2的字體顯示為粗體；規(guī)則4也是無(wú)效CSS，它被動(dòng)態(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)用中的無(wú)用的CSS代碼段。但是，使用CILLA方法進(jìn)行分析時(shí)，其結(jié)果如表1所示。可見(jiàn)，CILLA對(duì)上述CSS規(guī)則分析存在缺陷。它不能處理帶偽類(lèi)選擇器的CSS，如規(guī)則1，它對(duì)其直接忽略處理，我們不能知道該規(guī)則是否匹配，是否有效；并且對(duì)于帶屬性的選擇器規(guī)則2，它錯(cuò)誤地認(rèn)為該規(guī)則為無(wú)效，而實(shí)際上該規(guī)則是有效的；此外，由于沒(méi)有考慮到Inline CSS和動(dòng)態(tài)生成的CSS，CILLA對(duì)于被高優(yōu)先級(jí)Inline CSS覆蓋而失效無(wú)用的規(guī)則3和規(guī)則4，其分析結(jié)果卻錯(cuò)誤地認(rèn)為這兩條規(guī)則為有效CSS。由于存在這些方面的不足，造成了其誤報(bào)率較高。所以，本文的目標(biāo)就是彌補(bǔ)這些缺陷，提高CILLA的分析準(zhǔn)確率。

Table 1 Sample analysis produced by CILLA

3 改進(jìn)方法的算法實(shí)現(xiàn)

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

3.1 PA-Match算法

我們?cè)谠惴ǖ墓ぷ髁鞒讨性黾右粋€(gè)判斷：如果傳入的CSS帶有偽類(lèi)選擇器或?qū)傩赃x擇器，則利用本文實(shí)現(xiàn)的PA-Match算法來(lái)處理，使用queryElementBySelector模塊直接在DOM樹(shù)中查找對(duì)應(yīng)元素來(lái)進(jìn)行匹配驗(yàn)證，如圖4b所示。算法具體實(shí)現(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驗(yàn)證及加入PA-Match的驗(yàn)證

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

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

3.2 I-Search算法

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

使用包含上述兩部分算法的改進(jìn)方法，對(duì)于圖1～圖2所展示的樣例進(jìn)行分析，得到表2所示的結(jié)果。

Table 2 Sample analysis produced by improved CILLA

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

4 實(shí)驗(yàn)結(jié)果與分析

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

Table 3 Test samples

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

Table 4 Test samples analysis produced by CILLA

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

Table 5 Test samples analysis produced by improved CILLA

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

5 結(jié)束語(yǔ)

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

國(guó)家973計(jì)劃資助項(xiàng)目(2012CB315801)；國(guó)家自然科學(xué)基金資助項(xiàng)目(61173167)

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

TP311

A

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

許可(1986-),男,湖南寧鄉(xiāng)人，碩士生，研究方向?yàn)檐浖y(cè)試和軟件工程。E-mail:xuke513@gmail.com

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

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