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

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

Info

Publication number
WO2012163122A1
WO2012163122A1 PCT/CN2012/071913 CN2012071913W WO2012163122A1 WO 2012163122 A1 WO2012163122 A1 WO 2012163122A1 CN 2012071913 W CN2012071913 W CN 2012071913W WO 2012163122 A1 WO2012163122 A1 WO 2012163122A1
Authority
WO
WIPO (PCT)
Prior art keywords
terminal
message
page
server
request
Prior art date
Application number
PCT/CN2012/071913
Other languages
English (en)
French (fr)
Inventor
贺光辉
张�杰
惠宇
王大为
Original Assignee
华为技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 华为技术有限公司 filed Critical 华为技术有限公司
Publication of WO2012163122A1 publication Critical patent/WO2012163122A1/zh

Links

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]

Definitions

  • the present invention relates to the field of communications technologies, and in particular, to a distributed browsing method, server, and terminal. Background technique
  • IPTV Internet Protocol Television
  • the terminal needs to perform web page parsing and web page caching, and the processing capability of the terminal is very high.
  • a page browsing method includes: after receiving a page browsing request of the terminal, the server acquires local capability information of the terminal; the server parses the request page according to the obtained local capability information of the terminal, and generates a page drawing message; The server sends the page drawing message to the terminal.
  • a page browsing method includes: after the terminal sends a page browsing request to the server, receiving a terminal capability information acquiring request returned by the server; the terminal processing the terminal capability information acquiring request, and sending the terminal to the server The local capability information; the terminal receives a page drawing message generated by the server according to the terminal capability information parsing page, and draws a local page according to the page drawing message.
  • a server comprising: a receiving module, configured to receive a page browsing request of the terminal; and a terminal capability acquiring module, configured to acquire a local capability of the terminal after receiving the page browsing request And a layout parsing module, configured to generate a page drawing message according to the local capability information of the obtained terminal, and parse the requesting page to generate a page drawing message, where the drawing sending module is configured to send the page drawing message to the terminal.
  • a terminal comprising: a request sending module, configured to send a page browsing request to a server; a receiving module, receiving a terminal capability information obtaining request returned by the server; and an information reporting module, configured to process the terminal capability information Obtaining a request and sending the local capability information of the terminal to the server; the page drawing module is configured to receive a page drawing message generated by the server according to the terminal capability information parsing request page, and draw a message according to the page Draw a local page.
  • the server after receiving the page request of the terminal, the server obtains the local capability information of the terminal, and the server parses the page according to the capability information of the terminal, and implements the implementation of the terminal, thereby saving performance consumption and resource occupation of the terminal. , improved user browsing experience.
  • the drawings, which are used in the description of the embodiments or the description of the prior art, are described in a single manner. It is obvious that the drawings in the following description are only some embodiments of the present invention, Those skilled in the art can also obtain other drawings based on these drawings without paying creative labor.
  • FIG. 1 is a flowchart of a page browsing method according to an embodiment of the present invention.
  • FIG. 2 is a signaling flowchart of a page browsing method according to an embodiment of the present invention.
  • FIG. 3 is a flowchart of a page parsing layout according to an embodiment of the present invention.
  • FIG. 4 is a flowchart of a plug-in process according to an embodiment of the present invention.
  • FIG. 5 is a flowchart of a script process according to an embodiment of the present invention.
  • FIG. 6 is a schematic structural diagram of a server according to an embodiment of the present invention.
  • FIG. 7 is a schematic structural diagram of a terminal according to an embodiment of the present invention.
  • FIG. 8 is a schematic diagram of distribution of capability information of a terminal server according to an embodiment of the present invention.
  • FIG. 9 is a schematic diagram of a portion of a webpage content code according to an embodiment of the present invention
  • FIG. 10 is a schematic diagram of node relationships in a do m tree according to an embodiment of the present invention.
  • FIG. 1 is a schematic diagram of attributes in a render tree according to an embodiment of the present invention.
  • FIG. 12 is a schematic diagram of a message body definition format according to an embodiment of the present invention.
  • FIG. 13 is a schematic diagram of a format of a message body for acquiring a screen capture information according to an embodiment of the present invention.
  • FIG. 14 is a schematic structural diagram of drawing a message according to an embodiment of the present invention.
  • FIG. 15 is a schematic diagram of a message structure definition according to an embodiment of the present invention.
  • FIG. 16 is a schematic diagram of a bearer header definition according to an embodiment of the present invention.
  • Figure 17 is a schematic diagram showing the definition of a New message according to an embodiment of the present invention.
  • Figure 18 is a schematic diagram of the definition of an Add message according to an embodiment of the present invention.
  • FIG. 19 is a schematic diagram of definition of a Delete message according to an embodiment of the present invention.
  • FIG. 20 is a schematic diagram of definition of an Update message according to an embodiment of the present invention.
  • FIG. 21 is a schematic diagram of a definition of a Save/clean message according to an embodiment of the present invention.
  • FIG. 22 is a schematic diagram of a message body carrying multiple events according to an embodiment of the present invention.
  • FIG. 23 is a schematic diagram of a message body definition according to an embodiment of the present invention.
  • FIG. 24 is a schematic diagram of a definition of a single event message body according to an embodiment of the present invention.
  • FIG. 25 is a schematic structural diagram of a request message according to an embodiment of the present invention.
  • FIG. 26 is a schematic diagram of a format of a message returned by a server receiving terminal according to an embodiment of the present invention.
  • FIG. 27 is a schematic diagram of the format of the entire render tree information carried in the Render info according to the embodiment of the present invention. detailed description
  • the web page contains html (Hyper Text Markup Language), JavaScript (JS, Java web scripting language), CSS (Cascading Style Sheets), 3D (three-dimensional, 3D graphics) and Various plug-in capabilities, more and more
  • html Hyper Text Markup Language
  • JavaScript Java web scripting language
  • CSS CSS
  • 3D three-dimensional, 3D graphics
  • the embedded browser only implements a subset or lower version of html, JS, CSS, and supports the layout.
  • does not support complex layout elements such as tables, frame frames
  • plug-in capabilities poor performance, poor performance
  • its development can not catch up with the development of web information analysis browser to parse the entire process of the web page, including the following step:
  • parsing html generates a dom (Document Object Model) tree, and the dom tree describes the node and node relationships of the entire web page. Please refer to Figure 10 in conjunction.
  • dom Document Object Model
  • the layout manager performs a layout rendering of the nodes on the dom tree to generate a render tree.
  • the render tree describes the position, size, and parsed CSS properties. See Figure 11.
  • the rendering engine is called to render on the display screen according to the render tree description and the drawing process of each render object.
  • the page browsing method of the embodiment of the present invention includes the following steps:
  • Step 102 After receiving the page browsing request of the terminal, the server acquires local capability information of the terminal.
  • Step 106 The server sends a page drawing message to the terminal.
  • the server after receiving the page request of the terminal, the server obtains the local capability information of the terminal, and the server parses the page according to the capability information of the terminal, and implements the implementation of the terminal, thereby saving performance consumption and resource occupation of the terminal. , improved user browsing experience.
  • the page browsing method of the embodiment of the present invention includes the following steps:
  • Step 202 The terminal sends a browsing request to the server during the page browsing process, requesting the page.
  • Step 204 The server obtains page information from a third-party web server.
  • Step 206 The server sends a message requesting local capability information of the terminal to the terminal, where the local capability information of the terminal includes display screen information of the terminal, such as resolution, stored phone book and the like.
  • Step 208 The terminal parses the message according to the message format and processes, and returns the local capability information to the server.
  • Step 212 The server packages the page to draw a message and sends a page drawing message to the terminal.
  • Step 214 The terminal parses the page drawing message and draws the webpage information onto the display screen according to the rendering method of the render node.
  • Step 216 If the webpage contains plug-in information, the server parses the plug-in application and caches it frame by frame, and then obtains the frame buffer information and converts it into a video stream.
  • Step 218 The server sends the converted video stream to the terminal.
  • Step 220 The terminal parses the video stream and displays the play.
  • Step 222 The terminal captures a local event.
  • Step 224 The terminal sends an event message to the server.
  • Step 226 the server finds the dom node according to the event message, executes the registration script on the node, and updates the don ⁇ rendep "information.
  • the terminal parses the updated page drawing message and draws it onto the real screen.
  • the page resolution layout of the embodiment of the present invention includes the following steps:
  • Step 302 The server obtains page information from the web server.
  • the parsing module is responsible for parsing the html data and generating a dom tree.
  • Step 306 The layout module is responsible for mapping the dom tree according to the layout manager and the style, and generating a corresponding render tree for describing each attribute of each node layout rendering, such as the position, size, and style of a dom node.
  • Step 308 Package the render tree information into the message according to the format of the drawn message.
  • Step 310 Send the entire drawing message to the terminal.
  • the page information includes a plug-in capability.
  • Step 404 the server plug-in processing module parses and runs the plug-in application.
  • Step 406 Cache the display information of the plug-in running result frame by frame.
  • Step 408 Acquire frame buffer information and convert it into a video stream.
  • Step 410 Send video stream information to the terminal.
  • the script processing procedure of the embodiment of the present invention includes the following steps:
  • Step 502 Receive an event message sent by the terminal.
  • Step 504 traverse the dom tree according to the key value, location, and the like carried in the event message, and find the corresponding dom node.
  • Step 506 executing a script registered on the dom node.
  • Step 508 if the script involves updating the node information, updating the information on the dom tree.
  • Step 510 If the script involves updating the layout style of the node and the like, update the information on the render tree.
  • Step 512 The updated information on the render tree is packaged into a page drawing message.
  • Step 514 sending a drawing message to the terminal.
  • the message body of the embodiment of the present invention may be defined in the following format, but these definition formats are not intended to limit the present invention.
  • the interaction process involves three different types of message communication.
  • Sequence The message sequence number, the request message and the reply message should have the same sequence number.
  • Type Indicates that the terminal local capability message type identifier is obtained, which is different from the drawing message and event message.
  • Len The length of the entire message, the length is greater than 5.
  • Message body definition Request different information locally from the client.
  • the message body carried by the message is also different. Taking the screen information as an example, the message body carries the width and height information, and the message format is: Please refer to FIG. 13 in combination.
  • the page draws the message: the process of setting and sizing, the render tree describes the layout, position, size and ess style of each element in the entire html document, and the drawing message is responsible for sending the generated render tree information to the client, in order to save Bandwidth, a message body can carry a complete render tree information or a render tree fragment.
  • the render tree message body is represented by an xml structure, and the drawing message can also indicate that the client caches resources.
  • a child node information fragment is added to a node in the render tree.
  • Delete delete the child node of a node on the render tree
  • Update Update the attribute information of a node
  • Type indicates the type of the drawn message
  • TLen total length of the message
  • Cmdld indicates the command type
  • Message length Bearer message body definition Message type different message body carrying information difference The following describes the message definitions of New, Add, Delete, update, save, clean,
  • the renderinfo in these messages represents a complete render tree information or a render tree slice that defines the visible render information definition.
  • Each tag in html is described by a different render structure.
  • RenderBlock describes container tags such as div, p, body.
  • the RenderButton corresponds to the Render tree node corresponding to the input tag type in the html.
  • RenderStyle defines the ess attribute data that may be involved in a renderobject, and contains almost all the attributes of ess.
  • RenderTable, RenderTableRow , RenderTableCol , RenderTableCell correspond to the tab table in html;
  • RenderPartObject defines the plugin label such as html embed/object.
  • the information carried in the message needs to be able to express the structure of the render tree.
  • the Render structure is stored in xml mode.
  • the xml schema structure needs to be defined for the render structure corresponding to each tag.
  • a render tree information fragment is as follows:
  • ⁇ /RenderObject> takes renderlmage as an example to describe its xml schema structure.
  • Type indicates the event message type identifier, which is different from drawing the message and obtaining the terminal local capability message.
  • eventlD flag event, two value touch event ID or button event ID
  • Len Single event message length, length greater than 6.
  • eventType Describes the event type, which may be up, down.
  • the up flag is sent to the server by the terminal, and the down flag is sent to the terminal by the server.
  • Key value The key value identifier that triggered the event.
  • positionX/Y Trigger event location information.
  • the resolution process is as follows:
  • the server obtains the requested page from the web server
  • the server receives the message format returned by the terminal, as shown in FIG.
  • the server side parses the page, generates a dom tree, generates a render tree according to the layout manager, and sends a drawing message on the server side.
  • the message format is as shown in Figure 27:
  • the Render info carries the entire render tree information, as shown in the following format:
  • the server sends a page to draw a message to the terminal.
  • the terminal calls the drawing interface to complete the screen drawing according to the render information description.
  • the server After receiving the page request of the terminal, the server obtains the local capability information of the terminal, and the server parses the page according to the capability information of the terminal, and implements the implementation of the terminal, thereby saving performance consumption and resource occupation of the terminal. Improved user browsing experience.
  • the parsing video stream is sent to the terminal, which shares the parsing ability of the terminal for the video stream, and relieves the load of the terminal.
  • the server processes the event message, resends the page drawing message to the terminal, and the terminal re-renders the local page, so that the server and the terminal device share the load reasonably, which is beneficial to page browsing. The efficiency of system processing in the process is improved.
  • the server of the embodiment of the present invention includes: a receiving module 602, a terminal capability acquiring module 604, a layout parsing module 606, and a drawing sending module 608.
  • the receiving module 602 is configured to receive a page browsing request of the terminal.
  • the terminal capability obtaining module 604 is configured to obtain local capability information of the terminal after receiving the page browsing request.
  • the layout parsing module 606 is configured to parse the request page to generate page drawing information according to the acquired local capability information of the terminal.
  • the drawing sending module 608 is configured to send a page drawing message to the terminal, and package the updated render tree into an updated page drawing message and send the message to the terminal.
  • the server of the embodiment of the present invention can perform the functions of the server in the foregoing method, and details are not described herein again.
  • the server of the embodiment of the present invention may further include: a plug-in parsing module 610, a video stream transmitting module 612, and an event parsing module 614.
  • the plugin parsing module 610 a plugin for parsing the page, captures the video stream.
  • the video stream transmission module 612 is configured to send a video stream to the terminal.
  • the event parsing module 614 is configured to receive an event message sent by the terminal, find a document object model dom node according to the event message, execute a registration script on the dom node, update the dom tree, and render the render tree information. .
  • the terminal of the embodiment of the present invention includes: a request sending module 702, a receiving module 704, an information reporting module 706, and a page drawing module 708.
  • the request sending module 702 is configured to send a page browsing request to the server.
  • the receiving module 704 is configured to receive a terminal capability information acquisition request returned by the server.
  • the information reporting module 706 is configured to process the terminal capability acquisition request, and send the terminal local capability information, such as display capability information, to the server.
  • the page drawing module 708 is configured to receive a page drawing message generated by the server according to the terminal capability information parsing request page, and draw a local page according to the page drawing message.
  • the terminal of the embodiment of the present invention may further include: a video stream processing module 710, configured to receive a video stream sent by the server, and parse the video stream. Display screen for displaying the parsed video stream and page.
  • a video stream processing module 710 configured to receive a video stream sent by the server, and parse the video stream. Display screen for displaying the parsed video stream and page.
  • terminal and server capability information is distributed as follows:
  • the system is mainly composed of two parts: the monthly service terminal and the terminal.
  • the server Completes the html page parsing layout and script parsing, and operates the generated DOM tree and the Render tree.
  • the Render Tree information after the layout is sent to the terminal.
  • a plug-in processing module that processes the plug-in application and converts it into information identifiable by the terminal
  • Terminal According to the Render Tree information after the layout, the drawing interface is called to complete drawing on the terminal screen.
  • the terminal will retain the image (bmp, png, gif, jpeg) resolution capability, support multiple font libraries, event capture and reporting capabilities, and terminal local capabilities.
  • Terminal features include:
  • the rendering engine draws incoming drawing messages on the terminal, supports rendering and parsing of images (bmp, png, gif, jpeg) and font libraries;
  • Plug-in processing processing the server plug-in module returns the result
  • Event processing responsible for event capture and reporting.
  • the server After receiving the page request of the terminal, the server obtains the local capability information of the terminal, and the server parses the page according to the capability information of the terminal, and implements the implementation of the terminal, thereby saving performance consumption and resource occupation of the terminal. Improved user browsing experience.
  • the parsing video stream is sent to the terminal, which shares the parsing ability of the terminal for the video stream, and relieves the load of the terminal.
  • the server processes the event message, resends the page drawing message to the terminal, and the terminal re-renders the local page, so that the server and the terminal device share the load reasonably, which is beneficial to page browsing. The efficiency of system processing in the process is improved.

