近年来，移动互联网技术发展很快，用户体验至上仍是移动互联网应用的基本准则。由于移动终端的多样性，屏幕大小不一，且远比电脑屏幕小，造成用户定位信息难、Web页面屏幕适应能力差、页面布局不合理、页面噪声信息多等问题，极大地影响了用户的体验。

        解决移动终端Web页面的自适应显示问题有3种基本方法，即客户端的自适应、中间件或代理技术、服务器端的自适应。例如，参考文献[1]提到的小屏幕设备浏览器是较为典型的客户端自适应技术。参考文献[2]提出了一个自动代理端自适应系统，它使用机器学习和启发式方法对标准网页进行自适应调整。服务器端自适应指自适应引擎在服务器上，处理移动设备的自适应时，网页开发人员可以进行更多的控制^[3]，能克服移动设备处理能力的不足，获得更好的自适应效果。在国内，参考文献[4]详细论述了移动终端Web页面显示中的重组技术；参考文献[5]则提出移动终端Web页面的分块处理策略。参考文献[6]从构建网站时网页开发的角度讨论网页的自动生成或自适应显示技术，对移动终端Web页面的显示处理有借鉴意义。但这些都没有考虑移动Web用户体验至上的准则。为了对移动终端Web作自适应显示处理并满足用户个性化需求，本文提出在服务器端构建Web页面优化处理系统。

1 系统概述

1.1 问题背景

        使用移动终端访问Web的问题，除设备及网络等影响响应和下载速度外，主要包括页面外观(如结构、布局和使用的项)以及链接导航等与电脑网页不同，这其实是设计问题，一般由下列因素造成：

       (1)网站移动版本问题。对大多数网站来说，专门制作的移动版本有页面结构不同、页面上项不同。为查找内容，加长滚动条和导航，通过多层级寻找内容项和链接，造成用户混乱，有时移动版与标准版的更新也不一致。

        (2)自适应或代码转换问题。经常发现移动设备网页是自适应或代码转换后的，或浏览器自动调整了，造成混乱的布局、内容和过多的导航。偶尔地，网页内容也被设计者想当然地改变了。

1.2 系统需求

        移动互联网问题虽多，但前景光明。在移动终端上浏览时,通常希望网页的内容和结构类似于桌面电脑。由此，分析得出以下需求：

        (1)确保相似的页面结构分发给所有类型的移动终端设备。类似的页面结构和用户熟悉的导航路径易于导航查找感兴趣的内容项。

        (2)确保在所有设备上网页显示项及其位置的一致性。共同项或主要项在同一位置可以避免用户交换使用不同类型设备时产生混乱。

        (3)页面显示最少项和减少导航。仅显示用户要求的内容，将减少页面大小，从而减少滚屏和导航，便于更快地找到感兴趣的内容。

　　(4)支持用户在多个不同类型设备上的访问。用户有不同的设备及要求，基于设备和需求选择显示的项，将提高Web浏览的体验。

1.3 提出的系统方案

　　为满足系统需求，本文提出一个服务器端的自适应系统，通过设置页面上项的优先级对Web页面作自适应调整。它不改变整个页面结构，但允许删除一些项。在服务器端处理自适应，基于以下考虑：

　　(1)对移动终端的自适应是自动完成的，适合任何设备不指定浏览器。移动终端开始时不下载整个页面，减少了数据传输；自适应不在本地处理，减少了显示时间，节省CPU时间，并延长电池时间。

　　(2)不需要在设备上安装专用浏览器，也不需要代理服务器，用户不必配置设备到代理的连接。

　　(3)开发人员能够控制自适应，因为网站页面和优化引擎系统部署在同一服务器上。

　　优先级自适应方法允许用户定制网页项的优先级，即确定最终显示在设备上的网页项。用户为每个项设定优先级后(1为最高优先级，数大优先级低)，低的优先级项被删去。什么设备，显示什么，按什么顺序显示，用户以此决定项优先级，并可以修改其偏好(首选项)。对有些网站，开发人员设定默认优先级，首次使用时提供给用户，用户可以自行再定制。

1.4 系统简介

