WO2012072046A1 - 网页渲染方法、设备和系统 - Google Patents

网页渲染方法、设备和系统 Download PDF

Info

Publication number
WO2012072046A1
WO2012072046A1 PCT/CN2011/083450 CN2011083450W WO2012072046A1 WO 2012072046 A1 WO2012072046 A1 WO 2012072046A1 CN 2011083450 W CN2011083450 W CN 2011083450W WO 2012072046 A1 WO2012072046 A1 WO 2012072046A1
Authority
WO
WIPO (PCT)
Prior art keywords
server
rendering
webpage
mobile terminal
render
Prior art date
Application number
PCT/CN2011/083450
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 WO2012072046A1 publication Critical patent/WO2012072046A1/zh
Priority to US13/908,678 priority Critical patent/US20130275496A1/en
Priority to US13/908,714 priority patent/US20130268843A1/en

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • 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 computer technologies, and in particular, to a web page rendering method, device, and system. Background of the invention
  • the mobile browser In order to implement parsing and rendering of webpage tags, the mobile browser needs to store a set of parsing and rendering engine code in the memory, and the mobile browser needs to save the object variable and the like into the memory when rendering the webpage label, which may result in The memory of the mobile phone is heavily occupied.
  • the cpu frequency of the mobile phone is very low relative to the PC, which greatly slows down the execution speed of the webpage rendering.
  • the embodiment of the invention provides a webpage rendering method, device and system, so as to realize webpage rendering by the server end, and avoid the problem caused by webpage rendering by the mobile browser.
  • a method of rendering a web page the key is to set the rendering server on the server side in advance.
  • the rendering server sends a page accessed by the mobile terminal to a kernel (webcore), and the kernel renders the page to form a rendering tree;
  • the rendering server serializes the data information corresponding to the rendering object on the rendering tree, and sends a data sequence to the mobile terminal, and the mobile terminal performs a webpage rendering operation according to the received data sequence to implement webpage browsing.
  • a device for implementing webpage rendering by a server the device is disposed at a server, and the device includes:
  • a processing unit configured to send a page accessed by the mobile terminal to the kernel, where the kernel renders the page to form a rendering tree
  • a conversion unit configured to serialize data information corresponding to the rendering object on the rendering tree, and send a data sequence to the mobile terminal, where the mobile terminal performs a webpage rendering operation according to the received data sequence to implement webpage browsing.
  • a system for implementing web page rendering by a server comprising a kernel, a mobile terminal, and a device as described above.
  • the rendering server completes the rendering of the webpage, and returns the rendered result to the mobile browser, and the mobile browser performs the rendering operation according to the rendering result.
  • This obviously avoids the technical problems caused by the mobile browser's parsing and rendering of webpage tags, and reduces the pressure on the CPU, memory and network traffic of the mobile browser.
  • FIG. 1 is a basic flowchart of an embodiment of the present invention
  • FIG. 3 is a flowchart of step 210 according to an embodiment of the present invention.
  • FIG. 4 is a schematic diagram of a TLV encoding format
  • FIG. 5 is a schematic structural diagram of a device according to an embodiment of the present disclosure.
  • FIG. 6 is a detailed structural diagram of a device according to an embodiment of the present invention. Mode for carrying out the invention
  • the webpage rendering method provided by the embodiment of the present invention is mainly completed by the server, and returns the rendering result to the mobile phone browser, and the mobile browser performs the drawing operation according to the rendering result.
  • the pressure on the CPU, memory and network traffic of the mobile browser can be reduced.
  • FIG. 1 is a basic flowchart of an embodiment of the present invention. Before executing this process, you need to set up the rendering server (RenderServer) on the server side in advance. Based on this, as shown in FIG. 1, the process may include the following steps:
  • Step 101 The rendering server sends the page accessed by the mobile terminal to the kernel, and the kernel renders the page to form a rendering tree.
  • Step 102 The rendering server serializes data information corresponding to the rendering object on the rendering tree, and sends a data sequence to the mobile terminal, where the mobile terminal performs a webpage rendering operation according to the received data sequence to implement webpage browsing. .
  • the server side performs a webpage rendering function instead of a mobile terminal such as a mobile phone, and sends the rendering execution result to the mobile terminal, and the mobile terminal can directly connect according to the connection.
  • the received binary stream is drawn (similar to the existing drawing operation), so that the web page can be browsed smoothly.
  • This embodiment is mainly implemented by communication between a mobile terminal, such as a mobile phone and a server. For details, refer to the process shown in FIG. 2.
  • FIG. 2 is a detailed flowchart of an embodiment of the present invention. As shown in Figure 2, the process can include the following steps:
  • Step 201 The mobile phone sends a URL request to the forwarding server ( BrokerServer).
  • the BrokerServer sends the URL request to the kernel engine server (ChromeServer) through a page conversion server (SkeetServer).
  • BrokerServer and SkeetServer essentially pass the URL request to ChromeServer.
  • Step 203 The ChromeServer captures the webpage corresponding to the URL request, and obtains and stores the image information corresponding to the image label in the webpage to the database (DCache) by parsing the webpage, and executes the JS included in the webpage.
  • Step 204 the ChromeServer sends the parsed webpage to the SkeetServer.
  • Step 205 The SkeetServer determines whether the mobile phone that sends the URL request supports the parsed webpage, and if yes, performs step 206; otherwise, performs step 207.
  • Step 206 Send the parsed webpage to the BrokerServer. Then perform the steps
  • Step 207 Convert the parsed webpage into a webpage supported by the mobile phone, and send the webpage to the BrokerServer.
  • steps 205 to 207 are performed is mainly because most mobile phones currently only support wap2.0 web pages, and do not support www web pages on the Internet site, based on this, if this is true
  • the mobile phone that sent the URL request does not support the www webpage, and when the SkeetServer receives the www webpage, the www webpage needs to be converted into a wap2.0 webpage, and then sent to the BrokerServer.
  • the mobile phone that sends the URL request in this embodiment has a powerful function, and can support the wap2.0 webpage and the www webpage, when the SkeetServer receives the www webpage, the conversion operation is not required, and the The www page can be sent to the BrokerServer. It can be seen that the execution of steps 205 to 207 is mainly dependent on the function of the mobile phone.
  • Step 208 The BrokerServer receives the webpage sent by the SkeetServer, reads the image information from the DCache, inserts it into the image label corresponding to the image information on the webpage, and obtains the inserted webpage (recorded as the webpage 1), and then sends the webpage 1 To RenderServer.
  • Step 209 The RenderServer parses the received webpage 1 into a DOM tree, and sends the received webpage 1 to the kernel (webcore), and the webcore renders the webpage 1 to form a rendering tree.
  • the RenderServer can parse the received page into a DOM tree according to an existing parsing method.
  • Webcore can render the page received by the rendering server according to the existing rendering method to form a rendering tree.
  • Step 210 The RenderServer converts the data information corresponding to the rendered object on the rendering tree into a binary stream according to the DOM tree.
  • FIG. 3 is a flowchart of step 210 according to an embodiment of the present invention. As shown in Figure 3, the process can include the following steps:
  • Step 301 Obtain a Render object required by the mobile phone that sends the URL request from the rendering tree.
  • the rendering object required by the mobile terminal is at least: a RenderText object, a Renderlmage object, a control Render object, and a mobile phone that sends a URL request.
  • a logically related Render object or, for all Render objects on the render tree.
  • the Render object related to the logic of the mobile phone is at least a RenderView object (for storing the document page size, HTML Header element, etc.), a RenderBlock object (Form Form Element), and the like.
  • Step 302 Obtain the rendering information of the Render object for each Render object obtained, and obtain a DOM element corresponding to the Render object and an attribute of the DOM element on the DOM tree.
  • the Render object corresponds to at least one DOM element.
  • the rendering information of the Render object is mainly the style information used by the mobile phone to perform the drawing operation in step 213, and at least includes: the coordinate value, the width and height, the color, and the like of the Render object on the screen.
  • the rendering information of the Render object is obtained, and the DOM element corresponding to the Render object and the attribute of the DOM element are obtained on the DOM tree, and the main purpose is to perform the drawing operation of step 213.
  • the rendering information of the Render object contains the coordinates, width, height, and color of the Render object on the screen.
  • Step 303 the obtained rendering information, the DOM element, and the attribute of the DOM element Binary encoding is performed separately to obtain a binary stream.
  • step 303 the rendering information, the DOM element, and the attributes of the DOM element are separately encoded in binary according to the Tag-Length-Value (TLV) encoding format shown in FIG. 4.
  • TLV Tag-Length-Value
  • Tag means that the flag bit uses a variable length variable, which itself occupies 1 to 2 bytes. If the value of the information to be encoded (such as rendering information, DOM element or attribute of the DOM element) is from 0 to 254, a single byte is used; if the value is 255 or above, the first byte is OxFF The second byte is (the value of the information to be encoded is -255).
  • Length is the length of the binary stream carried in the Value field. Value carries a binary stream, and the length is determined by the Length field, which can itself be a number or a string.
  • Step 211 Add a file identifier and a version number corresponding to the binary stream to the front or the rear of the obtained binary stream for identifying the binary stream, and send it to the BrokerServer through the SkeetServer.
  • the file identifier and the version number each occupy a field, for example, 0x54, 0x51, 0x42, 0x4C, 0x00, 0x01, and the like.
  • Step 212 The BrokerServer performs the WUP protocol packet and compression on the received binary stream, and sends the packet to the mobile phone that sends the URL request.
  • Step 213 The mobile phone that sends the URL request obtains a binary stream by parsing the WUP protocol group packet, and performs a drawing operation according to the binary stream to implement webpage browsing.
  • the mobile phone only performs the drawing operation and does not perform the webpage rendering work, which can avoid the technical problems caused by the mobile browser's parsing and rendering of the webpage label, such as Reduce the pressure on the CPU, memory and network traffic of your mobile browser.
  • the method provided by the embodiment of the present invention is described above.
  • the device and system provided by the embodiment of the present invention are described below.
  • FIG. 5 is a basic structural diagram of a device according to an embodiment of the present invention. Device settings are on the server side. As shown in Figure 5, the device includes:
  • the processing unit 501 is configured to send a page accessed by the mobile terminal to the kernel, where the kernel renders the page to form a rendering tree.
  • the converting unit 502 is configured to serialize data information corresponding to the rendering object on the rendering tree, and send a data sequence to the mobile terminal, where the mobile terminal performs a webpage rendering operation according to the received data sequence to implement webpage browsing.
  • FIG. 6 is a detailed structural diagram of a device according to an embodiment of the present invention.
  • the device may include: a processing unit 601 and a converting unit 602, wherein the functions of the processing unit 601 and the converting unit 602 are similar to those of the processing unit 501 and the converting unit 502, respectively, and are not detailed here. .
  • the processing unit further parses the page accessed by the mobile terminal into a DOM tree.
  • the converting unit 602 can include:
  • the first obtaining sub-unit 6021 is configured to obtain, from the rendering tree, a rendered Render object that is required by the mobile terminal.
  • the rendering object required by the mobile terminal is: a RenderText object, a Renderlmage object, and at least one control.
  • a second obtaining sub-unit 6022 configured to obtain rendering information of the Render object for each obtained Render object, and obtain a DOM element corresponding to the Render object and an attribute of the DOM element on the DOM tree;
  • the encoding sub-unit 6023 is configured to binary-encode the obtained rendering information, the DOM element, and the attribute of the DOM element to obtain a binary stream.
  • the embodiment of the present invention further provides a system for implementing webpage rendering by a server, wherein the system may include a webcore, a mobile terminal such as a mobile phone, and a device as described in FIG. 5 or 6.
  • system further includes: a ChromeServer, a DCache, and a BrokerServer;
  • the Chrome server is configured to capture an original webpage corresponding to the URL request sent by the mobile terminal, and obtain and store the image information corresponding to the image label in the original webpage to the database by parsing the original webpage, and execute The original webpage includes the JS, and sends the parsed webpage to the BrokerServer;
  • the broker server is configured to: after receiving the webpage, read the picture information from the database, insert it into the picture label corresponding to the picture information in the webpage, obtain the page, and then send the page to the The processing unit in the device.
  • the server side further includes a SkeetServer connected between the ChromeServer and the BrokerServer;
  • the device sends the binary stream to the forwarding server through a page conversion server, and the forwarding server sends the received binary stream to the mobile terminal by performing WUP protocol grouping and compression.
  • the mobile terminal obtains a binary stream by parsing the WUP protocol group packet, and performs a webpage drawing operation according to the binary stream.
  • the server performs rendering of the webpage by the rendering server, and returns the rendered result to a browser on the mobile terminal, such as a mobile phone, and the mobile browser performs a drawing operation according to the rendering result.