Abstract

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

Description

一种页面浏览方法、 服务器和终端 技术领域
本发明涉及通信技术领域， 尤其涉及一种分布式浏览方法、 服务器和终 端。 背景技术
随着技术的发展和科技的进步， IPTV ( Internet Protocol Television, 网际 协议电视） 为用户带来了更多的宽带业务体验。 用户通过宽带网络能够观看 数字电视， 点播视频， 浏览网页等。 但传统的网页浏览解析时， 需要由终端 进行网页的解析和进行网页的緩存， 对终端的处理能力要求很高。 发明内容 有鉴于此， 有必要提供一种页面浏览方法， 来分担终端的处理能力消耗， 降低终端的性能消耗和资源占用。 一种页面浏览方法， 包括： 服务器接收终端的页面浏览请求后， 获取所 述终端的本地能力信息； 所述服务器根据所述获取的终端的本地能力信息， 解析请求页面， 生成页面绘制消息； 所述服务器将所述页面绘制消息下发给 所述终端。 一种页面浏览方法， 包括： 终端向服务器发送页面浏览请求后， 接收所 述服务器返回的终端能力信息获取请求； 所述终端处理所述终端能力信息获 取请求并向所述服务器发送所述终端的本地能力信息； 所述终端接收所述服 务器返回的根据所述终端能力信息解析页面生成的页面绘制消息， 并根据所 述页面绘制消息绘制本地页面。 一种服务器， 包括： 接收模块， 用于接收终端的页面浏览请求； 终端能 力获取模块， 用于在接收到所述页面浏览请求后， 获取所述终端的本地能力 信息； 布局解析模块， 用于根据所述获取的终端的本地能力信息， 解析请求 页面生成页面绘制消息； 绘制发送模块， 用于将所述页面绘制消息下发给所 述终端。 一种终端， 其特征在于， 包括： 请求发送模块， 用于向服务器发送页面 浏览请求； 接收模块， 接收所述服务器返回的终端能力信息获取请求； 信息 上报模块， 用于处理所述终端能力信息获取请求并向所述服务器发送所述终 端的本地能力信息； 页面绘制模块， 用于接收所述服务器返回的根据所述终 端能力信息解析请求页面生成的页面绘制消息， 并根据所述页面绘制消息绘 制本地页面。
同过本发明实施例， 服务器接收终端的页面请求后， 获取终端的本地能 力信息， 服务器根据终端的能力信息对页面进行解析， 筒化了终端的实现， 节省了终端的性能消耗和资源的占用， 改善了用户的浏览体验。 附图说明 、目 、 - ;、 、 ，。- 、 、 、 、 - 、 、 ；、 施例或现有技术描述中所需要使用的附图作一筒单地介绍， 显而易见地， 下 面描述中的附图仅仅是本发明的一些实施例， 对于本领域普通技术人员来讲， 在不付出创造性劳动性的前提下， 还可以根据这些附图获得其他的附图。
图 1为本发明实施例页面浏览方法流程图。
图 2为本发明实施例页面浏览方法信令流程图。
图 3为本发明实施例页面解析布局流程图。
图 4为本发明实施例插件处理流程图。
图 5为本发明实施例脚本处理流程图。
图 6为本发明实施例服务器结构示意图。
图 7为本发明实施例终端结构示意图。
图 8为本发明实施例终端服务器能力信息分布示意图。 图 9为本发明实施例网页内容代码部分示意图。
图 10为本发明实施例 do m树中节点关系示意图。
图 1 1为本发明实施例 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节点， 执行节点上的注册脚本， 更新 don ^ rendep "信息。
步骤 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, getContactlnfo msgType: type=0表示是请求消息， type=l表示是回复消息。
Len: 整个消息长度， 长度大于 5。
消息体定义： 请求客户端本地不同的信息， 消息携带的消息体也不同。 以获取屏幕信息为例， 消息体中携带宽度和高度信息， 其消息格式为: 请结合参看图 13。
第二， 页面绘制消息： 置和大小的过程， render树描述了整个 html文档中各个元素的布局， 位置， 大 小和 ess样式， 绘制消息负责将生成好的 render树信息发送给客户端， 为了节省 带宽， 一个消息体中可携带一个完整的 render树信息或者 render树片段， render 树消息体以 xml结构表示， 绘制消息也可指示客户端緩存资源。
绘制消息包含多种消息：
New ： 一个全新的 html页面对应的 render树信息片段
Add: 在 render树上某个节点添加了子节点信息片段
Delete: 删除 render树上某个节点的子节点
Update: 更新某个节点的属性信息
Save: 保存图片等资源
Clean: 清除资源 请结合参看图 14。 消息头定义请结合参看图 15。 参数描述：
sequence： 消息序歹 'J号
Type: 表示绘制消息类型
pageld: 关联的网页标识
TLen: 消息总长度； cmdld: 表示命令类型
Len: 消息长度 承载消息体定义： 消息类型不同消息体携带信息不同 下面具体描述了 New, Add, Delete, update, save, clean各个消息定义,
Figure imgf000010_0001
这些消息中的 renderinfo表示了一个完整的 render树信息或者 render树片 具体定义可见 render信息定义。
Render信息定义
html中各个 tag由不同的 render结构进行描述。
RenderObject所有 render才对节点的父类。
RenderBlock描述 div, p, body等容器标签。 RenderButton对应 html中 input标签 type为 button时对应的 Render树节点。 RenderStyle定义一个 renderobject所可能涉及的 ess属性数据， 几乎包含 ess 的所有属性项。
RenderTable, RenderTableRow , RenderTableCol , RenderTableCell对应 html 中标签 table; RenderPartObject定义了 html的 embed/object等插件标签。
绘制消息中携带的信息需要能够表达 render树的结构， Render结构以 xml 方式存放，需要为每个 tag对应的 render结构定义其 xml schema结构，一个 render 树信息片段如下：
<?xml version:" 1.0" encoding="ISO-8859-l"?>
<RenderObject id=m attrl=vl attr2=v2 attr3=v3 >
<RenderObject id=p attrl=vl attr2=v2>
</RenderObj ect>
<RenderObject id=q attrl=vl attr2=v2>
</RenderObj ect>
</RenderObject> 以 renderlmage为例描述其 xml schema结构 ,
<xs: ： element name:' 'renderlmage ">
<xs: ： attribute name: "id" type="xs:string"/>
<xs: ： attribute name: "x" type="xs: integer 7>
<xs: ： attribute name: "y" type="xs: integer 7>
<xs: ： attribute name: "width" type="xs: integer 7>
<xs: ： attribute name: "height" type="xs:integer"/>
<xs: ： attribute name: "marginLeft" type="xs:integer"/>
<xs: ： attribute name: "marginRight" type="xs:integer"/>
<xs: ： attribute name: "marginTop" type="xs:integer"/>
<xs: ： attribute name: "marginBottom" type="xs:integer"/> <xs: attribute name="paddingleft" type="xs:integer"/>
<xs: attribute name="paddingright" type="xs:integer"/>
<xs: attribute name="paddingtop" type="xs:integer"/>
<xs: attribute name="paddingbottom" type="xs:integer"/>
<xs: attribute name="url" type="xs:string"/>
<xs: attribute name="alttext" type="xs:string"/>
</xs:element>
第三， 事件消息
用于将客户端捕捉到的事件以消息发送到服务器， 一个消息体可携带多 个事件描述。 请结合参看图 22。
消息头定义： 请结合参看图 23。 参数描述：
sequence： 消息序歹 'J号；
Type: 表示事件消息类型标识， 区别于绘制消息和获取终端本地能力消 息；
TLen: 整个消息长度。
单个事件消息体定义请结合参看图 24。 参数描述：
eventlD: 标示事件， 两种取值触摸事件 ID或者是按键事件 ID
Len: 单个事件消息长度， 长度大于 6。
eventType: 描述事件类型， 可能是 up, down。 其中 up标识上行， 由终端 发给服务器， down标识下行， 由服务器发送给终端。
key value: 触发事件的键值标识。 positionX/Y: 触发事件位置信息。
以下以解析 html页面为例说明整个页面的解析过程。
<!DOCTYPE HTML PUBLIC "-/AV3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY style="background-color:#FFE4C4">
<label>picture show</label>
<div style="background-color:#CCCCCC;width=500px" >
<img src=" index l.png" align="bottom"/>
</div>
</BODY>
</HTML>
解析流程见下：
1.终端请求页面；
2.服务器端从 web服务器上获取到请求的页面；
3.服务器向终端请求屏幕尺寸，假定屏幕尺寸为 300*200 , 通过 getScreenSize(ID=01)命令发起请求， 假定消息序列号为 11 , 终端本地能力消 息类型为 21 , 请求消息结构如图 25所示。
3.服务器接收终端返回的消息格式， 如图 26所示。
4.服务器端解析页面，生成 dom树，在根据布局管理器进行布局生成 render 树， 服务器端发送绘制消息， 消息格式如图 27所示：
Render info中携带了整个 render树信息， 格式见下：
<?xml version:" 1.0" encoding="ISO-8859-l"?> <RenderView id= 11 , x=0 , y=0, width= 1280,height=600>
<RenderBlock id=12 ,x=0 , y=0, width: 1280,height=600,backgroudcolor=FFE4C4>
<RenderText id=13,x=0,y=0,width=130,height=30, text=pictureshow,textsize=12,textcolor=000000,textfamily=Arial>
</RenderText>
<RenderBlock id=14 ,x=0 , y=0,width=500,height=90,backgroudcolor=CCCCCC> <RenderImage id=15,x=0,y=0,width=90,height=90,url=indexl.png,paddingleft=0,paddingtop=0, marginLeft=0, margintop=0>
</RenderImage>
</RenderBlock>
</RenderBlock>
</RenderView>
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

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树和渲染 rende^ "信息；
所述绘制发送模块还用于将更新后的 render树打包成更新的页面绘制消息 发送给所述终端。
13.—种终端， 其特征在于， 包括：
请求发送模块， 用于向服务器发送页面浏览请求；
接收模块， 接收所述服务器返回的终端能力信息获取请求；
信息上报模块， 用于处理所述终端能力信息获取请求并向所述服务器发 送所述终端的本地能力信息；
页面绘制模块， 用于接收所述服务器返回的根据所述终端能力信息解析请 求页面生成的页面绘制消息， 并根据所述页面绘制消息绘制本地页面。
14.如权利要求 13所述的终端， 其特征在于， 包括：
视频流处理模块， 用于接收所述服务器发送的视频流， 解析所述视频流； 显示屏幕， 用于播放所述解析后的视频流。
PCT/CN2012/071913 2011-08-02 2012-03-05 一种页面浏览方法、服务器和终端 WO2012163122A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201110222396.0 2011-08-02
CN2011102223960A CN102916994A (zh) 2011-08-02 2011-08-02 一种页面浏览方法、服务器和终端

Publications (1)

Publication Number Publication Date
WO2012163122A1 true WO2012163122A1 (zh) 2012-12-06

Family

ID=47258350

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2012/071913 WO2012163122A1 (zh) 2011-08-02 2012-03-05 一种页面浏览方法、服务器和终端

Country Status (2)

Country Link
CN (1) CN102916994A (zh)
WO (1) WO2012163122A1 (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104714982A (zh) * 2013-12-17 2015-06-17 阿里巴巴集团控股有限公司 一种网页的加载方法和系统
CN104850388A (zh) * 2014-02-13 2015-08-19 腾讯科技（深圳）有限公司 网页绘制方法及装置
CN107835444A (zh) * 2017-11-16 2018-03-23 百度在线网络技术（北京）有限公司 信息交互方法、装置、音频终端及计算机可读存储介质

Families Citing this family (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2014146248A1 (zh) * 2013-03-19 2014-09-25 华为技术有限公司 一种应用于远程桌面的视频传输方法及设备、系统
EP3001385B1 (en) * 2014-09-29 2019-05-01 Agfa Healthcare A system and method for rendering a video stream
CN106155872B (zh) * 2015-03-26 2024-02-20 中兴通讯股份有限公司 一种信令跟踪结果处理方法及装置
CN105677282B (zh) * 2016-01-29 2019-04-26 腾讯科技（深圳）有限公司 一种图像绘制的方法、用户设备、服务器及系统
CN107807927B (zh) * 2016-09-08 2022-04-29 阿里巴巴（中国）有限公司 基于下发规则的页面解析方法、装置、客户端设备及系统
CN108182190A (zh) * 2016-12-08 2018-06-19 北京京东尚科信息技术有限公司 用于呈现网页、生成自适应网页的方法、装置及电子设备
CN108052539A (zh) * 2017-11-20 2018-05-18 烽火通信科技股份有限公司 一种浏览器页面切换方法及浏览器
CN108989429A (zh) * 2018-07-19 2018-12-11 平安科技（深圳）有限公司 实时更新页面数据的方法、装置、电子设备

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101202748A (zh) * 2007-11-27 2008-06-18 优视动景（北京）技术服务有限公司 一种微浏览器浏览网页的方法及微浏览器
US20100114720A1 (en) * 2008-10-31 2010-05-06 Yahoo! Inc. Dynamic in-page advertising
CN101873325A (zh) * 2010-06-13 2010-10-27 优视科技有限公司 Flash支持处理方法、系统、移动终端及中转服务器

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101202748A (zh) * 2007-11-27 2008-06-18 优视动景（北京）技术服务有限公司 一种微浏览器浏览网页的方法及微浏览器
US20100114720A1 (en) * 2008-10-31 2010-05-06 Yahoo! Inc. Dynamic in-page advertising
CN101873325A (zh) * 2010-06-13 2010-10-27 优视科技有限公司 Flash支持处理方法、系统、移动终端及中转服务器

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104714982A (zh) * 2013-12-17 2015-06-17 阿里巴巴集团控股有限公司 一种网页的加载方法和系统
CN104714982B (zh) * 2013-12-17 2018-11-27 阿里巴巴集团控股有限公司 一种网页的加载方法和系统
CN104850388A (zh) * 2014-02-13 2015-08-19 腾讯科技（深圳）有限公司 网页绘制方法及装置
CN104850388B (zh) * 2014-02-13 2018-05-22 腾讯科技（深圳）有限公司 网页绘制方法及装置
CN107835444A (zh) * 2017-11-16 2018-03-23 百度在线网络技术（北京）有限公司 信息交互方法、装置、音频终端及计算机可读存储介质
US10448082B2 (en) 2017-11-16 2019-10-15 Baidu Online Network Technology (Beijing) Co., Ltd. Information exchanging method and device, audio terminal and computer-readable storage medium

Also Published As

Publication number Publication date
CN102916994A (zh) 2013-02-06

Similar Documents

Publication Publication Date Title
WO2012163122A1 (zh) 一种页面浏览方法、服务器和终端
US9866612B2 (en) Server-based browser system
CN107766359B (zh) 一种将页面内容转换为图片的方法、装置以及计算设备
US9571556B2 (en) Browser kernel adaptation method and browser therefor
WO2012100701A1 (zh) 一种获取图文信息的装置、系统及方法
JP4811069B2 (ja) 情報提示装置、情報提示方法、及び情報提示処理プログラム
US20150189036A1 (en) Offline caching method and apparatus
EP2506518B1 (en) Service aggregation method dynamically assisted by client and server, server and client
US20120250081A1 (en) Terminal Device and Method for Controlling the Same
US10015284B2 (en) Method for browsing webpage picture and client device therefor
Lemlouma et al. Adapted content delivery for different contexts
US20160142466A1 (en) Output function dividing system
WO2013174080A1 (zh) 适用于多种显示类型的家庭网关的界面显示方法和系统
CN102694830A (zh) 一种实现网络内容分享的方法、系统和装置
WO2013152677A1 (zh) 资源共享方法及设备
JP2004220260A (ja) ウェブページ閲覧システム及び画像配信サーバ
US20150281334A1 (en) Information processing terminal and information processing method
CN103678317A (zh) 网页布局的自动适配方法与系统
CN107566436A (zh) 页面消息中心组件及消息实时推送方法和装置
AU2019101539A4 (en) Android-based image and text information feedback terminal system
CN114297544A (zh) 一种远程浏览方法、装置、设备及存储介质
CN112732457A (zh) 图像传输方法、装置、电子设备和计算机可读介质
CN107066106A (zh) 远端管理系统及其方法
US20060069790A1 (en) Content presentation adaptation
WO2017079893A1 (zh) 数据推送方法、系统及装置

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 12793457

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 12793457

Country of ref document: EP

Kind code of ref document: A1