CN102065114A - 一种移动终端访问网页的方法及装置 - Google Patents

Abstract

一种移动终端访问网页的装置，该装置包括：缩略图生成器，将WEB网站的WEB页面生成JPG格式的缩略图片，发送至页面调整器；结构解析器，将WEB网站的WEB页面的代码解析为DOM树，并将DOM树发送至噪点分离器；噪点分离器，对DOM树梳理，将梳理后的DOM树发送页面区域块生成器；页面区域块生成器，由梳理后的DOM树生成区域Block块，并将Block块发送至页面调整器；页面调整器，分析Block块得到链接代码、图片和文字，将链接代码、图片和文字，以及缩略图片发送至移动终端。本文还公开了一种移动终端访问网页的方法。应用本发明实施例以后，可以使移动终端访问WEB页面不受自身硬件性能的影响。

Description

一种移动终端访问网页的方法及装置

技术领域

本发明涉及互联网WEB应用领域，更具体地，涉及一种移动终端访问网页的方法及装置。

背景技术

时下无论是时分同步的码分多址(TD-SCDMA)，宽频码分多址(WCDMA)，还是CDMA技术(CDMA2000)都能提供超过1兆的上行速度，移动终端访问Web服务已不再受限于带宽资源。伴随着3G网络规模的不断扩大以及用户群体的持续增多，3G与WEB2.0结合的移动互联网应用逐渐成为手机用户的业务选择。然而几乎所有的WEB应用都是针对计算机上网(PC-Internet)用户设计，大多数移动终端上网(Mobile-Internet)用户受限于移动终端的硬件处理能力，例如打开网页缓慢，狭小的屏幕不能合适地展示网页，并不理想的脚本语言解析能力等等。图1所示，移动终端浏览雅虎首页的情况，针对PC-Internet设计的WEB页面不适合在移动终端上呈现，用户不得不频繁地移动光标以阅读网页信息。另外由于网页中含有大量的图片，用户利用移动终端登录网页时必然花费较多的等待时间。

目前在解决移动终端访问WEB应用方面有以下两个研究方向：

A)浏览器：通过浏览器的内置处理引擎对用户浏览的网页进行预处理，例如调整图片格式，改变文字大小等等，基于Windows Mobile、Android、iPhone OS等操作***开发的浏览器可以为用户提供诸如触屏、页面缩放等操作，方便用户使用。

B)设计适合移动终端的网页：部分大型网站，如雅虎、新浪等门户站点，除了传统的WAP展现方式，还设计了适合移动终端浏览的WEB页面，此类网页在代码中减少或去除大量的脚本语言，并且设计人员对HTML和CSS语句也进行相应的调整。

但是，现有的解决移动终端访问WEB技术依然存在许多问题。

a)浏览器将所有对网页的处理都放在移动终端进行，对移动终端的硬件性能以及操作***有较高的要求，在中低端手机上无法使用。

b)设计适合手机用户浏览的网页可以解决WEB页面在“小屏幕”的手机终端的呈现问题，但是对于大部分的WEB应用而言，服务提供商并不会提供这种仅针对手机用户的网页。另外中低端手机由于自身处理能力不足，在访问这样的WEB页面时也显得捉襟见肘。

总之，目前通过移动终端访问WEB页面受到移动终端硬件性能的明显影响。

发明内容

本发明实施例提出一种移动终端访问网页的方法，使移动终端访问WEB页面不受自身硬件性能的影响。

本发明实施例还提出一种移动终端访问网页的装置，使移动终端访问WEB页面不受自身硬件性能的影响。

本发明实施例的技术方案如下：

一种移动终端访问网页的装置，该装置包括：

缩略图生成器，将WEB网站的WEB页面生成JPG格式的缩略图片，发送至页面调整器；

结构解析器，将WEB网站的WEB页面的代码解析为DOM树，并将DOM树发送至噪点分离器；

噪点分离器，对DOM树进行梳理，将梳理后的DOM树发送至页面区域块生成器；

页面区域块生成器，由梳理后的DOM树生成区域Block块，并将Block块发送至页面调整器；

