CN102916994A - 一种页面浏览方法、服务器和终端 - Google Patents

Abstract

本发明提供了一种页面浏览方法，包括：服务器接收终端的页面浏览请求后，获取终端的本地能力信息；服务器根据获取的终端的本地能力信息，解析请求页面生成页面绘制消息；服务器将页面绘制消息下发给终端。同时，还提供一种页面浏览服务器和终端。通过本发明实施例简化了在页面浏览过程中终端的实现，节省了终端的性能消耗和资源的占用，改善了用户的浏览体验。

Description

一种页面浏览方法、服务器和终端

技术领域

本发明涉及通信技术领域，尤其涉及一种分布式浏览方法、服务器和终端。 

背景技术

随着技术的发展和科技的进步，IPTV(Internet Protocol Television，网际协议电视)为用户带来了更多的宽带业务体验。用户通过宽带网络能够观看数字电视，点播视频，浏览网页等。但传统的网页浏览解析时，需要由终端进行网页的解析和进行网页的缓存，对终端的处理能力要求很高。 

发明内容

有鉴于此，有必要提供一种页面浏览方法，来分担终端的处理能力消耗，降低终端的性能消耗和资源占用。 

一种页面浏览方法，包括：服务器接收终端的页面浏览请求后，获取所述终端的本地能力信息；所述服务器根据所述获取的终端的本地能力信息，解析请求页面，生成页面绘制消息；所述服务器将所述页面绘制消息下发给所述终端。 

一种页面浏览方法，包括：终端向服务器发送页面浏览请求后，接收所述服务器返回的终端能力信息获取请求；所述终端处理所述终端能力信息获取请求并向所述服务器发送所述终端的本地能力信息；所述终端接收所述服务器返回的根据所述终端能力信息解析页面生成的页面绘制消息，并根据所述页面绘制消息绘制本地页面。 

一种服务器，包括：接收模块，用于接收终端的页面浏览请求；终端能力获取模块，用于在接收到所述页面浏览请求后，获取所述终端的本地能力 信息；布局解析模块，用于根据所述获取的终端的本地能力信息，解析请求页面生成页面绘制消息；绘制发送模块，用于将所述页面绘制消息下发给所述终端。 

一种终端，其特征在于，包括：请求发送模块，用于向服务器发送页面浏览请求；接收模块，接收所述服务器返回的终端能力信息获取请求；信息上报模块，用于处理所述终端能力信息获取请求并向所述服务器发送所述终端的本地能力信息；页面绘制模块，用于接收所述服务器返回的根据所述终端能力信息解析请求页面生成的页面绘制消息，并根据所述页面绘制消息绘制本地页面。 

同过本发明实施例，服务器接收终端的页面请求后，获取终端的本地能力信息，服务器根据终端的能力信息对页面进行解析，简化了终端的实现，节省了终端的性能消耗和资源的占用，改善了用户的浏览体验。 

附图说明

图1为本发明实施例页面浏览方法流程图。 

图2为本发明实施例页面浏览方法信令流程图。 

图3为本发明实施例页面解析布局流程图。 

图4为本发明实施例插件处理流程图。 

图5为本发明实施例脚本处理流程图。 

图6为本发明实施例服务器结构示意图。 

图7为本发明实施例终端结构示意图。 

图8为本发明实施例终端服务器能力信息分布示意图。 

图9为本发明实施例网页内容代码部分示意图。 

图10为本发明实施例dom树中节点关系示意图。 

图11为本发明实施例render树中属性示意图。 

图12为本发明实施例消息体定义格式示意图。 

图13为本发明实施例获取截屏信息消息体格式示意图。 

图14为本发明实施例绘制消息结构示意图。 

图15为本发明实施例消息结构定义示意图。 

图16为本发明实施例承载消息头定义示意图。 

图17为本发明实施例New消息定义示意图。 

图18为本发明实施例Add消息定义示意图。 

图19为本发明实施例Delete消息定义示意图。 

图20为本发明实施例Update消息定义示意图。 

图21为本发明实施例Save/clean消息定义示意图。 

图22为本发明实施例一个消息体携带多事件描述示意图。 

图23为本发明实施例消息体定义示意图。 

图24为本发明实施例单个事件消息体定义示意图。 

图25为本发明实施例请求消息结构示意图。 

图26为本发明实施例服务器接收终端返回消息格式示意图。 

图27为本发明实施例Render info中携带了整个render树信息格式示意图。 

