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

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

1 系統(tǒng)概述

1.1 問題背景

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

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

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

1.2 系統(tǒng)需求

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

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

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

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

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

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

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

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

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

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

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

1.4 系統(tǒng)簡介

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

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

　　(1)檢測設(shè)備和用戶。頁面項(xiàng)的優(yōu)先級(jí)處理取決于用戶的偏好以及用于訪問頁面的移動(dòng)終端設(shè)備。優(yōu)先級(jí)引擎應(yīng)能夠識(shí)別用戶、設(shè)備以及請(qǐng)求的頁面。

　　(2)加載首選項(xiàng)(偏好)。對(duì)于一個(gè)頁面的每個(gè)瀏覽器會(huì)話，依據(jù)請(qǐng)求該頁的設(shè)備類型，優(yōu)先級(jí)引擎將加載用戶的首選項(xiàng)。用戶分為兩類：非注冊(cè)用戶/匿名用戶和注冊(cè)用戶/已知的用戶。匿名用戶自動(dòng)獲取默認(rèn)首選項(xiàng)，注冊(cè)用戶依據(jù)他們的特定偏好獲得優(yōu)先權(quán)。

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

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

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

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

2.1 識(shí)別頁面元素

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

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

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

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

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

2.4 設(shè)計(jì)XSLT樣式表

　　為重組頁面，需要排序和轉(zhuǎn)換操作，使用XSLT轉(zhuǎn)換規(guī)則，生成最終優(yōu)先級(jí)處理后的頁面版本。應(yīng)用XML的XSLT樣式表技術(shù)，修改XML文檔的結(jié)構(gòu)和對(duì)文檔作格式轉(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)先級(jí)引擎的具體實(shí)現(xiàn)

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

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

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

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

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

　?、诜峙淦弥怠；卷撗b載后，系統(tǒng)分配偏好值給可優(yōu)先級(jí)設(shè)置的div。為此，系統(tǒng)遍歷節(jié)點(diǎn)樹，檢查每個(gè)div元素。首先，檢查每個(gè)div是否為可優(yōu)先級(jí)設(shè)置的項(xiàng)。對(duì)每個(gè)可處理的div，檢查它是否為數(shù)組pageItem中可設(shè)置的項(xiàng)，是否有數(shù)組userPreferences中的偏好。如果div的id屬性在pageItem數(shù)組中,則為該div創(chuàng)建一個(gè)新的屬性rank,然后讀取userPreferences數(shù)組，給rank屬性賦值；否則，如果div的id屬性不在userPreferences數(shù)組中，則給rank屬性一個(gè)缺省偏好值，缺省低優(yōu)先級(jí)偏好值應(yīng)等于或大于頁面上所有項(xiàng)的總數(shù)和。

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

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

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

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

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

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

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

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

參考文獻(xiàn)

[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] 史晶,吳慶波,楊沙洲.面向移動(dòng)終端的Web頁面重組技術(shù)綜述[J].計(jì)算機(jī)應(yīng)用研究,2011,28(12):4405-4408.

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

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