页面调整器，分析Block块得到链接代码、图片和文字，将链接代码、图片和文字发送至移动终端。

所述页面区域块生成器包括，

分割单元，将梳理后的DOM树分割成至少一个独立的Block；

整合单元，依据独立的Block类型的类型和属性整合独立的Block，得到Block块；

存储单元，获取Block块的信息并写入数据库，并将Block块发送至页面调整器。

所述页面调整器包括，

提取单元，由Block获得超文本链接标识语言HTML代码；

判断单元，判断HTML代码中含有链接，进一步判断链接中是否有关键词，有关键词时，则将链接标为“high”，记录链接代码；否则保存默认配置，记录链接代码；

导出单元，从判断单元中导出链接代码后，输出链接代码；

排列单元，由Block块得到图片和文字，按照先图片后文字的顺序排列并输出。

一种移动终端访问网页的方法，该方法包括：

将WEB页面转化为JPG格式的缩略图片；

根据WEB页面代码生成DOM树；

梳理DOM树；

将梳理后DOM树的节点划分为至少一个区域Block块；

分析Block块得到链接代码、图片和文字，将链接代码、图片和文字，以及缩略图片发送至移动终端。

所述梳理DOM树包括，清理由Script和CSS语言标签构成的节点。

所述划分包括，

将梳理后的DOM树分割成至少一个独立的Block；

依据独立的Block类型和属性整合独立的Block，得到Block块；

获取Block块的信息并写入数据库。

所述将梳理后的DOM树分割成至少一个独立的Block包括，

以前序遍历的方式对梳理后DOM树进行检索，将标签节点及其子生成树中的节点归属为一个Blcok。

所述依据独立的Block的类型和属性整合独立的Block包括，按照前序遍历的方式对所述梳理后DOM树进行第二次遍历，将同为Block类型且属性相同的兄弟节点整合在一起，生成Block块。

所述Block是在同一个WEB页面中具有同种属性且内容关联的信息共同体。

所述分析包括，

由Block块获得超文本链接标识语言HTML代码；

判断HTML代码中含有链接，进一步判断链接中是否有关键词，有关键词时，则将链接标为“high”，记录链接代码；否则保存默认配置，记录链接代码；

导出链接代码后，输出链接代码；

由Block块获得图片和文字，按照先图片后文字的顺序排列并输出。

从上述技术方案中可以看出，WEB网站由移动终端的WEB访问请求返回WEB页面；由本发明实施例的装置先将WEB页面生成JPG格式的缩略图片并发送至页面调整器；再采用网页分割技术将WEB页面的代码解析为DOM树；对DOM树进行梳理后，生成至少一个Block块；分析各Block块得到其链接分层和内容分层，由链接分层得到链接代码，由内容分层得到图片和文字；将链接代码、图片和文字，以及缩略图片发送至移动终端。移动终端不需要直接处理庞大WEB网页，仅需要显示缩略图片和解析对硬件性能要求不高的Block块链接代码、图片和文字，即可轻松流畅地访问WEB网页，使得移动终端访问WEB页面不受自身硬件性能的影响。

附图说明

图1为现有技术中移动终端访问雅虎首页示意图；

图2为本发明实施例移动终端访问网页的装置结构示意图；

图3为本发明实施例中DOM树图；

图4为本发明实施例中页面区域示意图；

图5为本发明实施例中分层网络结构示意图；

图6为本发明实施例移动终端访问网页的方法流程示意图；

图7为本发明实施例中的Block坐标图；

图8为本发明实施例的移动终端访问雅虎首页示意图；

图9为本发明实施例的移动终端访问WEB网页时分层网络结构页面示意图。

具体实施方式

为使本发明的目的、技术方案和优点表达得更加清楚明白，下面结合附图及具体实施例对本发明再作进一步详细的说明。

在本发明实施例中，在WAP网关中设置本发明实施例的装置，按本发明实施例的方法先将网站返回的WEB网页生成JPG格式的缩略图片；并对WEB整个网页的代码解析，生成完整的DOM树；对该DOM树进行梳理，梳理后的DOM树划分为多个独立的Block，将多个独立的Block重新组合为Block块，再由Block块得到链接代码、图片和文字；并将链接代码、图片和文字，以及之前生成的WEB网页缩略图片发送至移动终端。移动终端的浏览器显示缩略图片并解析链接代码、图片和文字，得以流畅地访问WEB网页，从而保证了移动终端访问WEB页面不受自身硬件性能的影响。

