摘  要： 設(shè)計和實現(xiàn)了從互聯(lián)網(wǎng)頁面到手機頁面的適配轉(zhuǎn)換機制，提出了基于樹結(jié)構(gòu)分析的Web頁面適配方法，該適配方法首先對互聯(lián)網(wǎng)頁面建立對應的文檔模型樹結(jié)構(gòu)，依據(jù)用戶硬件數(shù)據(jù)信息，對這棵樹進行網(wǎng)頁去噪聲、對Frameset/Iframe適配、分頁重排、智能緩存以及多國語言字符集支持的操作，最終得到XHTML MP頁面，完成了Web頁面到手機頁面的轉(zhuǎn)換。通過實驗，驗證了整個頁面適配過程和方法的可行性。
關(guān)鍵詞： 互聯(lián)網(wǎng)頁面適配網(wǎng)關(guān)；樹結(jié)構(gòu)；頁面適配；文檔對象模型

　隨著信息化時代的到來，手機越來越智能化，但手機用戶訪問WWW站點的需求仍得不到很好的解決。目前主流的應對措施是研發(fā)手機瀏覽器，但通過這種方式，只能使較高端的手機得到較好的用戶體驗，不能解決大量中低端的手機硬件限制的問題，中低端用戶群依然得不到很好的業(yè)務使用保障，也無法有效地訪問WWW站點[1]。
　網(wǎng)頁適配網(wǎng)關(guān)是隨著移動互聯(lián)網(wǎng)的發(fā)展需要新產(chǎn)生的一種設(shè)計架構(gòu)，近幾年內(nèi)不斷有國內(nèi)外的專家學者提出了類似網(wǎng)頁適配網(wǎng)關(guān)這種設(shè)計概念。2005年LAAKKO T和HILTUNEN T提出內(nèi)容適配網(wǎng)關(guān)解決針對Web頁面手機終端開發(fā)的問題，使得手機用戶有效地使用互聯(lián)網(wǎng)信息[2]。2010年甘玉玨等人也做了相關(guān)的研究[3]。
　本文在WAP 2.0的基礎(chǔ)上，設(shè)計和實現(xiàn)了從互聯(lián)網(wǎng)頁面到手機頁面的適配轉(zhuǎn)換機制，提出了基于樹結(jié)構(gòu)分析的Web頁面適配方法，并對系統(tǒng)進行了算法的設(shè)計和C++實現(xiàn)。算法實現(xiàn)了HTML標簽語言到XHTML MP標簽語言的轉(zhuǎn)換，依據(jù)用戶硬件數(shù)據(jù)信息，對互聯(lián)網(wǎng)上的內(nèi)容進行了適配，突破了手機屏幕尺寸，內(nèi)存等硬件限制，滿足了各種類型的手機終端訪問WWW站點的需求。
1 算法描述
　本文設(shè)計和實現(xiàn)了一個基于樹結(jié)構(gòu)的的網(wǎng)頁面適配方法，實現(xiàn)了以下7個主要功能：
　（1）DOM樹結(jié)構(gòu)解析HTML；
?。?）去掉網(wǎng)頁內(nèi)復雜的節(jié)點，實現(xiàn)網(wǎng)頁去噪聲；
?。?）按照一定規(guī)則處理頁面上的框架，輸出經(jīng)過處理的HTML或序列化后的DOM樹；
?。?）對不符合手機終端屏幕大小的大頁面進行網(wǎng)頁切片；
　（5）頁面重排；
?。?）分頁緩存的設(shè)計與實現(xiàn)；
?。?）多國語言字符集支持。
　該方法包括接收和處理用戶HTTP請求，將網(wǎng)頁內(nèi)容的標簽語言HTML轉(zhuǎn)換為符合手機標準的標簽語言XHTML MP，同時要將大頁面的內(nèi)容根據(jù)手機屏幕大小進行分頁，并且將分頁的數(shù)據(jù)結(jié)果存入到模塊的分片緩存中。本文的Web頁面處理方法是頁面適配網(wǎng)關(guān)的核心環(huán)節(jié)和數(shù)據(jù)處理速度的瓶頸，基于DOM Tree的HTML解析過程和分片緩存的設(shè)計大大提高了網(wǎng)關(guān)的效率。
1.1 DOM樹結(jié)構(gòu)化Web頁面
　Web網(wǎng)頁大多由HTML標簽語言構(gòu)成，HTML是非結(jié)構(gòu)化的，很難直接應用于下一步的研究和開發(fā)中。因此本文在Web網(wǎng)頁適配方法中首先將HTML頁面解析為DOM Tree的邏輯結(jié)構(gòu)，提交給下一步的操作[4]。
本文算法采用的是基于標簽結(jié)構(gòu)的網(wǎng)頁內(nèi)容分析方法，所有對于Web頁面內(nèi)容的分析都是通過HTML標簽來加以識別和分析的，例如通過frameset、frame和iframe來識別網(wǎng)頁中的框架元素，并加以提取和分析處理。但由于HTML文檔是無結(jié)構(gòu)的，因此需要基于DOM樹結(jié)構(gòu)分析對HTML文檔標簽進一步的處理[5]。
HTML原本是專為方便網(wǎng)頁瀏覽器訪問電子文檔而設(shè)計的，但隨著HTML的發(fā)展而進行改進設(shè)計的瀏覽器可以容許錯誤的編碼、忽略錯誤的語法和允許“邋遢”的HTML代碼。網(wǎng)頁瀏覽器包含了許多可以忽略錯誤的程序指令，例如丟失結(jié)束標記的錯誤。即使HTML文檔在語法上錯誤百出，PC瀏覽器一樣能讀它。由此造成了Web上的HTML文檔內(nèi)容大部分格式不友好，手機瀏覽器不能支持，顯示這些文檔的數(shù)據(jù)變得比較困難。為了解決這個問題，本文采用了支持DOM的開放源代碼的Tidy庫。
　DOM可以將整個HTML頁面文檔規(guī)劃成由多個相互連接的節(jié)點集合構(gòu)成的文檔，文檔中的每個部分都可以被看作是一個節(jié)點的衍生物。這樣一個節(jié)點的集合在邏輯形式上被看作為一棵DOM樹。DOM樹中的文本內(nèi)容和層次結(jié)構(gòu)可以有效地指導數(shù)據(jù)區(qū)域定位和實體區(qū)域定位，這令HTML結(jié)構(gòu)解析的難度大大減低。HTML文檔中的所有節(jié)點組成了一棵文檔節(jié)點樹，樹中的節(jié)點代表了HTML文檔中的元素、屬性和文本等。HTML DOM節(jié)點之間存在等級關(guān)系。樹的根節(jié)點為HTML文檔節(jié)點，并由此派生出它的子樹，直到這棵樹的所有最低級別的文本節(jié)點為止。
　（1）對Tidy進行封裝
　在系統(tǒng)的實際開發(fā)中，本文對Tidy進行了客戶化的操作，使其可以將HTML頁面轉(zhuǎn)換為符合W3C標準的XHTML-MP。Tidy最初設(shè)計的目的是用來自動修正HTML中的錯誤和松散的標簽，檢查HTML代碼，并指出其中沒有完全符合W3C發(fā)布標準的地方，它可以用來分析一個HTML文件或者一個包含HTML語句的字符串，還可以自動進行必需的修改以使代碼符合相關(guān)標準的要求。
　由于Tidy支持HTML與XHTML的互相轉(zhuǎn)換以及HTML轉(zhuǎn)換為XML，因此本文在Tidy基礎(chǔ)上，對它進行了一系列的封裝和客戶化，進行了應用級別的開發(fā)。這些新的函數(shù)包括checkXhtmlMP（），parseDomTree（），paginate（），F(xiàn)rameSetProcessor（），restruct（）等，它們是在Tidy基礎(chǔ)上，進行二次開發(fā)的。
?。?）建立HTML DOM Tree
　HTML文檔結(jié)構(gòu)化為一棵DOM Tree的過程實際上就是新建一個DOM Tree對象并且初始化的過程。本文的實現(xiàn)方法是新建一個DOM Tree列表：TidyDoc*docs=new TidyDoc[out_num]。
1.2 網(wǎng)頁去噪聲的設(shè)計與實現(xiàn)
　網(wǎng)頁中的與主題內(nèi)容無關(guān)的元素，如版權(quán)、廣告、導航欄等，稱為網(wǎng)頁噪聲。據(jù)統(tǒng)計，每張網(wǎng)頁中有多達40%～50%的內(nèi)容是模板噪音。噪音會對網(wǎng)頁信息處理造成很大干擾。
1.2.1 去噪聲策略
　HTML原本是一種簡單的標簽語言，但Web網(wǎng)頁發(fā)展迅速，Javascript使得動態(tài)網(wǎng)頁的可交互性變得更為強大，CSS、Image、Flash以及各種插件使得Web家族變得日益龐大，也給手機用戶瀏覽Web頁面帶來了困難[6]。因此本論文在HTML DOM Tree建立的基礎(chǔ)上，保留了Frame相關(guān)的元素，裁剪了其他的所有標簽，并交付給網(wǎng)關(guān)框架中的其他模塊做適配和處理。
　另外，網(wǎng)頁中有些次要元素包括廣告信息、不可見的外部鏈接、用于網(wǎng)頁修飾的圖片元素對手機用戶獲取信息并不是必要條件的內(nèi)容或者不可見的內(nèi)容，需要網(wǎng)頁適配網(wǎng)關(guān)采取必要的裁剪，將更簡單清晰的Web頁面內(nèi)容返回到手機用戶的終端屏幕上。
1.2.2 本文網(wǎng)頁去噪聲的具體實現(xiàn)
?。?）從文檔根節(jié)點開始，深度遍歷已經(jīng)建立的HTML DOM Tree；按照表1所示的標簽刪減子節(jié)點，將script塊的內(nèi)容交付給JavaScript模塊進行處理。
    （2）將去噪聲后的HTML文本內(nèi)容保存為一棵新的DOM Tree。
