近年來，移動互聯(lián)網(wǎng)技術發(fā)展很快，用戶體驗至上仍是移動互聯(lián)網(wǎng)應用的基本準則。由于移動終端的多樣性，屏幕大小不一，且遠比電腦屏幕小，造成用戶定位信息難、Web頁面屏幕適應能力差、頁面布局不合理、頁面噪聲信息多等問題，極大地影響了用戶的體驗。

        解決移動終端Web頁面的自適應顯示問題有3種基本方法，即客戶端的自適應、中間件或代理技術、服務器端的自適應。例如，參考文獻[1]提到的小屏幕設備瀏覽器是較為典型的客戶端自適應技術。參考文獻[2]提出了一個自動代理端自適應系統(tǒng)，它使用機器學習和啟發(fā)式方法對標準網(wǎng)頁進行自適應調(diào)整。服務器端自適應指自適應引擎在服務器上，處理移動設備的自適應時，網(wǎng)頁開發(fā)人員可以進行更多的控制^[3]，能克服移動設備處理能力的不足，獲得更好的自適應效果。在國內(nèi)，參考文獻[4]詳細論述了移動終端Web頁面顯示中的重組技術；參考文獻[5]則提出移動終端Web頁面的分塊處理策略。參考文獻[6]從構建網(wǎng)站時網(wǎng)頁開發(fā)的角度討論網(wǎng)頁的自動生成或自適應顯示技術，對移動終端Web頁面的顯示處理有借鑒意義。但這些都沒有考慮移動Web用戶體驗至上的準則。為了對移動終端Web作自適應顯示處理并滿足用戶個性化需求，本文提出在服務器端構建Web頁面優(yōu)化處理系統(tǒng)。

1 系統(tǒng)概述

1.1 問題背景

        使用移動終端訪問Web的問題，除設備及網(wǎng)絡等影響響應和下載速度外，主要包括頁面外觀(如結(jié)構、布局和使用的項)以及鏈接導航等與電腦網(wǎng)頁不同，這其實是設計問題，一般由下列因素造成：

       (1)網(wǎng)站移動版本問題。對大多數(shù)網(wǎng)站來說，專門制作的移動版本有頁面結(jié)構不同、頁面上項不同。為查找內(nèi)容，加長滾動條和導航，通過多層級尋找內(nèi)容項和鏈接，造成用戶混亂，有時移動版與標準版的更新也不一致。

        (2)自適應或代碼轉(zhuǎn)換問題。經(jīng)常發(fā)現(xiàn)移動設備網(wǎng)頁是自適應或代碼轉(zhuǎn)換后的，或瀏覽器自動調(diào)整了，造成混亂的布局、內(nèi)容和過多的導航。偶爾地，網(wǎng)頁內(nèi)容也被設計者想當然地改變了。

1.2 系統(tǒng)需求

        移動互聯(lián)網(wǎng)問題雖多，但前景光明。在移動終端上瀏覽時,通常希望網(wǎng)頁的內(nèi)容和結(jié)構類似于桌面電腦。由此，分析得出以下需求：

        (1)確保相似的頁面結(jié)構分發(fā)給所有類型的移動終端設備。類似的頁面結(jié)構和用戶熟悉的導航路徑易于導航查找感興趣的內(nèi)容項。

        (2)確保在所有設備上網(wǎng)頁顯示項及其位置的一致性。共同項或主要項在同一位置可以避免用戶交換使用不同類型設備時產(chǎn)生混亂。

        (3)頁面顯示最少項和減少導航。僅顯示用戶要求的內(nèi)容，將減少頁面大小，從而減少滾屏和導航，便于更快地找到感興趣的內(nèi)容。

　　(4)支持用戶在多個不同類型設備上的訪問。用戶有不同的設備及要求，基于設備和需求選擇顯示的項，將提高Web瀏覽的體驗。

1.3 提出的系統(tǒng)方案

　　為滿足系統(tǒng)需求，本文提出一個服務器端的自適應系統(tǒng)，通過設置頁面上項的優(yōu)先級對Web頁面作自適應調(diào)整。它不改變整個頁面結(jié)構，但允許刪除一些項。在服務器端處理自適應，基于以下考慮：

　　(1)對移動終端的自適應是自動完成的，適合任何設備不指定瀏覽器。移動終端開始時不下載整個頁面，減少了數(shù)據(jù)傳輸；自適應不在本地處理，減少了顯示時間，節(jié)省CPU時間，并延長電池時間。

　　(2)不需要在設備上安裝專用瀏覽器，也不需要代理服務器，用戶不必配置設備到代理的連接。

　　(3)開發(fā)人員能夠控制自適應，因為網(wǎng)站頁面和優(yōu)化引擎系統(tǒng)部署在同一服務器上。