具体实施方式

网页中包含了html(Hyper Text Markup Language，超文本标记语言)，JavaScript(简称JS，Java网页脚本语言)，CSS(Cascading Style Sheets，层叠样式表)，3D(three-dimensional，三维图形)和各种插件能力，变得越发复杂； 另一方面受设备硬件资源限制，嵌入式浏览器必须体积小，运行快，能力受限，嵌入式浏览器仅实现html，JS，CSS这些标准的子集或者低版本，支持的布局也通常过于简单，不支持表格，框架frame等复杂布局元素，不支持插件能力，表现力差，性能差，其发展无法赶上网页信息的发展分析浏览器解析网页的整个过程，包含下面几个步骤： 

第一，例如网页内容请结合参见图9。 

第二，按照html规范，解析html生成dom(Document Object Model，文档 对象模型)树，dom树中描述了整个网页的节点和节点关系。请结合参看图10。 

第三，布局管理器对dom树上节点进行布局生成渲染render树，render树中描述了节点的位置，大小，和解析出的CSS属性请结合参看图11。 

第四，根据render树描述和各个render对象的绘制过程调用渲染引擎绘制到显示屏幕上。 

请结合参看图1，本发明实施例页面浏览方法包括如下步骤： 

步骤102，服务器接收终端的页面浏览请求后，获取终端的本地能力信息。 

步骤104，服务器根据获取的终端的本地能力信息，解析请求页面，生成页面绘制消息。 

步骤106，服务器将页面绘制消息下发给终端。 

同过本发明实施例，服务器接收终端的页面请求后，获取终端的本地能力信息，服务器根据终端的能力信息对页面进行解析，简化了终端的实现，节省了终端的性能消耗和资源的占用，改善了用户的浏览体验。 

请结合参看图2，本发明实施例页面浏览方法包括如下步骤： 

步骤202，终端在页面浏览的过程中向服务器发送浏览请求，请求页面。 

步骤204，服务器从第三方的web服务器上获取到页面信息。 

步骤206，服务器向终端发送请求终端本地能力信息的消息，终端的本地能力信息包括终端的显示屏幕信息，例如分辨率，存储的电话簿等信息。 

步骤208，终端按照消息格式解析消息并处理，返回本地能力信息给服务器。 

步骤210，服务器解析页面，根据布局解析模块生成render树，在根据 render树生成页面绘制消息。 

步骤212，服务器打包页面绘制消息并发送页面绘制消息给终端。 

步骤214，终端解析页面绘制消息并根据render节点的绘制方法将网页信息绘制到显示屏幕上。 

步骤216，如果网页中含有插件信息，服务器解析运行插件应用并逐帧缓存，再获取这些帧缓存信息转换成视频流。 

步骤218，服务器将转换的视频流发送给终端。 

步骤220，终端解析视频流并显示播放。 

步骤222，终端捕获本地事件。 

步骤224，终端将事件消息发送给服务器。 

步骤226，服务器根据事件消息找到dom节点，执行节点上的注册脚本，更新dom树和render树信息。 

步骤228，服务器将render树更新信息打包成页面绘制消息发送给终端。 

步骤230，终端解析更新的页面绘制消息，并绘制到现实屏幕上。 

请结合参看图3，本发明实施例页面解析布局包括如下步骤： 

步骤302，服务器端从web服务器上获取到页面信息。 

步骤304，解析模块负责解析html数据并生成dom树。 

步骤306，布局模块负责按照布局管理器和样式对dom树布局，生成对应的render树，用于描述各个节点布局渲染的各个属性，如某个dom节点的位置，大小，样式。 

步骤308，按照绘制消息格式将render树信息打包到消息中。 

步骤310，发送整个绘制消息给终端。 

请结合参看图4，本发明实施例插件处理流程如下： 

步骤402，页面信息中包含插件能力。 

步骤404，服务端插件处理模块解析并运行插件应用。 

步骤406，逐帧缓存插件运行结果的显示信息。 

步骤408，获取到帧缓存信息并转换成视频流。 

步骤410，发送视频流信息给终端。 

请结合参看图5，本发明实施例脚本处理流程包括以下步骤： 

步骤502，接收到终端发送过来的事件消息。 

步骤504，根据事件消息中携带的键值，位置等信息，遍历dom树，查找到对应的dom节点。 

步骤506，执行dom节点上注册的脚本。 