1.3 Frameset/Iframe適配算法
1.3.1 ICAP模式
　本文是基于ICAP協(xié)議的應用網(wǎng)關(guān)開發(fā)。ICAP協(xié)議在結(jié)構(gòu)和用法上是和HTTP協(xié)議有一樣具有請求和應答模式，它包括兩種模式：REQMOD和RESPMOD。
到origin server取回Frame頁面時，需要在ICAP REQMOD下進行，因此本文研究的Frame處理方法是基于REQMOD模式的。
1.3.2 Web頁面中Frameset的處理
　HTML頁面中的Frameset代表一個框架集，用于組織多個框架和嵌套框架集。Frame在Frameset元素內(nèi)表示單個框架。通過使用框架集，在同一個瀏覽器窗口中可以顯示不止一個頁面，每個頁面被稱為一個框架，每個框架獨立于其他框架顯示。
目前大多手機終端不能處理網(wǎng)頁中的Frameset，因此對網(wǎng)頁中的Frame進行重新適配，變得非常必要。
?。?）對Frameset的處理原則
　多數(shù)手機終端不能處理Frameset，所有Frame頁面的內(nèi)容應該被整合到同一個頁面中，才能使頁面內(nèi)容被有效使用。基于這個原則，本文將Frameset轉(zhuǎn)換成標準頁，HTML文檔中與Frame相關(guān)的標簽將被刪除，如表1所示，F(xiàn)rameset標簽被替換為body，而Frame則被替換為div，適配后將得到新的XHTML MP文檔。
當http request的header經(jīng)過squid代理服務器傳遞給Icap server，再傳達給Web頁面適配網(wǎng)關(guān)，網(wǎng)關(guān)提取Http header中的User-Agent信息，并去用戶數(shù)據(jù)信息緩存中取手機終端信息，根據(jù)Frame處理過程，相對的URL地址會被改寫成絕對URL，并按照這個絕對的URL地址到original server取回每個Frame的內(nèi)容，對標簽Frame用div進行替換；并對網(wǎng)頁重排后，將三個Frame的內(nèi)容重新排列到同一個頁面里，得到如下適配結(jié)果，經(jīng)過checkMP函數(shù)，得到審核后的適配布局。