Abstract

本发明实施例提供了网页渲染方法、设备和系统，其中，所述服务器端包含内核；该方法包括：预先在服务器端设置渲染服务器RenderServer；所述渲染服务器将接收的页面解析成DOM树，并将接收的页面发送至所述内核，由所述内核对所述页面进行渲染，形成渲染树；所述渲染服务器依据所述DOM树将所述渲染树上渲染对象对应的数据信息转换为二进制流，并下发给移动终端，由所述移动终端依据接收的二进制流执行绘制操作，以实现网页浏览。采用本发明，能够避免由手机浏览器对网页标签进行解析渲染所带来的技术问题。

Description

网页渲染方法、 设备和系统 技术领域
本发明涉及计算机技术领域，特别涉及网页渲染方法、设备和系统。 发明背景
随着 3G技术的推广、 以及移动电话价格和入网费用的降低， 人们 对于手机上网的需求， 逐渐的从访问筒单以文本为主的 Wap网页， 转向 了直接访问互联网网站， 以获取更加丰富的内容。 目前， 手机直接访问 互联网时， 互联网页面都是返回网页标签给手机浏览器， 由手机浏览器 对网页标签进行解析渲染， 最后完成绘制显示。
但是， 由于手机和 PC相比， 最重要区别是手机的内存容量小、 cpu 主频低、 网络传输速度慢、 费用高。 如果由手机浏览器对网页标签进行 解析渲染， 这会存在以下问题：
1 ) 占用内存太大
手机浏览器为了实现对网页标签进行解析渲染， 需要在内存中存储 一整套的解析渲染引擎代码， 并且， 手机浏览器在对网页标签进行渲染 时，需要保存对象变量等至内存中，这会导致手机内存空存被大量占用。
2 ) 执行速度慢
由于网页的渲染是涉及到大量的计算，而手机的 cpu主频相对于 PC 来说是非常低的， 这大大减慢了网页渲染的执行速度。
3 ) 网络速度太慢
由于手机相对于 PC , 无线网络的传输速率较低， 而互联网上的网页 数据往往尺寸较大， 需要花费很长的时间才能传输到手机。 发明内容
本发明实施例提供了网页渲染方法、 设备和系统， 以实现由服务器 端完成网页渲染， 避免由手机浏览器进行网页渲染所带来的问题。
本发明实施例提供的技术方案包括：
一种网页渲染方法， 关键在于， 预先在服务器端设置渲染服务器
( RenderServer ); 该方法包括：
A, 所述渲染服务器将移动终端访问的页面发送至内核（webcore ), 由所述内核对所述页面进行渲染， 形成渲染（Render )树；
B , 所述渲染服务器将所述渲染树上渲染对象对应的数据信息序列 化， 并下发数据序列给移动终端， 由所述移动终端依据接收的数据序列 执行网页绘制操作， 以实现网页浏览。
一种由服务器端实现网页渲染的设备， 所述设备设置在服务器端， 所述设备包括：
处理单元， 用于将移动终端访问的页面发送至内核， 由所述内核对 所述页面进行渲染， 形成渲染树；
转换单元， 用于将所述渲染树上渲染对象对应的数据信息序列化， 并下发数据序列给移动终端， 由所述移动终端依据接收的数据序列执行 网页绘制操作， 以实现网页浏览。
一种由服务器端实现网页渲染的系统， 该系统包括内核、 移动终端 和如上所述的设备。
由以上技术方案可以看出， 本发明中， 通过在服务器端增加渲染服 务器， 由该渲染服务器完成网页的渲染， 并将渲染的结果返回给手机浏 览器， 由手机浏览器根据渲染结果执行绘制操作。 这显然能够避免由手 机浏览器对网页标签进行解析渲染所带来的技术问题， 降低手机浏览器 的 CPU、 内存和网络流量的压力。 附图简要说明
图 1为本发明实施例提供的基本流程图；
图 2为本发明实施例提供的详细流程图；
图 3为本发明实施例提供的步骤 210的流程图；
图 4为 TLV编码格式示意图；
图 5为本发明实施例提供的设备基本结构图；
图 6为本发明实施例提供的设备详细结构图。 实施本发明的方式
本发明实施例提供的网页渲染方法主要是由服务器端完成， 并将渲 染结果返回给手机浏览器， 由手机浏览器根据渲染结果执行绘制操作。 这相比于现有技术依靠手机浏览器完成网页渲染的方法， 能够降低手机 浏览器的 CPU、 内存和网络流量的压力。
为了使本发明的目的、 技术方案和优点更加清楚， 下面结合附图和 具体实施例对本发明进行详细描述。
参见图 1 , 图 1为本发明实施例提供的基本流程图。 在执行该流程 之前， 需要预先在服务器端设置渲染服务器（RenderServer )。 基于此， 如图 1所示， 该流程可包括以下步骤：
步骤 101 , 所述渲染服务器将移动终端访问的页面发送至内核， 由 所述内核对所述页面进行渲染， 形成渲染树。
步骤 102, 所述渲染服务器将所述渲染树上渲染对象对应的数据信 息序列化， 并下发数据序列给移动终端， 由所述移动终端依据接收的数 据序列执行网页绘制操作， 以实现网页浏览。
也就是说， 本发明中， 服务器端代替移动终端比如手机执行网页渲 染功能， 并将渲染执行结果发送给移动终端， 移动终端即可直接根据接 收的二进制流进行绘制操作 （具体可与现有绘制操作类似）， 如此， 即 可流畅的浏览网页。
至此， 完成图 1所示的流程。
下面对本发明实施例进行详细描述。
该实施例主要是由移动终端比如手机与服务器端之间的通信来完 成的， 具体可参见图 2所示的流程。
参见图 2, 图 2为本发明实施例提供的详细流程图。 如图 2所示， 该流程可包括以下步骤：
步骤 201 , 手机发送 URL请求给转发服务器（ BrokerServer )。 步骤 202, BrokerServer通过页面转换服务器（ SkeetServer )将所述 URL请求发送给内核引擎服务器（ ChromeServer )。
可以看出， 在步骤 202中， BrokerServer和 SkeetServer实质上是将 URL请求透传给 ChromeServer。
步骤 203 , ChromeServer抓取所述 URL请求对应的网页，通过解析 所述网页获取并存储所述网页中图片标签对应的图片信息至数据库 ( DCache ) , 以及执行所述网页包含的 JS。
步骤 204 , ChromeServer发送解析后的网页至 SkeetServer。
步骤 205 , SkeetServer判断发送所述 URL请求的手机是否支持所述 解析后的网页， 如果是， 执行步骤 206; 否则， 执行步骤 207。
步骤 206,将所述解析后的网页发送至 BrokerServer。之后执行步骤
208。
步骤 207, 将所述解析后的网页转换为所述手机支持的网页， 并发 送至 BrokerServer„
之所以执行步骤 205至步骤 207 , 主要是因为目前大多数手机仅支 持 wap2.0网页， 并不支持互联网站上的 www网页， 基于此， 如果本实 施例中发送了 URL请求的手机不支持 www网页， 则在 SkeetServer接 收到 www网页时， 就需要将该 www网页转换为 wap2.0网页， 之后发 送至 BrokerServer。 当然， 如果本实施例中发送了 URL请求的手机具有 强大的功能，即可支持 wap2.0网页，又支持 www网页，则在 SkeetServer 接收到 www网页时， 就不需要执行转换操作， 直接将该 www网页发送 至 BrokerServer即可。 可以看出， 步骤 205至步骤 207的执行主要是依 赖于手机的功能。
步骤 208, BrokerServer接收 SkeetServer发送的网页， 从 DCache 中读取图片信息， 插入至该网页上对应该图片信息的图片标签处， 得到 插入后的网页 （记为网页 1 ), 之后将该网页 1发送至 RenderServer。
步骤 209, RenderServer将接收的网页 1解析成 DOM树， 并将接收 的网页 1发送至内核（ webcore ), 由 webcore对网页 1进行渲染， 形成 渲染树。
本步骤 209中， RenderServer可按照现有解析方法将接收的页面解 析成 DOM树。 webcore可按照现有渲染方法将渲染服务器接收的页面 进行渲染， 形成渲染树。
步骤 210, RenderServer依据 DOM树将所述渲染树上渲染对象对应 的数据信息转换为二进制流。
本步骤 210中的具体操作可参见图 3所示的流程：
参见图 3 , 图 3为本发明实施例提供的步骤 210的流程图。 如图 3 所示， 该流程可包括以下步骤：
步骤 301 ,从渲染树上获取发送了 URL请求的手机所需要的 Render 对象。
本实施例中， 移动终端需要的渲染对象至少为： RenderText对象、 Renderlmage对象、 控件 Render对象、 以及与发送了 URL请求的手机 逻辑相关的 Render对象； 或者， 为所述渲染树上所有的 Render对象。 其中， 与手机逻辑相关的 Render对象至少为 RenderView对象（用 于存放文档页面大小、 HTML Head标签元素等）， RenderBlock对象 ( Form表单元素 )等。
通过获取手机所需要的 Render对象，能够过滤掉其他一些不必要的 Render对象， 这可在后续发送 Render对象时节省流量。
步骤 302, 针对获取的每一 Render对象， 获取该 Render对象的渲 染信息， 以及在所述 DOM树上获取该 Render对象对应的 DOM元素和 该 DOM元素的属性。
通常， Render对象至少对应一个 DOM元素。
其中， Render对象的渲染信息主要为手机在步骤 213执行绘制操作 时用到的样式信息， 至少包括： Render对象在屏幕上的坐标值和宽高， 颜色等。
DOM元素和该 DOM元素的属性具体定义可与现有技术中的定义 类似， 这里不再赘述。
本实施例中， 获取 Render对象的渲染信息， 以及在所述 DOM树上 获取该 Render对象对应的 DOM元素和该 DOM元素的属性， 主要目的 是为了步骤 213的绘制操作。 以 Render对象的渲染信息包含 Render对 象在屏幕上的坐标值、 宽高和颜色， DOM元素的标签是 <A>标签， 属性 为 href=http：〃 www.qq.com为例， 则当手机在步骤 213得到该渲染信息、 DOM元素和该 DOM元素的属性时， 由于有位置，颜色和文本等信息就 知道该怎么进行绘制， 而且也知道点击该元素时进行的响应操作， 因为 有其标签属性为 <a>, 同时也知道该跳转到什么网页， 因为有属性 href=，，http：〃 www.qq.com"。
步骤 303 , 将获取的渲染信息、 DOM元素和该 DOM元素的属性 分别进行二进制编码， 得到二进制流。
本步骤 303可按照图 4所示的 Tag-Length- Value(TLV)编码格式分别 对渲染信息、 DOM元素和该 DOM元素的属性进行二进制编码。 在图 4 中， Tag是指标志位使用可变长度变量， 本身占用 1到 2个字节。 如果 待编码的信息（比如渲染信息、 DOM元素或者该 DOM元素的属性）的 值是从 0到 254的， 则使用单个字节； 如果值为 255或者以上的， 则第 一个字节为 OxFF, 第二个字节为（该待编码的信息的值 -255)。 Length是 指 Value字段中承载的二进制流的长度。 Value承载了二进制流， 长度由 Length字段决定， 该二进制流本身可以为数字或者字符串。 通过二进制 编码， 能够大大减少服务器端和手机之间的流量传输压力。
至此， 完成了图 3所示的流程。
步骤 211 , 在该得到的二进制流的前部或者后部增加对应该二进制 流的文件标识和版本号， 以供识别该二进制流， 并通过 SkeetServer发送 至 BrokerServer„
其中， 文件标识和版本号各占一个字段， 例如， 0x54, 0x51 , 0x42, 0x4C, 0x00, 0x01等。
步骤 212, BrokerServer将接收的二进制流进行 WUP协议组包和压 缩， 下发给发送了 URL请求的手机。
步骤 213 , 所述发送了 URL请求的手机通过解析 WUP协议组包得 到二进制流， 依据该二进制流执行绘制操作， 以实现网页浏览。
本步骤 213的绘制操作可与现有技术类似， 这里不再赘述。
至此， 完成了图 2所示的流程。 从图 2所示的流程可以看出， 采用 本发明中， 手机仅执行绘制操作， 不再执行网页渲染工作， 这能够避免 由手机浏览器对网页标签进行解析渲染所带来的技术问题， 比如降低手 机浏览器的 CPU、 内存和网络流量的压力等。 以上对本发明实施例提供的方法进行了描述， 下面对本发明实施例 提供的设备和系统进行描述。
参见图 5 , 图 5为本发明实施例提供的设备基本结构图。 设备设置 在服务器端。 如图 5所示， 该设备包括：
处理单元 501 , 用于将移动终端访问的页面发送至内核， 由所述内 核对所述页面进行渲染， 形成渲染树；
转换单元 502, 用于将所述渲染树上渲染对象对应的数据信息序列 化， 并下发数据序列给移动终端， 由所述移动终端依据接收的数据序列 执行网页绘制操作， 以实现网页浏览。
以上对本发明实施例提供的设备进行了筒单描述， 下面对该设备进 行详细描述。
参见图 6, 图 6为本发明实施例提供的设备详细结构图。 如图 6所 示， 该设备可包括： 处理单元 601和转换单元 602, 其中， 处理单元 601 和转换单元 602具有的功能分别与处理单元 501和转换单元 502具有的 功能类似， 这里不再详述。
优选地， 所述处理单元进一步将所述移动终端访问的页面解析成 DOM树。 基于此， 如图 6所示， 转换单元 602可包括：
第一获取子单元 6021 ,用于从所述渲染树上获取所述移动终端需要 的渲染 Render对象； 本实施例中， 所述移动终端需要的渲染对象为： RenderText对象、 Renderlmage对象、 至少一个控件 Render对象、 以及 与所述移动终端逻辑相关的 Render对象； 或者， 为所述渲染树上所有的 Render对象。
第二获取子单元 6022, 用于针对获取的每一 Render对象， 获取该 Render对象的渲染信息，以及在所述 DOM树上获取该 Render对象对应 的 DOM元素和该 DOM元素的属性； 编码子单元 6023 , 用于将获取的渲染信息、 DOM元素和该 DOM 元素的属性进行二进制编码， 得到二进制流。
本发明实施例还提供了由服务器端实现网页渲染的系统， 其中， 该 系统可包括 webcore、 移动终端比如手机和如图 5或图 6所述的设备。
本实施例中， 所述系统还包括： ChromeServer、 DCache 和 BrokerServer;
其中， 所述 ChromeServer, 用于抓取所述移动终端发送的 URL请 求对应的原始网页， 通过解析所述原始网页获取并存储所述原始网页中 图片标签对应的图片信息至所述数据库， 以及执行所述原始网页包含的 JS , 并向 BrokerServer发送解析后的网页；
所述 BrokerServer, 用于接接收到网页后， 从所述数据库读取图片 信息，并插入至该网页中对应该图片信息的图片标签处，得到所述页面， 之后将所述页面发送至所述设备中的处理单元。
优选地， 所述服务器端还包括连接在所述 ChromeServer 和所述 BrokerServer之间的 SkeetServer;
所述 SkeetServer接收所述 ChromeServer发送的解析后的网页， 并 判断所述移动终端是否支持所述网页， 如果否， 则将所述解析后的网页 转换为所述移动终端支持的网页， 并转发至所述 BrokerServer, 如果是， 将所述解析后的网页转发至所述 BrokerServer。
优选地， 所述设备通过页面转换服务器发送所述二进制流至所述转 发服务器， 所述转发服务器将接收的二进制流进行 WUP协议组包和压 缩， 下发给移动终端；
所述移动终端通过解析 WUP协议组包得到二进制流， 依据该二进 制流执行网页绘制操作。
由以上技术方案可以看出， 本发明中， 通过在服务器端增加渲染服 务器， 由该渲染服务器完成网页的渲染， 并将渲染的结果返回给移动终 端比如手机上的浏览器， 由手机浏览器根据渲染结果执行绘制操作。 这 显然能够避免由手机浏览器对网页标签进行解析渲染所带来的技术问 题， 降低手机浏览器的 CPU、 内存和网络流量的压力。
以上所述仅为本发明的较佳实施例而已， 并不用以限制本发明， 凡 在本发明的精神和原则之内， 所做的任何修改、 等同替换、 改进等， 均 应包含在本发明保护的范围之内。