步骤508，如果脚本涉及更新节点信息，更新dom树上信息。 

步骤510，如果脚本涉及更新节点的布局样式等信息，更新render树上信息。 

步骤512，render树上更新的信息打包成页面绘制消息。 

步骤514，发送绘制消息到终端。 

本发明实施例的消息体可以按照如下格式进行定义，但这些定义格式不用以限定本发明。 

消息体定义： 

交互流程涉及三种不同的消息通信。 

第一，终端本地能力消息： 

用于请求终端本地能力或者携带终端本地能力信息给服务器端。 

消息头定义：请求消息和回复消息都使用该消息头。消息体定义请结合参看图12。 

参数定义： 

sequence：消息序列号，请求消息和回复消息应具有相同的序列号。 

Type：表示获取终端本地能力消息类型标识，区别于绘制消息和事件消息。 

CmdID：标识消息携带具体指令id，如getscreensize，getContactInfo 

msgType：type＝0表示是请求消息，type＝1表示是回复消息。 

Len：整个消息长度，长度大于5。 

消息体定义：请求客户端本地不同的信息，消息携带的消息体也不同。 

以获取屏幕信息为例，消息体中携带宽度和高度信息，其消息格式为：请结合参看图13。 

第二，页面绘制消息： 

消息定义：服务器端render树生成的过程就是布局管理器布局生成元素位置和大小的过程，render树描述了整个html文档中各个元素的布局，位置，大小和css样式，绘制消息负责将生成好的render树信息发送给客户端，为了节省带宽，一个消息体中可携带一个完整的render树信息或者render树片段，render树消息体以xml结构表示，绘制消息也可指示客户端缓存资源。 

绘制消息包含多种消息： 

New：一个全新的html页面对应的render树信息片段 

Add：在render树上某个节点添加了子节点信息片段 

Delete：删除render树上某个节点的子节点 

Update：更新某个节点的属性信息 

Save：保存图片等资源 

Clean：清除资源 

请结合参看图14。 

消息头定义请结合参看图15。 

参数描述： 

sequence：消息序列号 

Type：表示绘制消息类型 

pageId：关联的网页标识 

TLen：消息总长度； 

承载消息头定义请结合参看图16。 

参数描述 

cmdId：表示命令类型 

Len：消息长度 

承载消息体定义：消息类型不同消息体携带信息不同 

下面具体描述了New，Add，Delete，update，save，clean各个消息定义， 

New消息定义请结合参看图17。 

Add消息定义请结合参看图18。 

Delete消息定义请结合参看图19。 

Update消息定义请结合参看图20。 

Save/clean消息定义请结合参看图21。 

这些消息中的renderinfo表示了一个完整的render树信息或者render树片段，具体定义可见render信息定义。 

Render信息定义 

html中各个tag由不同的render结构进行描述。 

RenderObject所有render树节点的父类。 

RenderBlock描述div，p，body等容器标签。 

RenderButton对应html中input标签type为button时对应的Render树节点。 

RenderStyle定义一个renderobject所可能涉及的css属性数据，几乎包含css的所有属性项。 

RenderTable，RenderTableRow，RenderTableCol，RenderTableCell对应 html中标签table；RenderPartObject定义了html的embed/object等插件标签。 

绘制消息中携带的信息需要能够表达render树的结构，Render结构以xml方式存放，需要为每个tag对应的render结构定义其xml schema结构，一个render树信息片段如下： 

以renderImage为例描述其xml schema结构， 

第三，事件消息 

用于将客户端捕捉到的事件以消息发送到服务器，一个消息体可携带多个事件描述。请结合参看图22。 

消息头定义：请结合参看图23。 

参数描述： 

sequence：消息序列号； 

Type：表示事件消息类型标识，区别于绘制消息和获取终端本地能力消息； 

TLen：整个消息长度。 

单个事件消息体定义请结合参看图24。 

参数描述： 

eventID：标示事件，两种取值触摸事件ID或者是按键事件ID 

Len：单个事件消息长度，长度大于6。 

eventType：描述事件类型，可能是up，down。其中up标识上行，由终端发给服务器，down标识下行，由服务器发送给终端。 

keyvalue：触发事件的键值标识。 

positionX/Y：触发事件位置信息。 

以下以解析html页面为例说明整个页面的解析过程。 

解析流程见下： 

1.终端请求页面； 

2.服务器端从web服务器上获取到请求的页面； 