　　设置优先级是为了维护整个布局即网页项的父子(层次或嵌套)关系看起来与原始页相同，保存页面整个外观。系统维护所有项及其层次关系，并允许用户设定在不同设备上显示项的数目和顺序。

　　优先级系统的目标是按照每个项的优先级显示页面。用户能够给每个项设定一个优先级值。低优先级的项被移去，留下的项重新排序以形成最后的页面。系统流程框图如图1所示。

　　(1)检测设备和用户。页面项的优先级处理取决于用户的偏好以及用于访问页面的移动终端设备。优先级引擎应能够识别用户、设备以及请求的页面。

　　(2)加载首选项(偏好)。对于一个页面的每个浏览器会话，依据请求该页的设备类型，优先级引擎将加载用户的首选项。用户分为两类：非注册用户/匿名用户和注册用户/已知的用户。匿名用户自动获取默认首选项，注册用户依据他们的特定偏好获得优先权。

　　(3)优先级处理和显示项目。依据用户的偏好，优先级引擎将重排序页面上的项。为此，优先级引擎需要分配偏好值给可处理的项；移去那些没有偏好值或偏好值大于剪切值的项；排序和显示留下来的项。通过增加链接“更多…”，以访问移去的页面项。

2 系统实现

　　服务器端页面优化自适应技术依据用户首选项进行优先级处理，并针对设备自适应调整。不同设备访问具有唯一版本的网站时，网站的开发和维护也只需一个版本。

　　该实现将分发给移动设备的页面内容或项作最小化处理，暂不考虑如图片或视频媒体等其他自适应。优 先级引擎主要实现以下功能： (1)依据优先级对项进行重新排序；(2)依据优先级来分发和显示感兴趣的内容；(3)移去低优先级项，插入“更多…”链接；(4)依据页面请求的设备，为用户提供默认首选项。优先级引擎保存页面的整体结构,处理后页面项的父子关系不变。系统优化后，再经客户浏览器的自适应处理，整体外观也许会有微小的改变。

2.1 识别页面元素

　　2005年以后，网页布局由表格(table标签)转变为由层(div标签)承担，因此系统处理以div元素为结构布局的(X)HTML页面。页面包含的程序脚本如JavaScript等暂时先不予考虑。一个基本的HTML页面以div标签为结构，组成页面上的项，并可以嵌套，使用CSS样式控制布局的表现，以此实现、测试和讨论优先级引擎。

2.2 优先级系统引擎

　　引擎基于ASP.NET开发，采用混合脚本语言编程，操作XSLT更新、重排和显示页面。图2所示为优先级引擎框图。

2.3 存储和管理数据

　　 用户的偏好需要永久存储，并允许优先级引擎以可靠的机制快速查询和访问。另外，需要存储用户ID和设备ID,浏览会话时会用到。用户偏好可能存储在cookies、会话变量或者数据库中。选择使用关系数据库，存储和管理用户的偏好(首选项)，这个方法保证了偏好可以永久存储，并提供了可靠和灵活的存储机制。对大量的用户而言，管理数据和增加记录等，数据库提供了高性能和可伸缩性。数据库修改数据很灵活，管理对用户偏好的修改很容易。而且，存储用户的偏好(首选项)在数据库中，当用户使用任何类型的设备访问页面时，都能够获取他们的偏好，不需要为新的设备类型对偏好进行重新设置。图3所示为系统使用的6个基表。

2.4 设计XSLT样式表

　　为重组页面，需要排序和转换操作，使用XSLT转换规则，生成最终优先级处理后的页面版本。应用XML的XSLT样式表技术，修改XML文档的结构和对文档作格式转换。系统使用的样式表代码如下。

<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 优先级引擎的具体实现

　　(1)用户登录。有两类用户：访客和注册用户。注册用户有个性化首选项存储在数据库中；而访客用户使用默认首选项。它要求用户输入用户名和密码，验证有效，则从数据库中查找userId。userId存储在会话变量中，在整个用户的浏览会话过程中使用。