Claims

权利要求书
1、 一种网页渲染方法， 其特征在于， 预先在服务器端设置渲染服务 器 RenderServer； 该方法包括：
A, 所述渲染服务器将移动终端访问的页面发送至内核 webcore, 由 所述内核对所述页面进行渲染， 形成渲染 Render树；
B , 所述渲染服务器将所述渲染树上渲染对象对应的数据信息序列 化， 并下发数据序列给移动终端， 由所述移动终端依据接收的数据序列 执行网页绘制操作， 以实现网页浏览。
2、 根据权利要求 1所述的方法， 其特征在于， 步骤 A进一步包括： 所述渲染服务器将所述移动终端访问的页面解析成 DOM树； 所述渲染服务器将渲染树上渲染对象对应的数据信息序列化包括： 从所述渲染树上获取所述移动终端需要的渲染对象；
针对获取的每一 Render对象， 获取该 Render对象的渲染信息， 以 及在所述 DOM树上获取该 Render对象对应的 DOM元素和该 DOM元 素的属性；
将获取的渲染信息、 DOM元素和该 DOM元素的属性分别进行二进 制编码， 得到二进制流。
3、根据权利要求 2所述的方法， 其特征在于， 所述移动终端需要的 渲染对象至少为： RenderText对象、 Renderlmage对象、 控件 Render对 象、 以及与所述移动终端逻辑相关的 Render对象，或者为所述渲染树上 所有的 Render对象。
4、根据权利要求 2所述的方法， 其特征在于， 所述二进制编码是按 照 TLV编码格式执行的；
该方法进一步包括： 在该得到的二进制流的前部或者后部增加对应 该二进制流的文件标识和版本号， 以供识别该二进制流。
5、根据权利要求 2至 4任一所述的方法， 其特征在于， 所述服务器 端还包括： 内核引擎服务器 ChromeServer、 数据库 DCache和转发服务 器 BrokerServer; 在步骤 A之前， 进一步包括：
所述内核引擎服务器抓取所述移动终端发送的 URL请求对应的网 页， 通过解析所述网页获取并存储所述网页中图片标签对应的图片信息 至所述数据库， 以及执行所述原始网页包含的 JS , 并向所述转发服务器 发送解析后的网页；
所述转发服务器接收到网页后， 从所述数据库读取图片信息， 并插 入至该网页中对应该图片信息的图片标签处， 得到并发送所述移动终端 访问的页面至所述渲染服务器。
6、根据权利要求 5所述的方法， 其特征在于， 所述服务器端还包括 连接在所述内核引擎服务器和所述转发服务器之间的页面转换服务器 SkeetServer;
所述内核引擎服务器向所述转发服务器发送解析后的网页包括： 所述内核引擎服务器向所述转发服务器发送的解析后的网页； 当所述页面转换服务器接收到所述解析后的网页时， 判断所述移动 终端是否支持该解析后的网页， 如果否， 则将该解析后的网页转换为所 述移动终端支持的网页， 并转发至所述转发服务器， 如果是， 将所述解 析后的网页转发至所述转发服务器。
7、根据权利要求 6所述的方法， 其特征在于， 所述渲染服务器下发 数据序列给移动终端包括： 所述渲染服务器通过页面转换服务器发送所 述二进制流至所述转发服务器， 所述转发服务器将接收的二进制流进行 WUP协议组包和压缩， 下发给移动终端；
所述移动终端对接收的数据序列执行绘制操作包括： 移动终端通过解析 WUP协议组包得到二进制流， 依据该二进制流 执行网页绘制操作。
8、 一种由服务器端实现网页渲染的设备， 其特征在于， 所述设备设 置在服务器端， 包括：
处理单元， 用于将移动终端访问的页面发送至内核 webcore, 由所 述内核对所述页面进行渲染， 形成渲染 Render树；
转换单元， 用于将所述渲染树上渲染对象对应的数据信息序列化， 并下发数据序列给移动终端， 由所述移动终端依据接收的数据序列执行 网页绘制操作， 以实现网页浏览。
9、根据权利要求 8所述的设备， 其特征在于， 所述处理单元进一步 将所述移动终端访问的页面解析成 DOM树；
所述转换单元包括：
第一获取子单元， 用于从所述渲染树上获取所述移动终端需要的渲 染 Render对象；
第二获取子单元，用于针对获取的每一 Render对象，获取该 Render 对象的渲染信息，以及在所述 DOM树上获取该 Render对象对应的 DOM 元素和该 DOM元素的属性；
编码子单元， 用于将获取的渲染信息、 DOM元素和该 DOM元素的 属性进行二进制编码， 得到二进制流。
10、 根据权利要求 9所述的设备， 其特征在于， 所述移动终端需要 的渲染对象为： RenderText对象、 Renderlmage对象、控件 Render对象、 以及与所述移动终端逻辑相关的 Render对象； 或者， 为所述渲染树上所 有的 Render对象。
11、 一种由服务器端实现网页渲染的系统， 其特征在于， 该系统包 括内核 webcore、 移动终端和如权利要求 8至 10任一所述的设备。
12、 根据权利要求 11所述的系统， 其特征在于， 所述系统还包括： 内核引擎服务器 ChromeServer、 数据库 DCache 和转发服务器 BrokerServer;
所述内核引擎服务器，用于抓取所述移动终端发送的 URL请求对应 的原始网页， 通过解析所述原始网页获取并存储所述原始网页中图片标 签对应的图片信息至所述数据库， 以及执行所述原始网页包含的 JS, 并 向所述转发服务器发送解析后的网页；
所述转发服务器，用于接收到网页后，从所述数据库读取图片信息， 并插入至该网页中对应该图片信息的图片标签处， 得到所述页面， 之后 将所述页面发送至所述设备中的处理单元。
13、根据权利要求 12所述的系统， 其特征在于， 所述系统还包括连 接在所述内核引擎服务器和所述转发服务器之间的页面转换服务器 SkeetServer;
所述页面转换服务器接收所述内核引擎服务器发送的解析后的网 页， 并判断所述移动终端是否支持所述解析后的网页， 如果否， 则将所 述解析后的网页转换为所述移动终端支持的网页， 并转发至所述转发服 务器， 如果是， 将所述解析后的网页转发至所述转发服务器。
14、根据权利要求 13所述的系统， 其特征在于， 所述设备通过页面 转换服务器发送所述二进制流至所述转发服务器， 所述转发服务器将接 收的二进制流进行 WUP协议组包和压缩， 下发给移动终端；
所述移动终端通过解析 WUP协议组包得到二进制流， 依据该二进 制流执行网页绘制操作。
PCT/CN2011/083450 2010-12-03 2011-12-05 网页渲染方法、设备和系统 WO2012072046A1 (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
US13/908,678 US20130275496A1 (en) 2010-12-03 2013-06-03 Method, Apparatus And System For Rendering Web Page
US13/908,714 US20130268843A1 (en) 2010-12-03 2013-06-03 Method, Apparatus And System For Rendering Web Page

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201010586281.5 2010-12-03
CN201010586281.5A CN102487402B (zh) 2010-12-03 2010-12-03 由服务器端实现网页渲染的方法、设备和系统

Related Child Applications (2)

Application Number Title Priority Date Filing Date
US13/908,678 Continuation US20130275496A1 (en) 2010-12-03 2013-06-03 Method, Apparatus And System For Rendering Web Page
US13/908,714 Continuation US20130268843A1 (en) 2010-12-03 2013-06-03 Method, Apparatus And System For Rendering Web Page

Publications (1)

Publication Number Publication Date
WO2012072046A1 true WO2012072046A1 (zh) 2012-06-07

Family

ID=46152856

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2011/083450 WO2012072046A1 (zh) 2010-12-03 2011-12-05 网页渲染方法、设备和系统

Country Status (3)

Country Link
US (2) US20130268843A1 (zh)
CN (1) CN102487402B (zh)
WO (1) WO2012072046A1 (zh)

Families Citing this family (25)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2013138179A1 (en) * 2012-03-13 2013-09-19 Google Inc. System and method for providing a binary representation of a web page
CN103365862B (zh) * 2012-03-28 2018-11-23 北京百度网讯科技有限公司 一种用于生成与页面对应的图片的方法与设备
CN102831190B (zh) * 2012-08-03 2018-07-10 北京中广睛彩导航科技有限公司 一种在低端设备上浏览cml文件的方法
CN103150761A (zh) * 2013-04-02 2013-06-12 乐淘奇品网络技术（北京）有限公司 通过网页高速逼真3d渲染进行物品设计定制的方法
CN103455571A (zh) * 2013-08-19 2013-12-18 小米科技有限责任公司 网页中的图片显示方法、装置及终端
CN103970882A (zh) * 2014-05-19 2014-08-06 小米科技有限责任公司 渲染页面的方法及装置
RU2638015C2 (ru) * 2015-06-30 2017-12-08 Общество С Ограниченной Ответственностью "Яндекс" Способ идентификации целевого объекта на веб-странице
WO2017023049A1 (en) 2015-07-31 2017-02-09 Samsung Electronics Co., Ltd. Electronic device and server related to rendering of web content and controlling method thereof
KR102384198B1 (ko) * 2015-07-31 2022-04-07 삼성전자주식회사 웹 컨텐츠의 렌더링과 관련된 전자 장치, 서버 및 제어 방법
US10534852B2 (en) * 2015-09-30 2020-01-14 Samsung Display Co., Ltd. Display system and virtual web device in the cloud
CN105677282B (zh) * 2016-01-29 2019-04-26 腾讯科技（深圳）有限公司 一种图像绘制的方法、用户设备、服务器及系统
CN107566439A (zh) * 2016-09-14 2018-01-09 彩讯科技股份有限公司 基于WebSocket的设备状态实时监控方法及系统
CN108156013B (zh) * 2016-12-02 2021-08-10 阿里巴巴集团控股有限公司 一种页面服务容灾方法、装置及电子设备
CN108228632A (zh) * 2016-12-15 2018-06-29 方正国际软件(北京)有限公司 一种终端轨迹绘制方法及装置
CN108874373B (zh) * 2017-05-12 2023-05-30 深圳市雅阅科技有限公司 向网页内插入信息的方法及装置、显示终端及存储介质
US11962665B2 (en) * 2018-06-07 2024-04-16 Cloudflare, Inc. Automatically redirecting mobile client devices to optimized mobile content
CN108984175B (zh) * 2018-07-12 2021-11-16 积成电子股份有限公司 适用于移动设备的面向对象的电网svg单线图展示方法
CN111104587A (zh) * 2018-10-26 2020-05-05 北京金山云网络技术有限公司 网页显示方法、装置和服务器
CN109241471B (zh) * 2018-10-26 2020-09-29 珠海格力电器股份有限公司 页面渲染方法、服务器、浏览器和能源信息管理系统
CN109933735B (zh) * 2019-03-04 2021-08-20 三星电子（中国）研发中心 调度方法、网页渲染方法、网页显示方法及其设备
CN111880789A (zh) * 2020-06-12 2020-11-03 北京三快在线科技有限公司 页面渲染方法、装置、服务端和计算机可读存储介质
CN112287256A (zh) * 2020-09-21 2021-01-29 北京沃东天骏信息技术有限公司 页面显示方法、终端设备、云服务器、系统及存储介质
CN113760252A (zh) * 2020-11-16 2021-12-07 北京沃东天骏信息技术有限公司 数据可视化方法、装置、计算机系统和可读存储介质
CN112732255B (zh) * 2020-12-29 2024-05-03 特赞（上海）信息科技有限公司 渲染方法、装置、设备和存储介质
CN117076813B (zh) * 2023-10-18 2024-01-23 中国电子科技集团公司第十五研究所 前端浏览器渲染方法、装置、电子设备和存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101657813A (zh) * 2007-04-04 2010-02-24 香港科技大学 移动设备上网页的自定义渲染
KR20100055857A (ko) * 2008-11-18 2010-05-27 주식회사 엘지텔레콤 웹페이지 로딩 방법 및 시스템
CN101771681A (zh) * 2008-12-30 2010-07-07 北大方正集团有限公司 一种页面显示控制方法、服务器及系统
CN101860533A (zh) * 2010-05-26 2010-10-13 卓望数码技术（深圳）有限公司 一种基于c/s架构浏览器的数据传输方法及服务器

Family Cites Families (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6792575B1 (en) * 1999-10-21 2004-09-14 Equilibrium Technologies Automated processing and delivery of media to web servers
US6971060B1 (en) * 2001-02-09 2005-11-29 Openwave Systems Inc. Signal-processing based approach to translation of web pages into wireless pages
WO2002082229A2 (en) * 2001-04-09 2002-10-17 America Online Incorporated Server-based browser system
US7954051B2 (en) * 2004-01-13 2011-05-31 International Business Machines Corporation Methods and apparatus for converting markup language data to an intermediate representation
US7627814B1 (en) * 2004-01-14 2009-12-01 Microsoft Corporation Hierarchical bit stream markup compilation and rendering
US20060038293A1 (en) * 2004-08-23 2006-02-23 Rueger Neal R Inter-metal dielectric fill
US20080065980A1 (en) * 2006-09-08 2008-03-13 Opera Software Asa Modifying a markup language document which includes a clickable image
US8037182B2 (en) * 2006-11-30 2011-10-11 Microsoft Corporation Capture of content from dynamic resource services
US8341361B2 (en) * 2006-12-22 2012-12-25 Nxp B.V. Method for storing data as well as a transponder, a read/write-device, a computer readable medium including a program element and such a program element adapted to perform this method
US20090063530A1 (en) * 2007-09-04 2009-03-05 Lg Telecom Ltd. System and method for mobile web service
US8983365B2 (en) * 2007-12-21 2015-03-17 Ibiquity Digital Corporation Systems and methods for communicating and rendering electronic program guide information via digital radio broadcast transmission
US20100050089A1 (en) * 2008-08-20 2010-02-25 Company 100, Inc. Web browser system of mobile communication terminal, using proxy server
US20100306344A1 (en) * 2009-04-06 2010-12-02 Nokia Corporation Methods and Systems for Using Multipart Messaging with Preset Constraints
US9077755B2 (en) * 2009-06-10 2015-07-07 Verizon Patent And Licensing Inc. Network-based geo-location identification of an end-user device

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101657813A (zh) * 2007-04-04 2010-02-24 香港科技大学 移动设备上网页的自定义渲染
KR20100055857A (ko) * 2008-11-18 2010-05-27 주식회사 엘지텔레콤 웹페이지 로딩 방법 및 시스템
CN101771681A (zh) * 2008-12-30 2010-07-07 北大方正集团有限公司 一种页面显示控制方法、服务器及系统
CN101860533A (zh) * 2010-05-26 2010-10-13 卓望数码技术（深圳）有限公司 一种基于c/s架构浏览器的数据传输方法及服务器

Also Published As

Publication number Publication date
US20130268843A1 (en) 2013-10-10
CN102487402A (zh) 2012-06-06
US20130275496A1 (en) 2013-10-17
CN102487402B (zh) 2014-03-19

Similar Documents

Publication Publication Date Title
WO2012072046A1 (zh) 网页渲染方法、设备和系统
JP5230642B2 (ja) ウェブページの表示方法およびシステム
JP4982455B2 (ja) モバイルウェブサービスシステムおよび方法
CN102446222B (zh) 一种网页内容预加载方法、装置及系统
CN103425699B (zh) 获取网页的方法、设备和系统
WO2014063652A1 (zh) 向计算终端提供图片数据的方法及服务器
CN101640664B (zh) 一种互联网门户服务系统及其管理方法
WO2013078830A1 (zh) 一种处理移动终端的页面访问请求的方法、设备与系统
CN101778168A (zh) 一种移动终端浏览器上网页优化显示方法和系统
KR100967337B1 (ko) 프록시 서버를 이용한 이동통신 단말기의 웹 브라우저 시스템
TW201437826A (zh) 網頁樣式位址合併的方法和裝置
WO2012075942A1 (zh) 网页浏览方法、浏览器以及移动终端
WO2012071993A1 (zh) 一种环球信息网www页面处理方法和装置
WO2012163122A1 (zh) 一种页面浏览方法、服务器和终端
WO2011097992A1 (zh) 实现网页访问的方法、系统及前端服务器
WO2012075933A1 (zh) 一种获取富媒体文件的方法、装置及系统
WO2013078797A1 (zh) 网络文件传输方法及系统
WO2015196442A1 (zh) 一种网页优化的设备及方法
WO2013152677A1 (zh) 资源共享方法及设备
KR100624142B1 (ko) 무선 데이터 서비스를 위한 게이트웨이 장치 및 상기 게이트웨이 장치에서의 무선 데이터 서비스 처리 방법
KR101018473B1 (ko) 모바일용 웹페이지 변환 시스템 및 방법
TW200939730A (en) Method of browsing network information by hand-held communication device
US20140075228A1 (en) Processing device and method thereof
US20010056497A1 (en) Apparatus and method of providing instant information service for various devices
US20050288044A1 (en) System and method for using soap to invoke web services on handheld devices

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: 11845958

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205 DATED 16/10/2013)

122 Ep: pct application non-entry in european phase

Ref document number: 11845958

Country of ref document: EP

Kind code of ref document: A1