3.服务器向终端请求屏幕尺寸，假定屏幕尺寸为300*200，通过 getScreenSize(ID＝01)命令发起请求，假定消息序列号为11，终端本地能力消息类型为21，请求消息结构如图25所示。 

3.服务器接收终端返回的消息格式，如图26所示。 

4.服务器端解析页面，生成dom树，在根据布局管理器进行布局生成render树，服务器端发送绘制消息，消息格式如图27所示： 

Render info中携带了整个render树信息，格式见下： 

5.服务器发送页面绘制消息给终端。 

6.终端按照render信息描述调用绘制接口完成屏幕绘制。 

通过本发明实施例，服务器接收终端的页面请求后，获取终端的本地能力信息，服务器根据终端的能力信息对页面进行解析，简化了终端的实现，节省了终端的性能消耗和资源的占用，改善了用户的浏览体验。通过服务器处理页面的插件，解析视频流发送给终端，分担了终端对于视频流的解析能 力，缓解了终端的负载。通过终端对于捕捉的事件消息后发送给服务器，由服务器针对事件消息进行脚本处理，重新发送页面绘制消息给终端，终端重新绘制本地页面，使得服务器和终端设备合理的分担负载，有利于页面浏览的过程中系统处理效率的提升。 

请结合参看图6，本发明实施例服务器包括：接收模块602，终端能力获取模块604，布局解析模块606，绘制发送模块608。 

接收模块602，用于接收终端的页面浏览请求。终端能力获取模块604，用于在接收到页面浏览请求后，获取终端的本地能力信息。布局解析模块606，用于根据获取的终端的本地能力信息，解析请求页面生成页面绘制信息。绘制发送模块608，用于向终端发送页面绘制消息，和将更新后的render树打包成更新的页面绘制消息发送给终端。本发明实施例的服务器可执行上述方法中服务器的功能，不再赘述。 

本发明实施例服务器还可以包括：插件解析模块610，视频流传输模块612和事件解析模块614。插件解析模块610，用于解析页面的插件，捕获视频流。视频流传输模块612，用于发送视频流给终端。事件解析模块614，用于接收终端发送的事件消息，根据所述事件消息找到文档对象模型dom节点，执行所述dom节点上的注册脚本，更新dom树和渲染render树信息。。 

请结合参看图7，本发明实施例终端包括：请求发送模块702，接收模块704，信息上报模块706，页面绘制模块708。 

请求发送模块702，用于向服务器发送页面浏览请求。接收模块704，用于接收服务器返回的终端能力信息获取请求。信息上报模块706，用于处理终端能力获取请求，并向服务器发送终端的本地能力信息，如显示能力信息。页面绘制模块708，用于接收服务器返回的根据终端能力信息解析请求页面生成的页面绘制消息，并根据该页面绘制消息绘制本地页面。 

本发明实施例终端还可以包括：视频流处理模块710，用于接收服务器发送的视频流，解析该视频流。显示屏幕，用于显示播放解析后的视频流和页面。 

请结合参看图8，终端和服务器能力信息分布如下： 

系统主要由服务端和终端两部分构成。 

服务端：完成html页面解析布局和脚本解析，对生成的DOM树和Render树进行操作，只需要将布局后的Render树信息下发给终端。 

功能模块包括： 

加载解析模块，解析网页元素； 

布局模块，布局网页元素； 

脚本引擎； 

插件处理模块，处理插件应用并转换成终端可识别的信息； 

终端：根据布局后的Render树信息调用绘制接口在终端屏幕上完成绘制，终端将保留图片(bmp，png，gif，jpeg)解析能力，支持多种字体库，事件捕捉上报能力，终端本地能力。 

终端功能包括： 

本地能力，保留终端本地能力； 

渲染引擎，将传入的绘制消息绘制在终端，支持图片(bmp，png，gif，jpeg)和字体库的渲染和解析； 

插件处理，处理服务端插件模块返回结果； 

事件处理，负责事件捕捉和上报。 

本领域普通技术人员通过阅读本申请文件可知，上述方法中的全部或部分步骤可以通过程序指令相关的硬件完成，该程序可以是软件指令程序，可存储在一计算机可读存储介质中，该计算机可读存储介质，如ROM、RAM和光盘等。 