　　(2)识别用户、设备和页面处理。识别用户后，userId被传递给会话变量。引擎检查会话变量是否存在该userId。如果没有，系统分配用户为缺省userId，值设为1。识别设备类型时，系统检查来自设备的用户代理字符串。系统从传入的URL变量，确定被优先级处理的页面。如果有URL变量，系统使用该变量的值作为页面名称；否则，系统分配&rdquo;home&rdquo;作为页面名称。系统在会话变量中存储userId和deviceType，以在整个浏览会话中使用。

　　(3)从数据库中查询用户的偏好。系统识别用户、设备和页面后，从数据库中查询优先的页面项、用户的偏好和剪切值。使用页面名称，在数据库中查询页面优先级项的elementIDs，并将它们存储在数组pageItem中。然后，使用userId、deviceType和pageName查询用户对该页的偏好(即elementIDs和ranks)，并将它们存储在另一个数组userPreference中。

　　(4)更新页面项的偏好。当对Web页项处理时，系统首先要识别出页面中的div块。选择使用XML的DOM解析器处理数据。

　　①装载基本页。系统装载页面，生成一个HTML的DOM节点树。一个Web页上所有可视内容和可优先级设置的项都是<body>元素的子节点。<html>根元素和<head>元素为不可优先级设置的项，直接复制在最终页面上。所以，仅处理从<body>元素开始的节点树。

　　②分配偏好值。基本页装载后，系统分配偏好值给可优先级设置的div。为此，系统遍历节点树，检查每个div元素。首先，检查每个div是否为可优先级设置的项。对每个可处理的div，检查它是否为数组pageItem中可设置的项，是否有数组userPreferences中的偏好。如果div的id属性在pageItem数组中,则为该div创建一个新的属性rank,然后读取userPreferences数组，给rank属性赋值；否则，如果div的id属性不在userPreferences数组中，则给rank属性一个缺省偏好值，缺省低优先级偏好值应等于或大于页面上所有项的总数和。

　　③删除低优先级项，增加&ldquo;更多&hellip;&rdquo;链接。可优先级设置的项被分配偏好值以后，接下来删除低优先级项。系统遍历分配了偏好值的节点树，删除rank属性大于剪切值的所有节点。然后，创建一个新的div元素，放置超链接&ldquo;更多&hellip;&rdquo;。

　　(5)排序和显示优先级处理后的页面。删除低优先级项后，系统重构页面，按照它们的优先级重新排序页面上的项，并转换成为最终的页面。使用XSLT处理器重新排序和转换页面。低优先级项删除后的新的节点树通过应用XSLT样式表的规则，基于rank属性以升序排序。按层次深度对每层div进行排序，嵌套的div 也在双亲节点中排序，有最高优先级(值为1)的首先被显示。

3 系统性能测试

　　系统性能测试时，分别对用户数、页面项数、用户偏好数等主要参数作不同的设置。系统运行得到最终页面的时间几乎都在20 ms以内，表明系统性能优良。

　　(1)用户数对性能的影响。采用不同的数据行数测试,最大的1 000K行大约是20万用户，每个用户有5个偏好的数据库的状态。系统测试以一个页面、有50个div项、偏好剪切值设为5的情形，运行系统15次的测试结果如表1所示。

　　(2)页面项数对性能的影响。数据库中数据行为1 000 K，每页偏好数设为5，运行测试15次的结果如表2所示。

　　(3)用户偏好数对性能的影响。数据库中数据行为1 000 K，页面有50项，剪切值随偏好数而变化，运行测试15次的结果如表3所示。

　　以div标签为布局的页面是优化引擎工作的基础，从而实现基于用户偏好和移动终端类型的页面自适应。研究结果表明，在服务器端系统优化处理的页面内容在不同类型的移动终端上能提供一致的和良好的用户体验。接下来的工作是设计和实现用户接口，完成用户对个性化偏好的定制。更大的挑战是如何对页面上其他内容(如图片等媒体信息)依据用户偏好和移动终端的设备能力，实施基于优先级的自适应调整，这也是未来的工作方向。

参考文献

[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] 高集荣,田艳,江晓妍.基于树结构的Web页面适配方法的研究[J].微型机与应用,2014,33(1):77-80.