　　優(yōu)先級自適應方法允許用戶定制網(wǎng)頁項的優(yōu)先級，即確定最終顯示在設備上的網(wǎng)頁項。用戶為每個項設定優(yōu)先級后(1為最高優(yōu)先級，數(shù)大優(yōu)先級低)，低的優(yōu)先級項被刪去。什么設備，顯示什么，按什么順序顯示，用戶以此決定項優(yōu)先級，并可以修改其偏好(首選項)。對有些網(wǎng)站，開發(fā)人員設定默認優(yōu)先級，首次使用時提供給用戶，用戶可以自行再定制。

1.4 系統(tǒng)簡介

　　設置優(yōu)先級是為了維護整個布局即網(wǎng)頁項的父子(層次或嵌套)關系看起來與原始頁相同，保存頁面整個外觀。系統(tǒng)維護所有項及其層次關系，并允許用戶設定在不同設備上顯示項的數(shù)目和順序。

　　優(yōu)先級系統(tǒng)的目標是按照每個項的優(yōu)先級顯示頁面。用戶能夠給每個項設定一個優(yōu)先級值。低優(yōu)先級的項被移去，留下的項重新排序以形成最后的頁面。系統(tǒng)流程框圖如圖1所示。

　　(1)檢測設備和用戶。頁面項的優(yōu)先級處理取決于用戶的偏好以及用于訪問頁面的移動終端設備。優(yōu)先級引擎應能夠識別用戶、設備以及請求的頁面。

　　(2)加載首選項(偏好)。對于一個頁面的每個瀏覽器會話，依據(jù)請求該頁的設備類型，優(yōu)先級引擎將加載用戶的首選項。用戶分為兩類：非注冊用戶/匿名用戶和注冊用戶/已知的用戶。匿名用戶自動獲取默認首選項，注冊用戶依據(jù)他們的特定偏好獲得優(yōu)先權。

　　(3)優(yōu)先級處理和顯示項目。依據(jù)用戶的偏好，優(yōu)先級引擎將重排序頁面上的項。為此，優(yōu)先級引擎需要分配偏好值給可處理的項；移去那些沒有偏好值或偏好值大于剪切值的項；排序和顯示留下來的項。通過增加鏈接“更多…”，以訪問移去的頁面項。

2 系統(tǒng)實現(xiàn)

　　服務器端頁面優(yōu)化自適應技術依據(jù)用戶首選項進行優(yōu)先級處理，并針對設備自適應調(diào)整。不同設備訪問具有唯一版本的網(wǎng)站時，網(wǎng)站的開發(fā)和維護也只需一個版本。

　　該實現(xiàn)將分發(fā)給移動設備的頁面內(nèi)容或項作最小化處理，暫不考慮如圖片或視頻媒體等其他自適應。優(yōu) 先級引擎主要實現(xiàn)以下功能： (1)依據(jù)優(yōu)先級對項進行重新排序；(2)依據(jù)優(yōu)先級來分發(fā)和顯示感興趣的內(nèi)容；(3)移去低優(yōu)先級項，插入“更多…”鏈接；(4)依據(jù)頁面請求的設備，為用戶提供默認首選項。優(yōu)先級引擎保存頁面的整體結(jié)構,處理后頁面項的父子關系不變。系統(tǒng)優(yōu)化后，再經(jīng)客戶瀏覽器的自適應處理，整體外觀也許會有微小的改變。

2.1 識別頁面元素

　　2005年以后，網(wǎng)頁布局由表格(table標簽)轉(zhuǎn)變?yōu)橛蓪?div標簽)承擔，因此系統(tǒng)處理以div元素為結(jié)構布局的(X)HTML頁面。頁面包含的程序腳本如JavaScript等暫時先不予考慮。一個基本的HTML頁面以div標簽為結(jié)構，組成頁面上的項，并可以嵌套，使用CSS樣式控制布局的表現(xiàn)，以此實現(xiàn)、測試和討論優(yōu)先級引擎。

2.2 優(yōu)先級系統(tǒng)引擎

　　引擎基于ASP.NET開發(fā)，采用混合腳本語言編程，操作XSLT更新、重排和顯示頁面。圖2所示為優(yōu)先級引擎框圖。

2.3 存儲和管理數(shù)據(jù)