通过本发明实施例，服务器接收终端的页面请求后，获取终端的本地能力信息，服务器根据终端的能力信息对页面进行解析，简化了终端的实现，节省了终端的性能消耗和资源的占用，改善了用户的浏览体验。通过服务器处理页面的插件，解析视频流发送给终端，分担了终端对于视频流的解析能力，缓解了终端的负载。通过终端对于捕捉的事件消息后发送给服务器，由 服务器针对事件消息进行脚本处理，重新发送页面绘制消息给终端，终端重新绘制本地页面，使得服务器和终端设备合理的分担负载，有利于页面浏览的过程中系统处理效率的提升。 

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

Claims (14)

1.一种页面浏览方法，其特征在于，包括：

服务器接收终端的页面浏览请求后，获取所述终端的本地能力信息；

所述服务器根据所述获取的终端的本地能力信息，解析请求页面，生成页面绘制消息；

所述服务器将所述页面绘制消息下发给所述终端。

2.如权利要求1所述的方法，其特征在于，该方法还包括：

当所述服务器检测到所述请求页面包含插件时，所述服务器解析页面的插件，生成视频流，并发送给所述终端。

3.如权利要求1或2所述的方法，其特征在于，该方法还包括：

所述服务器接收所述终端发送的事件消息，根据所述事件消息找到文档对象模型dom节点，执行所述dom节点上的注册脚本，更新dom树和渲染render树信息；

所述服务器将更新后的render树打包成更新的页面绘制消息发送给所述终端。

4.如权利要求3所述的方法，其特征在于，所述更新的页面绘制消息包括携带一个完整的render树信息或render树更新片段信息。

5.如权利要求1所述的方法，其特征在于，所述终端的本地能力信息包括终端的显示能力信息。

6.如权利要求1所述的方法，其特征在于，所述获取所述终端的本地能力信息使用如图12所示的消息头定义的消息格式：其中，sequence表示消息序列号，请求消息和回复消息应具有相同的序列号，Type表示获取终端本地能力消息类型标识，cmdID表示标识消息携带具体指令id，msgType表示消息类型，Len表示整个消息长度。

7.一种页面浏览方法，其特征在于，包括：

终端向服务器发送页面浏览请求后，接收所述服务器返回的终端能力信息获取请求；

所述终端处理所述终端能力信息获取请求并向所述服务器发送所述终端的本地能力信息；

所述终端接收所述服务器返回的根据所述终端能力信息解析请求页面生成的页面绘制消息，并根据所述页面绘制消息绘制本地页面。

8.如权利要求7所述的方法，其特征在于，该方法还包括：当检测到所述请求页面包含插件时，所述终端接收所述服务器发送的视频流，解析所述视频流并在显示器上播放。

9.如权利要求7或8所述的方法，其特征在于，该方法还包括：所述终端捕捉本地的事件，并将所述事件消息发送给所述服务器；接收所述服务器根据解析所述事件消息后返回的更新的页面绘制消息；所述终端解析所述更新的页面绘制消息重新绘制本地页面。

10.一种服务器，其特征在于，包括：

接收模块，用于接收终端的页面浏览请求；

终端能力获取模块，用于在接收到所述页面浏览请求后，获取所述终端的本地能力信息；

布局解析模块，用于根据所述获取的终端的本地能力信息，解析请求页面生成页面绘制消息；

绘制发送模块，用于将所述页面绘制消息下发给所述终端。

11.如权利要求10所述的服务器，其特征在于，包括：

插件解析模块，用于解析页面的插件，生成视频流；

视频流传输模块，用于发送视频流给所述终端。 

12.如权利要求10或11所述的服务器，其特征在于，包括：

事件解析模块，用于接收所述终端发送的事件消息，根据所述事件消息找到文档对象模型dom节点，执行所述dom节点上的注册脚本，更新dom树和渲染render树信息；

所述绘制发送模块还用于将更新后的render树打包成更新的页面绘制消息发送给所述终端。

13.一种终端，其特征在于，包括：

请求发送模块，用于向服务器发送页面浏览请求；

接收模块，接收所述服务器返回的终端能力信息获取请求；

信息上报模块，用于处理所述终端能力信息获取请求并向所述服务器发送所述终端的本地能力信息；

页面绘制模块，用于接收所述服务器返回的根据所述终端能力信息解析请求页面生成的页面绘制消息，并根据所述页面绘制消息绘制本地页面。

14.如权利要求13所述的终端，其特征在于，包括：

视频流处理模块，用于接收所述服务器发送的视频流，解析所述视频流；

显示屏幕，用于播放所述解析后的视频流。 

Images