?。?）Web頁面中Iframe的處理
　Iframe是HTML頁面中的內(nèi)聯(lián)框架。HTML文檔在瀏覽器端的顯示結(jié)果是一張頁面內(nèi)嵌的圖片。通過例子中的HTML文檔，可以觀察到Iframe最主要的特點是內(nèi)置于HTML標簽body內(nèi)，所以Iframe也被稱為內(nèi)嵌框架。
　表2顯示的是在HTML DOM Tree中（即HTML文檔中），iframe節(jié)點要被替換為div節(jié)點，符合XHTML MP移動概要，才能在手機終端上顯示Iframe的內(nèi)容。

1.4 頁面重排設(shè)計與實現(xiàn)
　本文研究的網(wǎng)頁重排方法是一種基于通用規(guī)則的網(wǎng)頁重布局方法，需要將HTML語言到W3C定義的手機標準格式語言XHTML MP。網(wǎng)頁重排后輸出的DOM Tree將由HTML DOM Tree轉(zhuǎn)換為XHTML DOM Tree。
網(wǎng)頁重排是指讓Web頁面上的內(nèi)容在手機上的顯示效果主次分明，適合在手機上閱讀，方便用戶迅速定位到自己感興趣的內(nèi)容。
　現(xiàn)在的網(wǎng)頁排版優(yōu)化方法主要有基于通用規(guī)則的網(wǎng)頁內(nèi)容局部變換，以及基于網(wǎng)頁封裝器的頁面定制這兩種手段。基于通用規(guī)則進行網(wǎng)頁內(nèi)容局部變換是網(wǎng)頁重排的一種方法，其基本原理是根據(jù)頁面內(nèi)容本身的結(jié)構(gòu)特點，研究出可以讓網(wǎng)頁在手機上顯示效果更好的局部變換規(guī)則，這些規(guī)則具有明確的觸發(fā)條件，當條件成立時，在輸出數(shù)據(jù)中添加特定結(jié)構(gòu)或內(nèi)容，或者選擇忽略或輸出原頁面特定的結(jié)構(gòu)和內(nèi)容。對頁面內(nèi)容的局部變換通常會使用一些比較保守的策略。其優(yōu)點是可以應用于各種頁面，并能在一定程度上降低頁面數(shù)據(jù)流量和頁面排版的復雜度，缺點是精確性比較低。
　本文Web頁面到XHTML MP頁面的網(wǎng)頁重排過程如圖1所示。

