专利名称：由服务器端实现网页渲染的方法、设备和系统的制作方法
技术领域：
本发明涉及计算机技术领域，特别涉及由服务器端实现网页渲染的方法、设备和系统。
背景技术：
随着3G技术的推广、以及移动电话价格和入网费用的降低，人们对于手机上网的需求，逐渐的从访问简单以文本为主的Wap网页，转向了直接访问互联网网站，以获取更加丰富的内容。目前，在手机直接访问互联网时，互联网都是返回网页标签给手机浏览器，由手机浏览器对网页标签进行解析渲染，最后完成绘制显示。但是，由于手机和PC相比，最重要区别是手机的内存容量小、cpu主频低、网络传输速度慢、费用高。如果由手机浏览器对网页标签进行解析渲染，这会存在以下问题1)占用内存太大手机浏览器为了实现对网页标签进行解析渲染，需要在内存中存储一整套的解析渲染引擎代码，并且，手机浏览器在对网页标签进行渲染时，需要保存对象变量等至内存中，这会导致手机内存空存被大量占用。2)执行速度慢由于网页的渲染是涉及到大量的计算，而手机的cpu主频相对于PC来说是非常低的，这大大减慢了网页渲染的执行速度。3)网络速度太慢由于手机相对于PC，无线网络的传输速率较低，而互联网上的网页数据往往尺寸较大，需要花费很长的时间才能传输到手机。
发明内容
本发明提供了由服务器端实现网页渲染的方法、设备和系统，以避免由手机浏览器对网页标签进行解析渲染所带来的技术问题。本发明提供的技术方案包括一种由服务器端实现网页渲染的方法，所述服务器端包含内核webcore;关键在于，预先在服务器端设置渲染服务器Rendei^erver ；该方法包括所述渲染服务器将接收的页面解析成DOM树，并将接收的页面发送至所述内核， 由所述内核对所述页面进行渲染，形成渲染树；所述渲染服务器依据所述DOM树将所述渲染树上渲染对象对应的数据信息转换为二进制流，并下发给移动终端，由所述移动终端依据接收的二进制流执行绘制操作，以实现网页浏览。一种由服务器端实现网页渲染的设备，所述设备设置在服务器端，所述服务器端包含内核；所述设备包括处理单元，用于接收页面，将所述页面解析成DOM树，并发送所述页面至所述内核，由所述内核对所述页面进行渲染，形成渲染树；转换单元，用于依据所述DOM树将所述渲染树上渲染对象对应的数据信息转换为二进制流，并下发给移动终端，由所述移动终端依据接收的二进制流执行绘制操作，以实现网页浏览。一种由服务器端实现网页渲染的系统，该系统包括内核、移动终端和如上所述的设备。由以上技术方案可以看出，本发明中，通过在服务器端增加渲染服务器，由该渲染服务器完成网页的渲染，并将渲染的结果返回给手机浏览器，由手机浏览器根据渲染结果执行绘制操作。这显然能够避免由手机浏览器对网页标签进行解析渲染所带来的技术问题，降低手机浏览器的CPU、内存和网络流量的压力。
图1为本发明实施例提供的基本流程图；图2为本发明实施例提供的详细流程图；图3为本发明实施例提供的步骤210的流程图；图4为TLV编码格式示意图；图5为本发明实施例提供的设备基本结构图；图6为本发明实施例提供的设备详细结构图。
具体实施例方式本发明实施例主要是由服务器端完成网页的渲染，并将渲染的结果返回给手机浏览器，由手机浏览器根据渲染结果执行绘制操作。这相比于现有技术，能够降低手机浏览器的CPU、内存和网络流量的压力。为了使本发明的目的、技术方案和优点更加清楚，下面结合附图和具体实施例对本发明进行详细描述。参见图1，图1为本发明实施例提供的基本流程图。在执行该流程之前，需要预先在服务器端设置渲染服务器，其中，服务器端包含内核。基于此，如图1所示，该流程可包括以下步骤步骤101，渲染服务器将接收的页面解析成DOM树，并将接收的页面发送至所述内核，由所述内核对所述页面进行渲染，形成渲染(Render)树。本步骤101中，渲染服务器可按照现有解析方法将接收的页面解析成DOM树。内核可按照现有渲染方法将渲染服务器接收的页面进行渲染，形成渲染树。步骤102，渲染服务器依据所述DOM树将所述渲染树上渲染对象对应的数据信息转换为二进制流，并下发给移动终端，由所述移动终端依据接收的二进制流执行绘制操作， 以实现网页浏览。也就是说，服务器端代替移动终端比如手机执行网页渲染功能，并将渲染执行结果发送给移动终端，移动终端即可直接根据接收的二进制流进行绘制操作(具体可与现有绘制操作类似)，如此，即可流畅的浏览网页。至此，完成图1所示的流程。
5
下面对本发明实施例进行详细描述。该实施例主要是由移动终端比如手机和服务器端之间的通信协议来完成的，具体可参见图2所示的流程。参见图2，图2为本发明实施例提供的详细流程图。如图2所示，该流程可包括以下步骤步骤201，手机发送URL请求给转发服务器(BrokerServer)。步骤202，BrokerServer通过页面转换服务器(SkeetServer)将所述URL请求发送给内核引擎服务器(Chromekrver)。可以看出，在步骤202中，BrokerServer和Skeetkrver实质上是将URL请求透传给 ChromeServer0步骤203，Chromekrver抓取所述URL请求对应的原始网页，通过解析所述原始网页获取并存储所述原始网页中图片标签对应的图片信息至数据库(DCache)，以及执行所述原始网页包含的JS。步骤204，ChromeServer 发送解析后的网页至 SkeetServer。步骤205，SkeetServer判断发送所述URL请求的手机是否支持所述解析后的网页，如果是，执行步骤206 ；否则，执行步骤207。步骤206，将所述解析后的网页发送至Brokerkrver。之后执行步骤208。步骤207，将所述解析后的网页转换为所述手机支持的网页，并发送至 BrokerServer0之所以执行步骤205至步骤207，主要是因为目前大多数手机仅支持wap2. O网页， 并不支持互联网站上的WWW网页，基于此，如果本实施例中发送了 URL请求的手机不支持 www网页，则在Skeetkrver接收到www网页时，就需要将该www网页转换为wap2. O网页， 之后发送至Brokei^erver。当然，如果本实施例中发送了 URL请求的手机具有强大的功能， 即可支持wap2. O网页，又支持www网页，则在SkeeUerver接收到www网页时，就不需要执行转换操作，直接将该www网页发送至Brokerkrver即可。可以看出，步骤205至步骤207 的执行主要是依赖于手机的功能。步骤208，BrokerServer接收Skeetkrver发送的网页，从DCache中读取图片信息，插入至该网页上对应该图片信息的图片标签处，得到插入后的网页(记为网页1)，之后将该网页1发送至RenderServer。步骤209，Renderkrver将接收的网页1解析成DOM树，并将接收的网页1发送至内核(webcore)，由webcore对网页1进行渲染，形成渲染树。步骤210，RenderServer依据DOM树将所述渲染树上渲染对象对应的数据信息转换为二进制流。本步骤210中的具体操作可参见图3所示的流程参见图3，图3为本发明实施例提供的步骤210的流程图。如图3所示，该流程可包括以下步骤步骤301，从渲染树上获取发送了 URL请求的手机所需要的Render对象。本实施例中，移动终端需要的渲染对象为=RenderText对象、RenderImage对象、 控件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.gg.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，在该得到的二进制流的前部或者后部增加对应该二进制流的文件标识和版本号，以供识别该二进制流，并通过SkeeUerver发送至Brokerkrver。其中，文件标识和版本号各占一个字段。步骤212，Brokerkrver将接收的二进制流进行WUP协议组包和压缩，下发给发送了 URL请求的手机。步骤213，所述发送了 URL请求的手机通过解析WUP协议组包得到二进制流，依据该二进制流执行绘制操作，以实现网页浏览。本步骤213的绘制操作可与现有技术类似，这里不再赘述。至此，完成了图2所示的流程。以上对本发明实施例提供的方法进行了描述，下面对本发明实施例提供的设备和
7系统进行描述。参见图5，图5为本发明实施例提供的设备基本结构图。设备设置在服务器端，其中，所述服务器端包含webcore。如图5所示，该设备包括处理单元501，用于接收页面，将所述页面解析成DOM树，并发送所述页面至所述内核，由所述内核对所述页面进行渲染，形成渲染树；转换单元502，用于依据所述DOM树将所述渲染树上渲染对象对应的数据信息转换为二进制流，并下发给移动终端，由所述移动终端依据接收的二进制流执行绘制操作，以实现网页浏览。以上对本发明实施例提供的设备进行了简单描述，下面对该设备进行详细描述。参见图6，图6为本发明实施例提供的设备详细结构图。如图6所示，该设备可包括处理单元601和转换单元602，其中，处理单元601和转换单元602具有的功能分别与处理单元501和转换单元502具有的功能类似，这里不再详述。优选地，如图6所示，转换单元602可包括第一获取子单元6021，用于从所述渲染树上获取所述移动终端需要的渲染Render对象；本实施例中，所述移动终端需要的渲染对象为jenderkxt对象、 RenderImage对象、至少一个控件Render对象、以及与所述移动终端逻辑相关的Render对象；或者，为所述渲染树上所有的Render对象。第二获取子单元6022，用于针对获取的每一 Render对象，获取该Render对象的渲染信息，以及在所述DOM树上获取该Render对象对应的DOM元素和该DOM元素的属性；编码子单元6023，用于将获取的渲染信息、DOM元素和该DOM元素的属性进行二进制编码，得到二进制流；转发子单元60 ，用于将所述二进制流进行WUP协议组包和压缩，下发给移动终端，以供移动终端通过解析WUP协议组包得到二进制流，依据该二进制流执行绘制操作。本发明实施例还提供了由服务器端实现网页渲染的系统，其中，该系统可包括 webcore、移动终端比如手机和如图5或图6所述的设备。本实施例中，所述系统还包括ChromeServer、DCache 禾口 BrokerServer ；其中，所述Chromekrver，用于抓取所述移动终端发送的URL请求对应的原始网页，通过解析所述原始网页获取并存储所述原始网页中图片标签对应的图片信息至所述数据库，以及执行所述原始网页包含的JS，并向Brokei^erver发送解析后的网页；所述Brokei^erver，用于接接收到网页后，从所述数据库读取图片信息，并插入至该网页中对应该图片信息的图片标签处，得到所述页面，之后将所述页面发送至所述设备中的处理单元。优选地，所述服务器端还包括连接在所述Chromekrver和所述Brokei^erver之间的 SkeetServer ；所述SkeeUerver接收所述Chromekrver发送的解析后的网页，并判断所述移动终端是否支持所述网页，如果否，则将所述解析后的网页转换为所述移动终端支持的网页， 并转发至所述BrokerServer，如果是，将所述解析后的网页转发至所述Brokerkrver。由以上技术方案可以看出，本发明中，通过在服务器端增加渲染服务器，由该渲染服务器完成网页的渲染，并将渲染的结果返回给移动终端比如手机上的浏览器，由手机浏览器根据渲染结果执行绘制操作。这显然能够避免由手机浏览器对网页标签进行解析渲染所带来的技术问题，降低手机浏览器的CPU、内存和网络流量的压力。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。
权利要求
1.一种由服务器端实现网页渲染的方法，所述服务器端包含内核webcore ；其特征在于，预先在服务器端设置渲染服务器Rendei^erver ；该方法包括所述渲染服务器将接收的页面解析成DOM树，并将接收的页面发送至所述内核，由所述内核对所述页面进行渲染，形成渲染树；所述渲染服务器依据所述DOM树将所述渲染树上渲染对象对应的数据信息转换为二进制流，并下发给移动终端，由所述移动终端依据接收的二进制流执行绘制操作，以实现网页浏览。
2.根据权利要求1所述的方法，其特征在于，所述服务器端还包括内核引擎服务器 ChromeServer、数据库 DCache 和转发服务器 BrokerServer ；在所述渲染服务器接收页面之前，进一步包括所述内核引擎服务器抓取所述移动终端发送的URL请求对应的原始网页，通过解析所述原始网页获取并存储所述原始网页中图片标签对应的图片信息至所述数据库，以及执行所述原始网页包含的JS，并向所述转发服务器发送解析后的网页；所述转发服务器接收到网页后，从所述数据库读取图片信息，并插入至该网页中对应该图片信息的图片标签处，得到所述页面，之后将所述页面发送至所述渲染服务器。
3.根据权利要求2所述的方法，其特征在于，所述服务器端还包括连接在所述内核引擎服务器和所述转发服务器之间的页面转换服务器SkeetServer ；所述转发服务器接收的网页是通过所述页面转换服务器转发的，其中，所述转发包括 所述页面转换服务器接收所述内核引擎服务器发送的解析后的网页，并判断所述移动终端是否支持所述解析后的网页，如果否，则将所述解析后的网页转换为所述移动终端支持的网页，并转发至所述转发服务器，如果是，将所述解析后的网页转发至所述转发服务器。
4.根据权利要求1所述的方法，其特征在于，所述渲染服务器依据DOM树将渲染树上渲染对象对应的数据信息转换为二进制流包括从所述渲染树上获取所述移动终端需要的渲染Render对象；针对获取的每一 Render对象，获取该Render对象的渲染信息，以及在所述DOM树上获取该Render对象对应的DOM元素和该DOM元素的属性；将获取的渲染信息、DOM元素和该DOM元素的属性分别进行二进制编码，得到二进制流。
5.根据权利要求4所述的方法，其特征在于，所述移动终端需要的渲染对象为 RenderText对象、RenderImage对象、控件Render对象、以及与所述移动终端逻辑相关的 Render对象；或者为所述渲染树上所有的Render对象。
6.根据权利要求4所述的方法，其特征在于，所述二进制编码是按照TLV编码格式执行的；该方法进一步包括在该得到的二进制流的前部或者后部增加对应该二进制流的文件标识和版本号，以供识别该二进制流。
7.根据权利要求3所述的方法，其特征在于，所述渲染服务器下发二进制流给移动终端包括所述渲染服务器通过页面转换服务器发送所述二进制流至所述转发服务器；所述转发服务器将接收的二进制流进行WUP协议组包和压缩，下发给移动终端；所述移动终端依据接收的二进制流执行绘制操作包括移动终端通过解析WUP协议组包得到二进制流，依据该二进制流执行绘制操作。
8.一种由服务器端实现网页渲染的设备，其特征在于，所述设备设置在服务器端，所述服务器端包含内核webcore ；所述设备包括处理单元，用于接收页面，将所述页面解析成DOM树，并发送所述页面至所述内核，由所述内核对所述页面进行渲染，形成渲染树；转换单元，用于依据所述DOM树将所述渲染树上渲染对象对应的数据信息转换为二进制流，并下发给移动终端，由所述移动终端依据接收的二进制流执行绘制操作，以实现网页浏览。
9.根据权利要求8所述的设备，其特征在于，所述转换单元包括第一获取子单元，用于从所述渲染树上获取所述移动终端需要的渲染Render对象；第二获取子单元，用于针对获取的每一 Render对象，获取该Render对象的渲染信息， 以及在所述DOM树上获取该Render对象对应的DOM元素和该DOM元素的属性；编码子单元，用于将获取的渲染信息、DOM元素和该DOM元素的属性进行二进制编码， 得到二进制流；转发子单元，用于将所述二进制流进行WUP协议组包和压缩，下发给移动终端，以供移动终端通过解析WUP协议组包得到二进制流，依据该二进制流执行绘制操作。
10.根据权利要求9所述的设备，其特征在于，所述移动终端需要的渲染对象为 RenderText对象、RenderImage对象、控件Render对象、以及与所述移动终端逻辑相关的 Render对象；或者，为所述渲染树上所有的Render对象。
11.一种由服务器端实现网页渲染的系统，其特征在于，该系统包括内核webcore、移动终端和如权利要求8至10任一所述的设备。
12.根据权利要求11所述的系统，其特征在于，所述系统还包括内核引擎服务器 ChromeServer、数据库 DCache 和转发服务器 BrokerServer ；所述内核引擎服务器，用于抓取所述移动终端发送的URL请求对应的原始网页，通过解析所述原始网页获取并存储所述原始网页中图片标签对应的图片信息至所述数据库，以及执行所述原始网页包含的JS，并向所述转发服务器发送解析后的网页；所述转发服务器，用于接收到网页后，从所述数据库读取图片信息，并插入至该网页中对应该图片信息的图片标签处，得到所述页面，之后将所述页面发送至所述设备中的处理单元。
13.根据权利要求12所述的系统，其特征在于，所述系统还包括连接在所述内核引擎服务器和所述转发服务器之间的页面转换服务器SkeetServer ；所述页面转换服务器接收所述内核引擎服务器发送的解析后的网页，并判断所述移动终端是否支持所述解析后的网页，如果否，则将所述解析后的网页转换为所述移动终端支持的网页，并转发至所述转发服务器，如果是，将所述解析后的网页转发至所述转发服务ο
全文摘要
本发明实施例提供了由服务器端实现网页渲染的方法、设备和系统，其中，所述服务器端包含内核；该方法包括预先在服务器端设置渲染服务器RenderServer；所述渲染服务器将接收的页面解析成DOM树，并将接收的页面发送至所述内核，由所述内核对所述页面进行渲染，形成渲染树；所述渲染服务器依据所述DOM树将所述渲染树上渲染对象对应的数据信息转换为二进制流，并下发给移动终端，由所述移动终端依据接收的二进制流执行绘制操作，以实现网页浏览。采用本发明，能够避免由手机浏览器对网页标签进行解析渲染所带来的技术问题。
文档编号G06F17/30GK102487402SQ20101058628
公开日2012年6月6日 申请日期2010年12月3日 优先权日2010年12月3日
发明者徐羽, 钭伟雨, 阮曙东 申请人:腾讯科技(深圳)有限公司