基于HTML5、JavaScript和CSS3之間依賴關系的缺陷

鄭大勇，王艷輝（通信作者）

（通化師范學院 吉林 通化 134002）

1 HTML5、JavaScript和CSS3簡介

1.1 HTML5

HTML5是超文本標記語言（hyper text markup language，HTML）的第5次重大修改，2014年10月由萬維網聯盟（World Wide Web Consortium，W3C）完成標準制定。HTML5的設計目的是在移動設備上支持多媒體，它是網頁前端的標準書寫語言，是構建Web的重要工具。現如今，HTML5是Web中的核心語言，是網站開發技術人員必須要掌握的一項技術。隨著移動互聯網的發展越來越多，行業巨頭正不斷向HTML5靠攏。除蘋果、微軟、黑莓之外，谷歌的Youtube已部分使用HTML5；Chrome瀏覽器宣布全面支持HTML5；Facebook則不遺余力地為HTML5進行著病毒式傳播。

1.2 CSS3

CSS3是層疊樣式表（cascading style sheets，CSS）技術的升級版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案。在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局、字體、顏色、背景和其他效果實現更加精確的控制。只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁外觀和格式。CSS3語言開發是朝著模塊化方向發展的，把它分解為一些小的模塊，更多新的模塊也被加入進來。CSS3主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。

1.3 JavaScript

JavaScript是一種直譯式腳本語言，也是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言中，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML5網頁增加動態功能。1995年，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。

2 HTML5、JavaScript和CSS3之間的依賴聯系

2.1 HTML5到JavaScript

HTML5和JavaScript之間的依賴主要有兩大類：1）從HTML5到JavaScript文件的鏈接。鏈接的依賴源于HTML5文檔所在的代碼，HTML5文檔中包含對JavaScript文件的引用實現動態效果。2）HTML5文件中的事件監聽器。JavaScript作為序事件驅動的語言，對事件的監聽是必不可少的。事件監聽就是為了讓計算機隨時能夠發現用戶與網頁的交互動作，計算機發現事件發生了，從而執行程序員預先編寫的一些程序。

2.2 HTML5到CSS3

定義CSS3規則中最常用的CSS選擇器是類選擇器，類選擇器允許以一種獨立于文檔元素的方式來指定樣式。該選擇器可以單獨使用，也可以與其他元素結合使用。一個類選擇器標識為模型中的一個依賴項。

2.3 JavaScript到HTML5

JavaScript到HTML5之間可以通過文檔對象作為依賴項的，這樣的引用用于獲取HTML5元素的句柄執行事件綁定、DOM操作等。如果引用沒有存在，它會導致JavaScript出現錯誤。

2.4 JavaScript到CSS3

JavaScript到CSS3之間的依賴項是JavaScript和HTML5之間依賴關系的擴展。研究中看到JavaScript可以使用文檔訪問HTML5元素對象，一旦使用JavaScript代碼獲得了對任何元素的引用，就可以將一個CSS3類賦給HTML5元素。

2.5 CSS3到HTML5

用于定義CSS3規則的2個常見CSS選擇器，是類選擇器和id選擇器。類選擇器在HTML5中會被標識為對CSS3的依賴項，另一個依賴項是由id選擇器生成的。這種依賴性在CSS3規則中使用id選擇器訪問HTML5中的具體唯一元素。

2.6 CSS3到JavaScript

在本文范圍內，沒有確定CSS3和JavaScript任何相關的依賴關系。盡管存在一些依賴項，如從JavaScript使用文檔訪問HTML5元素對象，再將一個CSS3類賦給HTML5元素，但這已經在JavaScript對CSS3的依賴中覆蓋了。

3 解析HTML5、CSS3及JavaScript

3.1 HTML5解析

對于HTML5的解析，使用了Jsoup解析器。Jsoup是一款Java的HTML解析器，這是一個流行的Java庫。Jsoup解析器支持所有最新的HTML5標簽，能夠從URL、文件或字符串解析HTML5。Jsoup解析器將HTML5解析為文檔對象模型（document object model，DOM），用于在HTML5文檔中表示對象（節點），也為DOM訪問和遍歷提供了一個非常簡單的應用程序接口（application programming interface，API）。API中基于正則表達式的選擇器，使其非常靈活。Jsoup解析器可生成一個解析樹，但是DOM是通過API作為“Document”對象公開的。雖然Jsoup解析器提供了這么多漂亮的功能，但一個主要的缺點是它沒有跟蹤行號。因此，一個基于Java的Matcher引擎自定義模塊，用于跟蹤行號和列號十分重要。

根據用以分析的源目錄，將所有的HTML5文件根據文件擴展名提取，一旦所有的HTML5文件被識別，每個文件均可使用Jsoup解析器解析。對每個文件提取文件對象，最簡便的方法，如：getAllElementIds、getAllElementClasses、getScriptLinks和getEventHandlers，均實現了遞歸遍歷元素對象并提取所需的數據。從這些方法中，提取每個HTML5文件可以得到以下數據：1）使用所有“id”屬性；2）使用所有“類”屬性；3）鏈接到所有相關的CSS3樣式表；4）鏈接到所有相關的媒體資產（圖像、視頻、音頻等）；5）所有相關JavaScript文件的鏈接；6）所有通過事件處理程序引用的方法。

此外，解析器允許檢查存儲為Parse Error的語法錯誤，上述數據可用于每個文件、每個引用文件（CSS3文件、JavaScript文件或資產文件）被檢查是否存在和路徑有效性。如果沒有找到任何文件，則產生FileNotFound依賴錯誤。之后，每個關聯的CSS3文件和JavaScript文件被解析和分析其他依賴關系。

3.2 解析CSS3