　　 用戶的偏好需要永久存儲，并允許優(yōu)先級引擎以可靠的機制快速查詢和訪問。另外，需要存儲用戶ID和設備ID,瀏覽會話時會用到。用戶偏好可能存儲在cookies、會話變量或者數(shù)據(jù)庫中。選擇使用關系數(shù)據(jù)庫，存儲和管理用戶的偏好(首選項)，這個方法保證了偏好可以永久存儲，并提供了可靠和靈活的存儲機制。對大量的用戶而言，管理數(shù)據(jù)和增加記錄等，數(shù)據(jù)庫提供了高性能和可伸縮性。數(shù)據(jù)庫修改數(shù)據(jù)很靈活，管理對用戶偏好的修改很容易。而且，存儲用戶的偏好(首選項)在數(shù)據(jù)庫中，當用戶使用任何類型的設備訪問頁面時，都能夠獲取他們的偏好，不需要為新的設備類型對偏好進行重新設置。圖3所示為系統(tǒng)使用的6個基表。

2.4 設計XSLT樣式表

　　為重組頁面，需要排序和轉(zhuǎn)換操作，使用XSLT轉(zhuǎn)換規(guī)則，生成最終優(yōu)先級處理后的頁面版本。應用XML的XSLT樣式表技術，修改XML文檔的結(jié)構和對文檔作格式轉(zhuǎn)換。系統(tǒng)使用的樣式表代碼如下。

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

　<xsl:output method="html" indent="yes"/>

     <xsl:template match="node()|@*" >

       <xsl:copy>

           <xsl:apply-templates select="node()|@*"/>

       </xsl:copy>

　　 </xsl:template>

　　 <xsl:template match="body">

       <xsl:copy>

　　　　　<xsl:copy-of select="@*"/>

　　　　　<xsl:apply-templates>

　　　　　<xsl:sort select="@rank" data-type="number"/>

　　　　　</xsl:apply-templates>

　　　　</xsl:copy> 

      </xsl:template>

　　<xsl:template match="div">

　　　　<xsl:copy>

           <xsl:copy-of select="@*"/>

           <xsl:apply-templates>

           <xsl:sort select="@rank" data-type="number"/>

           </xsl:apply-templates>

         </xsl:copy>

　　</xsl:template>

   <xsl:template match="comment()"/>

　<!-- <xsl:templage match="img"> -->

　　　　<!-- rmv tag, plc by alt attr -->

　　　　<!-- <xsl:element name="b">[<xsl:value-of 

select="@alt"/>] -->

　　　　<!-- </xsl:element> -->

   <!-- </xsl:template> -->

</xsl:stylesheet>

2.5 優(yōu)先級引擎的具體實現(xiàn)

　　(1)用戶登錄。有兩類用戶：訪客和注冊用戶。注冊用戶有個性化首選項存儲在數(shù)據(jù)庫中；而訪客用戶使用默認首選項。它要求用戶輸入用戶名和密碼，驗證有效，則從數(shù)據(jù)庫中查找userId。userId存儲在會話變量中，在整個用戶的瀏覽會話過程中使用。

　　(2)識別用戶、設備和頁面處理。識別用戶后，userId被傳遞給會話變量。引擎檢查會話變量是否存在該userId。如果沒有，系統(tǒng)分配用戶為缺省userId，值設為1。識別設備類型時，系統(tǒng)檢查來自設備的用戶代理字符串。系統(tǒng)從傳入的URL變量，確定被優(yōu)先級處理的頁面。如果有URL變量，系統(tǒng)使用該變量的值作為頁面名稱；否則，系統(tǒng)分配&rdquo;home&rdquo;作為頁面名稱。系統(tǒng)在會話變量中存儲userId和deviceType，以在整個瀏覽會話中使用。

　　(3)從數(shù)據(jù)庫中查詢用戶的偏好。系統(tǒng)識別用戶、設備和頁面后，從數(shù)據(jù)庫中查詢優(yōu)先的頁面項、用戶的偏好和剪切值。使用頁面名稱，在數(shù)據(jù)庫中查詢頁面優(yōu)先級項的elementIDs，并將它們存儲在數(shù)組pageItem中。然后，使用userId、deviceType和pageName查詢用戶對該頁的偏好(即elementIDs和ranks)，并將它們存儲在另一個數(shù)組userPreference中。

　　(4)更新頁面項的偏好。當對Web頁項處理時，系統(tǒng)首先要識別出頁面中的div塊。選擇使用XML的DOM解析器處理數(shù)據(jù)。

　　①裝載基本頁。系統(tǒng)裝載頁面，生成一個HTML的DOM節(jié)點樹。一個Web頁上所有可視內(nèi)容和可優(yōu)先級設置的項都是<body>元素的子節(jié)點。<html>根元素和<head>元素為不可優(yōu)先級設置的項，直接復制在最終頁面上。所以，僅處理從<body>元素開始的節(jié)點樹。