图1是本发明移动终端访问网页的装置结构示意图，该装置包括缩略图生成器201(Thumbnail Generator)，结构解析器202(Structure Processor)，噪点分离器203(Noise Eliminator)，页面区域块生成器204(Page Blocker)以及页面调整器205(Page Tailor)。

缩略图生成器201

在浏览网页时，用户从使用习惯上需要先了解整个页面传达的信息，用户会根据信息选择自己感兴趣的内容。缩略图生成器的作用就是根据WEB网站返回的WEB页面生成JPG格式的缩略图片，即网页快照。缩图图生成器将缩略图片发送至页面调整器，待页面调整器得到由处理WEB网页得到的链接代码、图片和文字后，页面调整器再将缩略图片、链接代码、图片和文字发送至移动终端。这样处理的优势有以下几点：

1)更好的兼容性。正常的WEB页面中常常含有大量的脚本语言和Flash动画，脚本语言包括JavaScript和Ajax。这些脚本语言在移动终端操作***中不能很好地解析，有的甚至无法解析，但是JPG格式的缩略图片在目前几乎所有的移动终端上都能够正常显示。

2)更快的下载速率。正常的WEB页面中含有大量的图片，这些图片下载到移动终端时将耗费较多时间，如果只发送WEB页面的缩略图片到移动终端将大大减少时间，为用户提供更快的下载速率。

结构解析器202

任何一个网页都是基于HTML语法结构编写的，依照Document Obiect Model Level2HTML Specification(Version 1.0)标准，结构解析器将整个网页的代码解析为如图3所示完整的DOM树。图3中由超文本链接标识语言(HTML)解析为头部(HEAD)、标题(TITLE)、辅助标签(META)和主体(BODY)、表格(TABLE)、行(TR)、单元格(TD)、换行(BR)和数据(DATA)。

噪点分离器203

网页设计者在制作网页时为了能够让页面美观和向用户提供丰富的互动体验常常在HTML代码中加入脚本语言和CSS语句等。但是这些都是针对PC-Internet用户做出的设计，对Mobile-Internet用户并不完全适用，部分中低端的移动终端根本不支持脚本语言的解析。为了解决这个问题，噪点分离器对DOM树进行梳理。梳理的原则是将由Script、CSS语言标签构成的节点进行清理，这样DOM树保留的节点是干净的HTML标签节点。中低端移动终端的浏览器在解析这样的WEB页面时不必担心脚本语言的兼容性问题。对于高端移动终端而言，其操作***以及使用的浏览器能够对脚本语言以及CSS语句有效解析，用户可以根据使用意愿来选择是否清理掉这些节点。

页面区域块生成器204

“Block”的概念在HTML语法中并不存在，本发明中将“Block”定义为：在同一个WEB页面中具有同种属性且内容关联的信息共同体。每一个Block中的信息组件都处于相同的页面中，这些信息组件在呈现方式上具有用户感知的一致性。

页面区域块生成器的作用就是根据梳理后的DOM树生成多个独立的Block，DOM树中的所有节点将被归入Block块中。

页面区域块生成器包括分割单元、整合单元和存储单元。

分割单元，将梳理后的DOM树分割成多个独立的Block；

整合单元，依据独立的Block的类型和属性整合独立的Block，得到Block块；

存储单元，获取Block块的信息并写入数据库。

从图4中可以了解到该页面可以划分为5个Block块，即5个区域。

在对Block进行了定义后需要解决的是如何将DOM树中的节点划分到Block块中，具体方法在步骤608中详述。

页面调整器205

通过了页面区域块生成器的处理，正常的WEB页面已经被分割为Block块，现在需要做的就是将页面进行调整。在页面内容的重新组合中使用分层网络结构的思想，即将一个Block分为内容分层Content Layer和链接分层LinkLayer，不同的层承载不同的信息。图5是分层网络结构示意图。页面调整器将分层后得到的链接代码、排列好的图片和文字，以及由缩略图生成器201生成的JPG格式的缩略图片发送至移动终端。