　網(wǎng)頁重排時先從用戶信息緩存中取回重排需要的一個參數(shù)maxResponseSize（最大響應大小）。這個參數(shù)決定一頁內(nèi)容的大小，在網(wǎng)頁分片中使用過。另外還需要得到手機的品牌型號。
1.5 分頁的設(shè)計方案
　為解決Web頁面適配后整個頁面內(nèi)容冗長的問題，本文提出要對適配后的網(wǎng)頁進行分頁。網(wǎng)頁分頁就是在HTML文檔樹中確定分頁的節(jié)點，將Web頁面進行切分的過程。
　為了提高系統(tǒng)的效率，本文在系統(tǒng)的實際開發(fā)中設(shè)置了分片緩存這個子模塊。分頁緩存指的是在頁面適配網(wǎng)關(guān)中設(shè)置一個只能緩存模塊存儲用戶訪問過的Web網(wǎng)頁，這些網(wǎng)頁是以往同一型號手機用戶通過頁面適配網(wǎng)關(guān)訪問過的頁面，已經(jīng)經(jīng)過適配但并沒被更新。因此手機用戶不必在每次訪問WWW站點時都要重新進行頁面適配，而只在該型號手機第一次訪問時再進行頁面適配。
　當緩存中有相應的內(nèi)容，分片緩存直接將緩存的相應頁面發(fā)給用戶，可以避免重復訪問Web網(wǎng)站上的靜態(tài)內(nèi)容，重復再做網(wǎng)頁適配，從而減少中間件到網(wǎng)站獲取網(wǎng)頁的連接時延和傳輸耗時。設(shè)立分片緩存同時可以使用戶直接跳到目標頁，提高了訪問速度。
2 算法驗證
2.1不含F(xiàn)rame的頁面適配實驗
　在本模擬實驗中采用大小為50 KB的W3C測試頁面。這個測試頁面非常典型，是不含有Frame的普通網(wǎng)頁，這使實驗的測試點足夠小，去掉了Frame的干擾情況。在這個模擬實驗中，只需要驗證這個網(wǎng)頁是否經(jīng)過了本文所實現(xiàn)的適配流程：建立DOM Tree->去噪聲->網(wǎng)頁重排->網(wǎng)頁切片。W3C測試頁面經(jīng)適配前的顯示效果如圖2所示。