　　②分配偏好值。基本頁裝載后，系統(tǒng)分配偏好值給可優(yōu)先級設置的div。為此，系統(tǒng)遍歷節(jié)點樹，檢查每個div元素。首先，檢查每個div是否為可優(yōu)先級設置的項。對每個可處理的div，檢查它是否為數(shù)組pageItem中可設置的項，是否有數(shù)組userPreferences中的偏好。如果div的id屬性在pageItem數(shù)組中,則為該div創(chuàng)建一個新的屬性rank,然后讀取userPreferences數(shù)組，給rank屬性賦值；否則，如果div的id屬性不在userPreferences數(shù)組中，則給rank屬性一個缺省偏好值，缺省低優(yōu)先級偏好值應等于或大于頁面上所有項的總數(shù)和。

　　③刪除低優(yōu)先級項，增加&ldquo;更多&hellip;&rdquo;鏈接。可優(yōu)先級設置的項被分配偏好值以后，接下來刪除低優(yōu)先級項。系統(tǒng)遍歷分配了偏好值的節(jié)點樹，刪除rank屬性大于剪切值的所有節(jié)點。然后，創(chuàng)建一個新的div元素，放置超鏈接&ldquo;更多&hellip;&rdquo;。

　　(5)排序和顯示優(yōu)先級處理后的頁面。刪除低優(yōu)先級項后，系統(tǒng)重構頁面，按照它們的優(yōu)先級重新排序頁面上的項，并轉(zhuǎn)換成為最終的頁面。使用XSLT處理器重新排序和轉(zhuǎn)換頁面。低優(yōu)先級項刪除后的新的節(jié)點樹通過應用XSLT樣式表的規(guī)則，基于rank屬性以升序排序。按層次深度對每層div進行排序，嵌套的div 也在雙親節(jié)點中排序，有最高優(yōu)先級(值為1)的首先被顯示。

3 系統(tǒng)性能測試

　　系統(tǒng)性能測試時，分別對用戶數(shù)、頁面項數(shù)、用戶偏好數(shù)等主要參數(shù)作不同的設置。系統(tǒng)運行得到最終頁面的時間幾乎都在20 ms以內(nèi)，表明系統(tǒng)性能優(yōu)良。

　　(1)用戶數(shù)對性能的影響。采用不同的數(shù)據(jù)行數(shù)測試,最大的1 000K行大約是20萬用戶，每個用戶有5個偏好的數(shù)據(jù)庫的狀態(tài)。系統(tǒng)測試以一個頁面、有50個div項、偏好剪切值設為5的情形，運行系統(tǒng)15次的測試結(jié)果如表1所示。

　　(2)頁面項數(shù)對性能的影響。數(shù)據(jù)庫中數(shù)據(jù)行為1 000 K，每頁偏好數(shù)設為5，運行測試15次的結(jié)果如表2所示。

　　(3)用戶偏好數(shù)對性能的影響。數(shù)據(jù)庫中數(shù)據(jù)行為1 000 K，頁面有50項，剪切值隨偏好數(shù)而變化，運行測試15次的結(jié)果如表3所示。

　　以div標簽為布局的頁面是優(yōu)化引擎工作的基礎，從而實現(xiàn)基于用戶偏好和移動終端類型的頁面自適應。研究結(jié)果表明，在服務器端系統(tǒng)優(yōu)化處理的頁面內(nèi)容在不同類型的移動終端上能提供一致的和良好的用戶體驗。接下來的工作是設計和實現(xiàn)用戶接口，完成用戶對個性化偏好的定制。更大的挑戰(zhàn)是如何對頁面上其他內(nèi)容(如圖片等媒體信息)依據(jù)用戶偏好和移動終端的設備能力，實施基于優(yōu)先級的自適應調(diào)整，這也是未來的工作方向。

參考文獻

[1] AHMADI H, KONG J. User-centric adaptation of Web information for small screens[J]. Journal of Visual Languages and Computing, 2012,23(1), 13-28.

[2] KULKARNI C E, KLEMMER S R. Automatically adapting Web pages toheterogeneous devices[C].Vancouver,BC,Canada:Proc of the 2011 Annual Conference Extended Abstracts on Human Factors in Computing Systems,2011:115-129.

[3] LAAKKO T. Context-aware Web content adaptation for mobile user agents[C]. Evolution of the Web in Artificial Intelligence Environments,130 ed.,Vol. 130,Springer Berlin/Heidelberg, 2008: 69-99.

[4] 史晶,吳慶波,楊沙洲.面向移動終端的Web頁面重組技術綜述[J].計算機應用研究,2011,28(12):4405-4408.

[5] 談冉,熊雄.基于移動終端的高效顯示策略研究[J].計算機應用研究,2008,25(2):584-586.

[6] 高集榮,田艷,江曉妍.基于樹結(jié)構的Web頁面適配方法的研究[J].微型機與應用,2014,33(1):77-80.