页面调整器是由提取单元、判断单元、导出单元和排列单元组成。

提取单元，由Block块获得超文本链接标识语言HTML代码；

判断单元，判断HTML代码中是否含有链接，如果有链接，则进一步判断链接中是否有关键词，有关键词时，则将链接标为“high”，记录链接代码；没有关键词，则保持默认配置，记录链接代码；否则，判断没有链接。

导出单元，从判断单元中导出链接代码；

排列单元，由Block块得到图片和文字，按照先图片后文字的顺序排列并输出。

缩略图生成器将网站返回的WEB网页生成JPG格式的缩略图片；结构解析器将整个网页的代码解析为完整的DOM树发送至噪点分离器；噪点分离器对该DOM树进行梳理；由页面区域块生成器将梳理后的DOM树划分为多个独立的Block；页面调整器重新组合独立的Block得到Block块，由Block块分层得到链接代码、排列好的图片和文字，将链接代码、排列好的图片和文字，以及缩略图生成器生成的缩略图发送至移动终端。

图6是本发明实施例移动终端访问网页的方法流程示意图，具体包括以下步骤：

步骤601、用户在移动终端的浏览器中输入网址后提交WEB访问请求，该请求发送到WAP网关处。

步骤602、WAP网关在与用户的移动终端完成连接后通过解析用户提交的WEB访问请求中的相应字段获悉用户移动终端的硬件参数，可以根据该硬件参数确定用户终端的显示能力以及噪声解析器中清理节点的种类。另外WAP网关将用户的WEB访问请求封装成请求消息后发送到WEB服务器端。

步骤603、WEB服务器根据请求消息向WAP网关反馈响应消息，响应消息中包括用户移动终端请求的WEB页面。

步骤604、WAP网关接受到响应消息后，首先将WEB页面传送到缩略图生成器。

步骤605、缩略图生成器将WEB页面转化为JPG格式的缩略图片，同时将缩略图片发送至页面调整器。缩略图生成器中将WEB网页转化为JPG格式的图片的方法是现有技术，在此不再赘述。

步骤606、结构解析器根据原始的WEB页面代码解析生成DOM树，然后将DOM树作为参数发送至噪点分离器做进一步处理。由网页代码解析生成DOM树是现有技术，在此不再赘述。

步骤607、噪点分离器利用现有的遍历技术将由Script和CSS语言标签构成的DOM树节点清理掉，生成梳理后DOM树。将梳理后DOM树发送至页面区域块生成器。

步骤608、页面区域块生成器根据梳理后DOM树将节点划分为多个的Block块，待处理完成后将Block块发送至由页面调整器。

其中，根据梳理后DOM树将节点划分为多个的Block块的方法具体包括以下步骤：

步骤6081、将梳理后DOM树分割成多个独立的Block。

以梳理后DOM树为基础，以前序遍历的方式对梳理后DOM树进行检索。将“table”、“div”、“form”等标签节点及其子生成树中的节点归属为一个Block，并将此节点的类型设置为Block类型。前序遍历首先访问根节点然后遍历左子树，最后遍历右子树。在遍历左、右子树时，仍然先访问根节点，然后遍历左子树，最后遍历右子树。

步骤6082、依据独立的Block类型和属性整合独立的Block，得到Block块。

通过步骤6081的检索后，梳理后DOM树中所有“table”、“div”、“form”等标签节点及其子生成树中的节点已被归属为相应的区域，其节点类型已被标示为Block类型。

返回到根节点，开始对梳理后DOM树的第二次遍历，这次遍历仍然按照前序遍历的方式进行，目的是将同为Block类型且属性相同的兄弟节点整合在一起，生成Block块。

步骤6083、获取Block块的信息并写入数据库中。

分析每个Block块以获取属性信息，这些属性信息会填入表1Block List中。表1作为数据库表结构，作用是在数据库中建立每个页面区域的数据档案。通过数据档案将每个Block块中对应的HTML代码以及需要加载的信息都一一记录下来，用户在多个页面间切换时便不需要重复切割页面，只需从数据库中读取相应的信息。