　HTTP Request的header經(jīng)過squid代理服務器傳遞給Icap server后，再傳達給Web頁面適配網(wǎng)關(guān)，網(wǎng)關(guān)提取Http header中的User-Agent信息，并去用戶數(shù)據(jù)信息緩存中取手機終端信息。根據(jù)用戶信息，Web頁面適配網(wǎng)關(guān)進行了網(wǎng)頁解析、去噪聲、網(wǎng)頁分頁、網(wǎng)頁重排，W3C頁面經(jīng)頁面適配網(wǎng)關(guān)的適配結(jié)果如圖3所示。從結(jié)果中，可以看到經(jīng)過網(wǎng)頁分頁處理，頁面被切成了兩頁。經(jīng)過網(wǎng)頁重排，網(wǎng)頁的布局有所改變，符合本模擬實驗中測試手機的屏幕大小。網(wǎng)頁中的噪聲點被取出，得到的結(jié)果更簡潔，適合手機顯示。這個實驗很好地驗證了Web適配系統(tǒng)的功能。

　用戶信息數(shù)據(jù)庫用在終端適配中，這個數(shù)據(jù)庫存儲了目前世界上主流手機的品牌型號以及操作系統(tǒng)。頁面適配網(wǎng)關(guān)在收到HTTP請求時，將查看HTTP頭部的字段，得到手機品牌型號后，在用戶信息數(shù)據(jù)庫中查找出該手機品牌型號的操作系統(tǒng)以及屏幕尺寸大小、分辨率、手機內(nèi)存等性能參數(shù)。這些信息同時將存入用戶信息緩存中，向頁面適配網(wǎng)關(guān)的其他處理模塊傳遞相應的數(shù)據(jù)參數(shù)。
2.2 Frame頁面適配實驗
　為驗證本文工作的Frame頁面適配子模塊，本文模擬了Web頁面中含有Frameset的情況。
2.3 分頁和重排黑盒實驗
　分頁和重排黑盒實驗測試了Web網(wǎng)關(guān)將大頁面進行分頁和重排的過程。
　實驗結(jié)果顯示，其中分頁的結(jié)果不完全與測試頁面完全對應，原因主要有兩點：（1）在整個互聯(lián)網(wǎng)頁面適配網(wǎng)關(guān)中，廣告投放模塊會將格外地在適配后的結(jié)果中投放廣告等內(nèi)容。（2）當測試頁面經(jīng)過適配方法的去噪聲模塊后，不能被網(wǎng)關(guān)適配且手機終端不能支持的模塊內(nèi)容從頁面中被刪除了。
　本文提出的基于樹結(jié)構(gòu)的互聯(lián)網(wǎng)頁面適配方法解決了互聯(lián)網(wǎng)頁面適配網(wǎng)關(guān)中的HTML適配，并分別通過黑盒實驗驗證了互聯(lián)網(wǎng)頁面適配方法的可行性，白盒實驗驗證適配算法C++程序代碼路徑的正確性。該項目成果已經(jīng)在某一品牌手機中得到了具體驗證。
參考文獻
[1] 小雨.愛立信Web網(wǎng)關(guān)提升移動互聯(lián)網(wǎng)應用體驗[J].世
 界電信（企業(yè)報道版），2009（4）：76.
[2] LAAKKO T， HILTUNEN T. Adapting Web content to mobile useragents[J]. IEEE Internet Computing，2005，9（2）：46-53.
[3] 甘玉玨，楊杰，蘇軍根，等.移動互聯(lián)網(wǎng)Web網(wǎng)關(guān)的設(shè)計[J].移動通信，2010（22）：71-74.
[4] 李猛.基于DOM的Web信息抽出技術(shù)的研究與實現(xiàn)[D].大連：大連理工大學，2008.
[5] 寇月，李冬，申德榮，等.D2EEM：一種基于DOM樹的Deep Web 實體抽取機制[J].計算機研究與發(fā)展，2010，47（5）：858-865.
[6] 時達明，林鴻飛，楊志豪.基于網(wǎng)頁框架和規(guī)則的網(wǎng)頁噪音去除方法[J].計算機工程，2008，33（19）：276-278.