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

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

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

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

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

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

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