表1

下面对表1中的各个参数做详细说明。

Block ID是一个16bits的标示符用于在Block List中唯一标示一个Block块。Coverage Region表示一个Block块在WEB页面中涵盖的区域。

P1(tl-X，tl-Y)和P2(dr-X，dr-Y)两个坐标值是相对值，以图7中页面的最左上角为原点。计算坐标值的作用是在手机端为用户提供Block块导航，浏览器会根据Block块坐标值计算出每个Block块的区域并在页面中绘制该区域的导航条，用户只需要通过十字键操作就能在不同的Block块区域间切换，选择自己感兴趣的Block块区域。

P1和P2坐标的计算是在HTML语法中每个Table都有相应的“Width”和“Length”属性值，通过读取这两个值就能知道Table的大小，而每个Block块是一个或者多个Table构成。因此Block块的值也能通过叠加计算得到。

Block Type说明该Block块在解析时是否支持脚本语言、CSS等，Block Type的值分为Simple、Normal以及Original，分别代表三种对Block的解析方式：

(1)Simple：浏览器在解析HTML代码时将忽略源代码中的脚本语言和CSS等语句，Block块中的信息将以最简单的方式呈现。

(2)Normal：浏览器在解析HTML代码时将完全解析CSS等语句，但是不执行脚本语言。

(3)Original：浏览器在解析HTML代码时将完全解析脚本语言以及CSS等语句。

Simple的处理速率最快适合低端手机用户；Normal保持了同原页面同样的观感设计，并且由于忽略了脚本语言而具有较好的兼容性；Original将完全按照原WEB页面的HTML代码进行解析，适合高端手机用户。Block Type参数的设置由***根据用户的手机参数进行填写，也支持用户通过浏览器进行参数修改。

HTML Code记录了该Block块对应的HTML代码。

Image记录了格式转换后的图片存放路径。原始的WEB页面中的图片受尺寸、格式大小等多方面限制而不适合在移动终端上展现，因此必须经过格式转换处理，根据用户的移动终端的硬件参数将图片调整为合适的状态。这里Image属性记录的是处理完成后的图片存放路径。

步骤609、页面调整器筛选链接信息并根据用户关注点进行定制化呈现。当用户选择某一个Block块以后，页面调整器会从Block List中得到该Block块对应的HTML代码，通过分析代码将链接信息映射到Link Layer中，并根据用户的关注点对链接信息进行排列。其中，Content Layer承载图片和文字，Link Layer承载链接。

链接信息的筛选和定制化排列具体包括以下步骤：

步骤6091、首先从Block List中获得对应的HTML代码；

步骤6092、判断HTML代码中是否含有“<a href”开头的语句，如果有则说明该HTML代码中含有链接，截取以“<a href”开始“</a>”结束的语句段，该语句段是一个链接信息。获取这个链接后检查该链接信息中是否含有用户关注的关键字，如果有则设置链接的优先级标签为“high”，如果没有则保持默认配置。完成链接的优先级处理后将链接代码存储。需要特别说明的是，用户关注的关键字是用户在浏览器中根据需要输入的，非必须输入的内容。

当HTML代码中所有的链接信息被获取并完成优先级处理后，执行步骤6093。

步骤6093、从存储中导出存入的链接代码，并将该链接代码传送到用户端进行解析。

步骤6091至6093完成了Link Layer中链接的处理，步骤6093完成后需要在Content Layer中完成对图片和文字的排列。图片和文字的排列规则按照先图片后文字的顺序从上而下排列。如果用户输入了关键字，在文字中相应的关键字将高亮显示。

步骤610、WAP网关将生成的WEB页面缩略图片、链接代码以及排列好的图片和文字发送到用户的移动终端，由浏览器展现图片并解析收到的参数绘制页面区域导航。

正常的WEB网页经过本发明处理后，WAP网关发送给移动终端将不再是一个“庞大”的WEB页面，而是网页的略缩图，如图8所示。由于移动终端只需要接收一个WEB页面的缩略图片，因此下载速度大大提高。另外略缩图片展现给用户的信息更宏观，符合用户的上网习惯。