基于此項目的目的，使用CSS3的現代Web應用程序。為了避免解析缺陷并提取準確的選擇器列表，研究使用了一種用于CSS3的SAC解析器。SAC解析器是一個解析CSS3文件的Java庫，支持CSS1、CSS2和CSS3。SAC解析器接受CSS3文件文本作為輸入，并生成DOM，這個解析器的優點是它允許附加一個錯誤處理程序來跟蹤解析每個規則生成的錯誤。與每個HTML5文件相關的所有CSS3文件，均可使用此解析器處理。一旦HTML5解析階段完成，所有有效的關聯CSS3文件被識別，每個文件被傳遞到CSS3解析器。對于每個CSS3文件，可以提取以下數據：1）引用id列表；2）定義類的列表。一旦獲得了這些數據，靜態分析器就會使用這些信息分析基于類和id引用的依賴項。

3.3 解析JavaScript

本文選擇了Nashorn引擎，以解析JavaScript。Nashorn引擎是由Oracle開發的JavaScript引擎，在之前與Java8及以上版本捆綁在一起，它的速度與Chrome的V8引擎相當。與每個HTML5文件相關的所有JavaScript文件，均使用這個解析器處理。一旦HTML5解析階段完成了所有有效的相關JS文件，那么每個文件均會傳遞給JS解析器。對于每個JS文件，可以提取以下數據：1）引用id列表；2）引用類的列表；3）定義的所有方法的方法簽名。對象的位置將存儲每個文件的所有上述信息。

3.4 整合解析器結果

一旦收集了所有相關文件中的數據，就會將其與依賴項進行比較當他們出現的時候。如，在JavaScript文件中識別id列表時，這些id會同時與HTML5文件中的現有id進行比較。如果一旦發現錯誤，它就會立即存儲在Results對象中，稍后再進行檢索顯示，CSS3文件處理的情況也類似。當找到依賴項，而不會導致運行時錯誤，作為警告存儲在Results對象中。根據詳細級別，用戶可以選擇查看詳細信息。

3.5 基于規則的分析

基于規則的分析，有助于幫助用戶過濾掉一次一個類別的結果和視圖。錯誤作為錯誤分類的一部分進行討論，其輸出結果是根據標志值進行篩選的，并且內部計算也是一樣的。這樣的原因是需要避免任何依賴和錯誤的計算分析被忽視。該標志支持的值有：1）ParseError，將過濾掉結果，只顯示遇到的解析錯誤，同時解析HTML5、CSS3或JavaScript。2）ReferenceError，將過濾掉結果以顯示引用錯誤，引用錯誤可以是各種類型，如不存在的類、不存在的id和不存在的函數。3）FileNotFound，將過濾掉結果，顯示未找到文件的錯誤。值得注意的是，此處也檢查遠程文。4）警告，將過濾結果，只顯示警告，以此來警告那些不會導致運行時錯誤的依賴項。

4 靜態分析工具的流程

4.1 一般靜態分析工具的流程

獨立的命令行工具和安裝在集成開發環境（integrated development environment，IDE）上的插件是大多數靜態分析工具有2種類型，但有著不同的用途。獨立的命令行工具可以集成到構建工具鏈或持續集成工具，而集成插件可以服務于IDE中交互式實用程序，幫助開發人員在編寫代碼時處理缺陷。此工具也采用了類似的方法。當瀏覽器接收到一個請求網頁時，它首先獲取HTML5文件，一旦文件被檢索，它就會啟動解析HTML5文檔，HTML5標簽被轉換成DOM節點在“內容樹”。然后，從各種樣式中解析樣式數據源碼，包括CSS3樣式表和內聯樣式標簽，以及內容樹樣式信息被合并生成“渲染樹”。經過一個“布局”過程，最終在瀏覽器上繪制，這個繪制的圖層便是用戶在瀏覽器上所看到的內容。靜態分析工具流程，如圖1所示。基于內部解析優化技術，HTML5在獲取相關腳本文件時，文檔解析可能會停止，也可能不會停止和解析。一般流程解釋了瀏覽器如何加載網頁。

圖1 靜態分析工具流程

4.2 優化后靜態分析工具的流程

靜態分析工具的主要目的是識別HTML5、CSS3和JavaScript之間的依賴關系，為了達到此目的，本文使用不同的解析器來解析這些語言并跟蹤依賴關系。網頁渲染流與網頁相關的JavaScript獲取和解析流程，如圖2所示。

圖2 網頁渲染流與網頁相關的JavaScript獲取和解析流程

Web應用中的HTML5文件是通往整個代碼庫的大門，靜態分析工具還通過構建一個HTML5列表，來分析指定目錄中的文件并從那里移動。此外，跟蹤與每個依賴項相關的元數據，以幫助開發人員查找并盡快修復缺陷。元數據包括源文件、行號、列號和依賴項類型。該工具的次要功能包括：提供詳細的輸出，輸出結果在JavaScript對象表示法（JSON）和純文本格式，顯示JSON結果的HTML查看器，基于規則的分析，修復建議和集成插件開發。

5 結論

對于開發人員來說，跟蹤代碼庫的語法及跨HTML5、JavaScript和CSS3堆棧的依賴項均是開發過程中的挑戰。開發人員手動檢查工具和運行情況時，大量的由于語法依賴而產生的缺陷容易被忽視，從而出現人為錯誤。此外，往返代碼編輯器和瀏覽器之間，增加了開發時間和成本，這些因素將會對整個開發團隊的聚合導致嚴重的后果并影響最終產品。通過創建模型和工具的解決方法，識別和快速解析HTML5、CSS3和JavaScript的依賴項，以提高Web開發人員的開發效率和生產力。從設計的角度來看，工具也可以進一步改進，使之成為實時的，而不是即時工具的當前實現。