图9展示了页面区域导航功能的应用。本发明中的装置会根据网页的代码计算出页面的Block，并将Block的数据作为参数传给用户的浏览器，在浏览器上以“区域导航块”的方式浏览网页。

当用户选择了某一个Block以后，WAP网关将把该Block的HTML代码发送给移动终端，并由浏览器解析代码，将区域内的信息展现给用户。

本发明实施例，将装置设置在WAP网关，利用网关强大的计算能力将浏览器的处理工作前置到网关服务器完成，有效解决了移动终端访问WEB应用的硬件性能制约。

以上所述，仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种移动终端访问网页的装置，其特征在于，该装置包括：

缩略图生成器，将WEB网站的WEB页面生成JPG格式的缩略图片，发送至页面调整器；

结构解析器，将WEB网站的WEB页面的代码解析为DOM树，并将DOM树发送至噪点分离器；

噪点分离器，对DOM树进行梳理，将梳理后的DOM树发送至页面区域块生成器；

页面区域块生成器，由梳理后的DOM树生成区域Block块，并将Block块发送至页面调整器；

页面调整器，分析Block块得到链接代码、图片和文字，将链接代码、图片和文字发送至移动终端。

2.根据权利要求1所述移动终端访问网页的装置，其特征在于，所述页面区域块生成器包括，

分割单元，将梳理后的DOM树分割成至少一个独立的Block；

整合单元，依据独立的Block类型的类型和属性整合独立的Block，得到Block块；

存储单元，获取Block块的信息并写入数据库，并将Block块发送至页面调整器。

3.根据权利要求1所述移动终端访问网页的装置，其特征在于，所述页面调整器包括，

提取单元，由Block获得超文本链接标识语言HTML代码；

判断单元，判断HTML代码中含有链接，进一步判断链接中是否有关键词，有关键词时，则将链接标为“high”，记录链接代码；否则保存默认配置，记录链接代码；

导出单元，从判断单元中导出链接代码后，输出链接代码；

排列单元，由Block块得到图片和文字，按照先图片后文字的顺序排列并输出。

4.一种移动终端访问网页的方法，其特征在于，该方法包括：

将WEB页面转化为JPG格式的缩略图片；

根据WEB页面代码生成DOM树；

梳理DOM树；

将梳理后DOM树的节点划分为至少一个区域Block块；

分析Block块得到链接代码、图片和文字，将链接代码、图片和文字，以及缩略图片发送至移动终端。

5.根据权利要求4所述移动终端访问网页的方法，其特征在于，所述梳理DOM树包括，清理由Script和CSS语言标签构成的节点。

6.根据权利要求4所述移动终端访问网页的方法，其特征在于，所述划分包括，

将梳理后的DOM树分割成至少一个独立的Block；

依据独立的Block类型和属性整合独立的Block，得到Block块；

获取Block块的信息并写入数据库。

7.据权利要求6所述移动终端访问网页的方法，其特征在于，所述将梳理后的DOM树分割成至少一个独立的Block包括，

以前序遍历的方式对梳理后DOM树进行检索，将标签节点及其子生成树中的节点归属为一个Blcok。

8.据权利要求7所述移动终端访问网页的方法，其特征在于，所述依据独立的Block的类型和属性整合独立的Block包括，按照前序遍历的方式对所述梳理后DOM树进行第二次遍历，将同为Block类型且属性相同的兄弟节点整合在一起，生成Block块。

9.根据权利要求6至8中任意一项所述移动终端访问网页的方法，其特征在于，所述Block是在同一个WEB页面中具有同种属性且内容关联的信息共同体。

10.根据权利要求4所述移动终端访问网页的方法，其特征在于，所述分析包括，

由Block块获得超文本链接标识语言HTML代码；

判断HTML代码中含有链接，进一步判断链接中是否有关键词，有关键词时，则将链接标为“high”，记录链接代码；否则保存默认配置，记录链接代码；

导出链接代码后，输出链接代码；

由Block块获得图片和文字，按照先图片后文字的顺序排列并输出。

Images