CN103425699B - 获取网页的方法、设备和系统 - Google Patents
获取网页的方法、设备和系统 Download PDFInfo
- Publication number
- CN103425699B CN103425699B CN201210164409.8A CN201210164409A CN103425699B CN 103425699 B CN103425699 B CN 103425699B CN 201210164409 A CN201210164409 A CN 201210164409A CN 103425699 B CN103425699 B CN 103425699B
- Authority
- CN
- China
- Prior art keywords
- page
- thumbnail
- client
- url
- rendering data
- Prior art date
- Legal status (The legal status 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 status listed.)
- Active
Links
Abstract
本发明公开了一种获取网页的方法、设备和系统,属于通信技术领域。所述方法包括:接收客户端的URL请求,获取所述URL请求对应的页面;根据所述客户端的显示屏幕信息对所述页面进行预处理,得到所述页面的二进制网页渲染数据和所述页面的缩略图;根据所述客户端能够显示的图片参数的信息对所述页面上的图片进行转换和压缩,得到所述页面的图片数据;将所述页面的缩略图、所述页面的二进制网页渲染数据和所述页面的图片数据返回给所述客户端,使所述客户端根据所述页面的缩略图、所述页面的二进制网页渲染数据和所述页面的图片数据对所述页面进行绘制,以实现对所述页面的浏览。
Description
技术领域
本发明涉及通信技术领域,特别涉及一种获取网页的方法、设备和系统。
背景技术
随着3G技术的推广、以及移动电话价格和入网费用的降低,人们对于手机上网的需求,逐渐的从访问简单以文本为主的Wap网页,转向了直接访问互联网WWW网页,以获取更加丰富的内容。但是由于中低端平台手机的能力限制,对WWW网页的处理能力还不够,所以怎样才能使WWW网页显示在中低端平台的手机上是现有技术需要解决的问题。
现有技术中,在手机直接访问互联网上的WWW网页时,服务器端对WWW网页做一些转换过滤处理,例如对网页的标签及CSS(Cascading Style Sheet,级联样式表)过滤转换处理等,使得处理后的WWW网页能够在手机上显示,服务器端再将转换处理过的WWW网页返回给手机端,手机进行显示。
在实现本发明的过程中,发明人发现现有技术至少存在以下问题:
现有技术中,服务器端为了使WWW网页能够在手机上显示,对WWW网页的标签和CSS做了过滤处理转换,这样虽然能够达到在手机上显示WWW网页的目的,但是过滤转换后的页面显示效果会与在PC上显示的效果差别很多,降低了用户在使用手机浏览WWW网页时的体验感。
发明内容
为了解决现有技术中WWW网页在手机上的显示效果差的问题,本发明实施例提供了一种获取网页的方法、设备和系统。所述技术方案如下:
一方面,提供了一种获取网页的方法,所述方法包括:
接收客户端的统一资源定位符URL请求,获取所述URL请求对应的页面,其中,所述URL请求中包括所述客户端的显示屏幕信息和所述客户端能够显示的图片参数的信息;
根据所述客户端的显示屏幕信息对所述页面进行预处理,得到所述页面的二进制网页渲染数据和所述页面的缩略图,其中,所述二进制网页渲染数据和所述缩略图中的指定的区域一一对应;
根据所述客户端能够显示的图片参数的信息对所述页面上的图片进行转换和压缩,得到所述页面的图片数据;
将所述页面的缩略图、所述页面的二进制网页渲染数据和所述页面的图片数据返回给所述客户端,使所述客户端输出所述URL对应的页面的缩略图,并根据所述页面的缩略图、所述页面的二进制网页渲染数据和所述页面的图片数据对所述页面进行绘制,以实现对所述页面的浏览。
所述获取所述URL请求对应的页面,包括:
获取所述URL请求对应的原始网页;
对所述原始网页进行解析,获取并存储所述原始网页中图片标签对应的图片信息,并执行所述原始网页包含的Javascript,得到所述解析后的所述URL对应的页面。
所述根据所述客户端的显示屏幕信息对所述页面进行预处理,得到所述页面的二进制渲染数据和所述页面的缩略图,包括:
对所述页面进行渲染,获得所述页面的渲染数据和所述页面的原始图片;
将所述页面的渲染数据通过序列化转换为二进制数据,得到所述页面的二进制渲染数据;
根据所述客户端的显示屏幕信息,将所述页面的原始图片调整到所述客户端的显示屏幕能够显示的比例,得到所述页面的缩略图;
将所述页面的二进制渲染数据和所述缩略图中的指定的区域进行映射,使所述渲染数据和所述缩略图中的指定的区域一一对应。
所述对所述页面进行渲染,获得所述页面的原始图片,包括:
根据所述客户端的显示屏幕信息,对所述页面上的文本进行排版,使得所述排版后的文本能够完整的显示在所述客户端的显示屏幕上,获得所述页面的原始图片。
根据所述客户端的显示屏幕信息,将所述页面的原始图片调整到所述客户端的显示屏幕能够显示的比例,得到所述页面的缩略图之后,还包括:
判断所述页面的缩略图的内存大小是否超过预设值,如果是,则根据所述客户端的显示屏幕信息对所述缩略图进行切割处理,以减少所述缩略图的内存大小。
另一方面,提供了一种获取网页的方法,所述方法包括:
向服务器端发送统一资源定位符URL请求;
接收所述服务器端返回的所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据;
输出所述URL对应的页面的缩略图,并根据所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据,对所述URL对应的页面进行绘制,以实现对所述页面的浏览。
所述根据所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据,对所述URL对应的页面进行绘制,包括:
当定位所述缩略图中的指定区域时,获取所述URL对应的页面的二进制渲染数据中与所述指定区域对应的二进制渲染数据;
根据与所述指定区域对应的二进制渲染数据和所述URL对应的页面的图片数据对所述指定区域进行绘制。
另一方面,还提供了一种服务器端,所述服务器端包括:
页面抓取模块,用于接收客户端的统一资源定位符URL请求,获取所述URL请求对应的页面,其中,所述URL请求中包括所述客户端的显示屏幕信息和所述客户端能够显示的图片参数的信息;
预处理模块,用于根据所述客户端的显示屏幕信息对所述页面进行预处理,得到所述页面的二进制网页渲染数据和所述页面的缩略图,其中,所述二进制网页渲染数据和所述缩略图中的指定的区域一一对应;
图片处理模块,用于根据所述客户端能够显示的图片参数的信息对所述页面上的图片进行转换和压缩,得到所述页面的图片数据;
发送模块,用于将所述页面的缩略图、所述页面的二进制网页渲染数据和所述页面的图片数据返回给所述客户端,使所述客户端输出所述URL对应的页面的缩略图,并根据所述页面的缩略图、所述页面的二进制网页渲染数据和所述页面的图片数据对所述页面进行绘制,以实现对所述页面的浏览。
所述页面抓取模块,包括:
获取单元,用于获取所述URL请求对应的原始网页;
解析单元,用于对所述原始网页进行解析,获取并存储所述原始网页中图片标签对应的图片信息,并执行所述原始网页包含的Javascript,得到所述解析后的所述URL对应的页面。
所述预处理模块,包括:
渲染单元,用于对所述页面进行渲染,获得所述页面的渲染数据和所述页面的原始图片;
序列化单元,用于将所述页面的渲染数据通过序列化转换为二进制数据,得到所述页面的二进制渲染数据;
缩略图生成单元,用于根据所述客户端的显示屏幕信息,将所述页面的原始图片调整到所述客户端的显示屏幕能够显示的比例,得到所述页面的缩略图;
映射单元,用于将所述页面的二进制渲染数据和所述缩略图中的指定的区域进行映射,使所述渲染数据和所述缩略图中的指定的区域一一对应。
所述渲染单元,包括:
原始图片生成子单元,用于根据所述客户端的显示屏幕信息,对所述页面上的文本进行排版,使得所述排版后的文本能够完整的显示在所述客户端的显示屏幕上,获得所述页面的原始图片。
缩略图生成单元包括:
切割子单元,用于判断所述页面的缩略图的内存大小是否超过预设值,如果是,则根据所述客户端的显示屏幕信息对所述缩略图进行切割处理,以减少所述缩略图的内存大小。
另一方面,还提供了一种客户端,所述客户端包括:
发送模块,用于向服务器端发送统一资源定位符URL请求;
接收模块,用于接收所述服务器端返回的所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据;
页面绘制模块,用于根据所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据,对所述URL对应的页面进行绘制,以实现对所述页面的浏览;
所述页面绘制模块包括:
输出单元,用于输出所述URL对应的页面的缩略图。
所述页面绘制模块,还包括:
获取单元,用于当定位所述缩略图中的指定区域时,获取所述URL对应的页面的二进制渲染数据中与所述指定区域对应的二进制渲染数据;
绘制单元,用于根据与所述指定区域对应的二进制渲染数据和所述URL对应的页面的图片数据对所述指定区域进行绘制。
另一方面,还提供了一种获取网页的系统,所述系统包括:如上所述的服务器端和如上所述的客户端。
本发明实施例提供的技术方案带来的有益效果是:将页面分解成缩略图、二进制渲染数据和图片数据,使客户端根据缩略图、二进制渲染数据和图片数据进行绘制,不需要对WWW的网页进行CSS样式过滤和标签的转换操作,可以大大提高CSS样式支持和标签支持,提供了更好的页面渲染效果,让用户舒适的阅读大页面,大大提高用户了的体验度。
附图说明
为了更清楚地说明本发明实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本发明实施例1中提供的一种获取网页的方法的流程图;
图2是本发明实施例2中提供的一种获取网页的方法的流程图;
图3是本发明实施例3中提供的一种获取网页的方法的流程图;
图4是本发明实施例4中提供的一种服务器端的示意图;
图5是本发明实施例4中提供的另一种服务器端的示意图;
图6是本发明实施例5中提供的一种客户端的示意图;
图7是本发明实施例5中提供的另一种客户端的示意图;
图8是本发明实施例6中提供的一种获取网页的系统的示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚,下面将结合附图对本发明实施方式作进一步地详细描述。
实施例1
参见图1,本实施例中提供了一种获取网页的方法,所述方法包括:
101、接收客户端的URL(Uniform/Universal Resource Locator,统一资源定位符)请求,获取所述URL请求对应的页面,其中,所述URL请求中包括所述客户端的显示屏幕信息和所述客户端能够显示的图片参数的信息;
102、根据所述客户端的显示屏幕信息对所述页面进行预处理,得到所述页面的二进制网页渲染数据和所述页面的缩略图,其中,所述二进制网页渲染数据和所述缩略图中的指定的区域一一对应;
103、根据所述客户端能够显示的图片参数的信息对所述页面上的图片进行转换和压缩,得到所述页面的图片数据;
104、将所述页面的缩略图、所述页面的二进制网页渲染数据和所述页面的图片数据返回给所述客户端,使所述客户端根据所述页面的缩略图、所述页面的二进制网页渲染数据和所述页面的图片数据对所述页面进行绘制,以实现对所述页面的浏览。
本实施例的有益效果是:将页面分解成缩略图、二进制渲染数据和图片数据,使客户端根据缩略图、二进制渲染数据和图片数据进行绘制,不需要对WWW的网页进行CSS样式过滤和标签的转换操作,可以大大提高CSS样式支持和标签支持,提供了更好的页面渲染效果,让用户舒适的阅读大页面,大大提高用户了的体验度。
实施例2
参见图2,本实施例中提供了一种获取网页的方法,所述方法包括:
201、向服务器端发送URL请求;
202、接收所述服务器端返回的所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据;
203、根据所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据,对所述URL对应的页面进行绘制,以实现对所述页面的浏览。
本实施例的有益效果是:服务器端将页面分解成缩略图、二进制渲染数据和图片数据,使客户端根据缩略图、二进制渲染数据和图片数据进行绘制,不需要对WWW的网页进行CSS样式过滤和标签的转换操作,可以大大提高CSS样式支持和标签支持,提供了更好的页面渲染效果,让用户舒适的阅读大页面,大大提高用户了的体验度。
实施例3
参见图3,本实施例中提供了一种获取网页的方法,包括:
301、客户端向服务器端发起URL请求。
本实施例中,客户端包括便捷式移动终端,如手机等,对此本实施例不做具体限定,本步骤中,客户端向互联网发起URL请求,请求访问WWW网页。
本步骤中,客户端在向服务器端发起URL请求时,同时会将本地的中能力信息发送给服务器,使得服务器端能够根据客户端的能力信息对页面进行相应的处理。其中客户端的能力信息包括但不限于:客户端的显示屏幕信息、所述客户端能够显示的图片参数的信息和客户端所能支持的网页等。
302、服务器端接收到客户端的URL请求后,获取该URL对应的页面。
本步骤中,服务器端接收到客户端的URL请求后,抓取该URL对应的原始网页的资源,并对原始网页进行进一步解析,以获得URL对应的页面。其中,原始网页的资源包括:Javascript,CSS(Cascading Style Sheet,级联样式表),图片等资源。
本步骤中,获得URL对应的页面包括:获取所述URL请求对应的原始网页;对所述原始网页进行解析,获取并存储所述原始网页中图片标签对应的图片信息,并执行所述原始网页包含的Javascript,得到所述解析后的URL对应的页面。
可选地,本步骤中,如果客户端不支持WWW页面的浏览,则需要将该页面转换为客户端能够支持的页面,如客户端支持wap2.0网页,则在对原始网页资源进行解析得到URL对应的页面后,还需要将该页面进一步转换为wap2.0网页。如果客户端支持WWW页面的浏览则不需要对WWW页面进行转换,对此本实施例不做具体限定。
303、服务器端根据所述客户端的显示屏幕信息对所述页面进行渲染,得到所述页面的渲染数据和所述页面的缩略图。
本步骤中,对获得的URL页面进行预处理,其中根据所述客户端的显示屏幕信息对所述页面进行预处理,得到所述页面的二进制渲染数据和所述页面的缩略图,包括:
1)对所述页面进行渲染,获得所述页面的渲染数据和所述页面的原始图片;
本步骤中将页面解析成DOM树,再进一步对DOM树进行渲染,形成渲染树,得到页面的渲染数据。其中对页面进行渲染现有技术中有多种方法,本实施例中对此不再赘述。
本步骤中,为了使用户获得良好的体验感,在对页面进行渲染时,同时根据页面生成一张原始图片,其中将页面生成图片的技术与现有技术类似,本实施例不再赘述。值的说明的是,为了避免客户端用户在浏览超过一个屏幕宽度的文本的时候进行左右滚动操作,在渲染过程中服务器端会根据客户端上报的显示屏幕信息对超过一个屏幕的文本进行文字适合屏幕排版,其中,对所述页面进行渲染,获得所述页面的原始图片,包括:根据所述客户端的显示屏幕信息,对所述页面上的文本进行排版,使得所述排版后的文本能够完整的显示在所述客户端的显示屏幕上,获得所述页面的原始图片。其中排版包括行间距的调整或是字体的调整等,对此本实施例不做具体限定。
2)将所述页面的渲染数据通过序列化转换为二进制数据,得到所述页面的二进制渲染数据;
本步骤中,将所述页面的渲染数据通过序列化转换为二进制数据,得到所述页面的二进制渲染数据,具体包括:
a)从渲染树上获取发送了URL请求的客户端所需要的Render对象。
本实施例中,获取客户端需要渲染的对象。客户端需要的渲染对象为:RenderText对象、RenderImage对象、至少一个控件Render对象、以及与发送了URL请求的客户端逻辑相关的Render对象;或者,所有渲染后的页面中的数据。
其中,与客户端逻辑相关的渲染对象具体可为RenderView对象(用于存放文档页面大小、HTML Head标签元素等),RenderBlock对象(Form表单元素)等。
通过获取客户端所需要的渲染对象,能够过滤掉其他一些不必要的Render对象,这可在后续发送Render对象时节省流量。
b)针对获取的每一Render对象,获取该Render对象的渲染信息,以及在所述DOM树上获取该Render对象对应的DOM元素和该DOM元素的属性。
通常,Render对象至少对应一个DOM元素。
其中,Render对象的渲染信息主要为客户端在执行绘制操作时用到的样式信息,具体可包括:Render对象在屏幕上的坐标值和宽高,颜色等。
DOM元素和该DOM元素的属性具体定义可与现有技术中的定义类似,这里不再赘述。
本实施例中,获取Render对象的渲染信息,以及在所述DOM树上获取该Render对象对应的DOM元素和该DOM元素的属性,主要目的是为了绘制操作。以Render对象的渲染信息包含Render对象在屏幕上的坐标值、宽高和颜色,DOM元素的标签是<A>标签,属性为href=http://www.aa.com为例,则当手机在得到该渲染信息、DOM元素和该DOM元素的属性时,可以根据位置,颜色和文本等信息进行绘制,根据其标签属性为<a>点击该元素时进行的响应操作,并根据属性href=http://www.aa.com获知跳转的网页。
c)将获取的渲染信息、DOM元素和该DOM元素的属性进行二进制编码,得到页面的二进渲染数据。
其中可按表1所示的Tag-Length-Value(TLV)编码格式对渲染信息、DOM元素和该DOM元素的属性进行二进制编码。
表1
Tag | Length | Value |
如表1所示,Tag是指标志位使用可变长度变量,本身占用1到2个字节。如果待编码的信息(比如渲染信息、DOM元素和该DOM元素的属性)的值是从0到254的,则使用单个字节;如果值为255或者以上的,则第一个字节为0xFF,第二个字节为(该待编码的信息的值-255)。Length是指Value字段中承载的二进制流的长度。Value承载了二进制流,长度由Length字段决定,该二进制流本身可以为数字或者字符串。通过二进制编码,能够大大减少服务器端和手机之间的流量传输压力。
3)根据所述客户端的显示屏幕信息,将所述页面的原始图片调整到所述客户端的显示屏幕能够显示的比例,得到所述页面的缩略图;
在获得页面的原始图片后,由于该原始图片是根据网页的页面生成的,所以该图片可能会很大,无法完整的在客户端的显示屏幕上进行显示,需要对原始图片进行缩放处理。如对某个WWW网页处理后生成一张1009×6450的原始图片,客户端端提交上来的屏幕宽度为240,为了让用户不需要左右翻页就可以看到网页的一个全景图,服务器端对生成的原始图片进行按比例缩放处理,则经过按比例缩放后的缩略图大小为240×(6450/(1009/240)),即240×1534大小的缩略图。
可选地,根据所述客户端的显示屏幕信息,将所述页面的原始图片调整到所述客户端的显示屏幕能够显示的比例,得到所述页面的缩略图之后,还包括:判断所述页面的缩略图的内存大小是否超过预设值,如果是,则根据所述客户端的显示屏幕信息对所述缩略图进行切割处理,以减少所述缩略图的内存大小。其中预设值可以是一个经验值也可以根据客户端的显示屏幕信息而设置,对此本实施例不做具体限定。本步骤中,在缩略图的处理上,也可以根据客户端的实际情况对缩略图大小进行切割等处理,例如有些WWW网页生成的缩略图很大,这样客户端在解压图片时需要的内存就非常大,这时服务器可以对这种大缩略图片进行一些处理,如根据移动终端的屏幕高度情况做一些图片切割处理,客户端就可以一次解压比较小的数据,其他的图片数据就可以在需要显示的时候进行解压。当然服务器端对缩略图的处理还可以根据客户端屏幕的显示信息进行图片的旋转处理、拉伸处理等,对此本实施例不做具体限定。
4)将所述页面的二进制渲染数据和所述缩略图中的指定的区域进行映射,使所述渲染数据和所述缩略图中的指定的区域一一对应。
本步骤中,在得到页面的二进制渲染数据和页面的缩略图片后,将页面的二进制渲染数据和所述缩略图中的指定的区域进行映射,使所述渲染数据和所述缩略图中的指定的区域一一对应,当在缩略图中定位一个区域时,就能映射到二进制渲染数据中相应的区域,这样当用户在选中缩略图中某一块区域进行点击放大浏览时,就可以快速的映射到二进制渲染数据中相应区域中的内容,客户端只要对该区域的渲染内容进行绘制显示就可以了。
本步骤中,可以通过坐标实现缩略图和二进制渲染数据的映射。例如网页渲染后的大小为1440*960的大小,最初生成的缩略图也是1440*960,如果客户端的上传的屏幕宽高为320*240,把1440*960的图片缩放为320*240的大小,此时缩放比例为x轴方向的缩放比例为1440/240=6,y轴方向的缩放比例为960/240=4,下发给客户端的缩略图图片就是320*240的大小,而且原始页面的大小也会下发给客户端,客户端根据缩略图的大小和原始页面的大小计算出缩放比例。当客户端点击一个例如{(10,10),(20,20)}这样一个区域时,根据上述缩放比例该区域就会映射回{(60,40),(120,80)}的区域,然后在渲染树二进制数据里面找到该区域的内容绘制就可以了显示对应区域的内容了。
304、服务器端根据所述客户端能够显示的图片参数的信息对所述页面上的图片进行转换和压缩,得到所述页面的图片数据。
本步骤中,将WWW网页上的图片进行单独处理,在ImageInsInfo结构里面添加了sPicContent字段,将图片数据存放到里面。其中,图片数据由图片的URL地址和图片二进制数据组成。其中图片数据和页面的二进制渲染数据是通过图片的URL地址作为对应,即将渲染树的二进制数据通过图片的URL和后面的图片二进制数据关联起来,通过SRC的URL到图片数据里面去找相应的数据。这样在客户端收到页面的二进制渲染数据后,当发现RenderImage元素中含有DOM属性SRC的时候,可以通过SRC的图片URL来查找WUP包中的ImageInsInfo结构体,进而获取图片数据。
305、服务器端将所述页面的二进制网页渲染数据、所述页面的缩略图和所述页面的图片数据返回给所述客户端。
本步骤中,将页面的二进制网页渲染数据、页面的缩略图和页面的图片数据进行WUP协议组包和压缩,依次发送到客户端上。其中组包和压缩属于现有技术,本实施例对此不再赘述。
本步骤中在对页面的二进制网页渲染数据、页面的缩略图和页面的图片数据进行组包和压缩之前,还可以在页面的二进制网页渲染数据、页面的缩略图和页面的图片数据进行组包和压缩的前部或者后部增加对应的文件标识和版本号,以供识别该二进制流。
306、客户端接收所述服务器端返回的所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据,根据所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据,对所述URL对应的页面进行绘制,以实现对所述页面的浏览。
本步骤中,客户端依次接收服务器端返回的URL对应的页面的缩略图、二进制渲染数据和图片数据,在接收到页面的缩略图时,在显示屏幕上马上输出该缩略图,以供客户端用户浏览,用户可以根据该缩略图看到访问的WWW网页的全貌,且该缩略图中没有对标签或是CSS进行处理,显示效果与PC机上的显示效果一样,只是由于客户端显示屏幕的限制,对页面进行了缩放处理。
客户端对接收到的数据进行解压和解析,在进行解压和解析的同时完成页面的绘制操作。其中根据所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据,对所述URL对应的页面进行绘制,包括:输出所述URL对应的页面的缩略图;当定位所述缩略图中的指定区域时,获取所述URL对应的页面的二进制渲染数据中与所述指定区域对应的二进制渲染数据;根据与所述指定区域对应的二进制渲染数据和所述URL对应的页面的图片数据对所述指定区域进行绘制。
本步骤中,客户端在显示屏幕上输出缩略图,客户端用户可以移动光标,选择缩略图上的任意一个区域进行放大浏览,如,用户选择了缩略图上的A区域进行浏览,则客户端获得A区域的坐标,拉取对应该坐标的二进制渲染数据和图片二进制数据,根据缩放比例将A区域进行放大显示。
本实施例的有益效果是:将页面分解成缩略图、二进制渲染数据和图片数据,使客户端根据缩略图、二进制渲染数据和图片数据进行绘制,不需要对WWW的网页进行CSS样式过滤和标签的转换操作,可以大大提高CSS样式支持和标签支持,提供了更好的页面渲染效果,让用户舒适的阅读大页面,大大提高用户了的体验度。且由于缩略图进行了适合适合屏幕排版能够使用户在客户端显示屏幕上看到WWW页面的全貌,大大提高了WWW页面的浏览体验。且对页面的处理在服务器端完成,客户端不需要解析渲染部分的代码,能减少客户端程序的大小,提高机型覆盖率;客户端不需要执行渲染计算,不需要一次绘制所有的二进制渲染数据,只需绘制用户在缩略图上选择的区域,减少了客户端的执行时间和内存消耗,提高了客户端的操作流畅性,进一步提高了用户的浏览体验。
实施例4
参见图4,本实施例中提供了一种服务器端,所述服务器端包括:页面抓取模块401、预处理模块402、图片处理模块403和发送模块404。
页面抓取模块401,用于接收客户端的URL请求,获取所述URL请求对应的页面,其中,所述URL请求中包括所述客户端的显示屏幕信息和所述客户端能够显示的图片参数的信息;
预处理模块402,用于根据所述客户端的显示屏幕信息对所述页面进行预处理,得到所述页面的二进制网页渲染数据和所述页面的缩略图,其中,所述二进制网页渲染数据和所述缩略图中的指定的区域一一对应;
图片处理模块403,用于根据所述客户端能够显示的图片参数的信息对所述页面上的图片进行转换和压缩,得到所述页面的图片数据;
发送模块404,用于将所述页面的缩略图、所述页面的二进制网页渲染数据和所述页面的图片数据返回给所述客户端,使所述客户端根据所述页面的缩略图、所述页面的二进制网页渲染数据和所述页面的图片数据对所述页面进行绘制,以实现对所述页面的浏览。
参见图5,所述页面抓取模块401,包括:
获取单元401a,用于获取所述URL请求对应的原始网页;
解析单元401b,用于对所述原始网页进行解析,获取并存储所述原始网页中图片标签对应的图片信息,并执行所述原始网页包含的Javascript,得到所述解析后的所述URL对应的页面。
参见图5,所述预处理模块402,包括:
渲染单元402a,用于对所述页面进行渲染,获得所述页面的渲染数据和所述页面的原始图片;
序列化单元402b,用于将所述页面的渲染数据通过序列化转换为二进制数据,得到所述页面的二进制渲染数据;
缩略图生成单元402c,用于根据所述客户端的显示屏幕信息,将所述页面的原始图片调整到所述客户端的显示屏幕能够显示的比例,得到所述页面的缩略图;
映射单元402d,用于将所述页面的二进制渲染数据和所述缩略图中的指定的区域进行映射,使所述渲染数据和所述缩略图中的指定的区域一一对应。
其中,所述渲染单元402a,包括:
原始图片生成子单元,用于根据所述客户端的显示屏幕信息,对所述页面上的文本进行排版,使得所述排版后的文本能够完整的显示在所述客户端的显示屏幕上,获得所述页面的原始图片。
可选地,缩略图生成单元402c包括:
切割子单元,用于判断所述页面的缩略图的内存大小是否超过预设值,如果是,则根据所述客户端的显示屏幕信息对所述缩略图进行切割处理,以减少所述缩略图的内存大小。
本实施例的有益效果是:将页面分解成缩略图、二进制渲染数据和图片数据,使客户端根据缩略图、二进制渲染数据和图片数据进行绘制,不需要对WWW的网页进行CSS样式过滤和标签的转换操作,可以大大提高CSS样式支持和标签支持,提供了更好的页面渲染效果,让用户舒适的阅读大页面,大大提高用户了的体验度。
实施例5
参见图6,本实施例中提供了一种客户端,所述客户端包括:发送模块501、接收模块502和页面绘制模块503。
发送模块501,用于向服务器端发送URL请求;
接收模块502,用于接收所述服务器端返回的所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据;
页面绘制模块503,用于根据所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据,对所述URL对应的页面进行绘制,以实现对所述页面的浏览。
参见图7,所述页面绘制模块503,包括:
输出单元503a,用于输出所述URL对应的页面的缩略图;
获取单元503b,用于当定位所述缩略图中的指定区域时,获取所述URL对应的页面的二进制渲染数据中与所述指定区域对应的二进制渲染数据;
绘制单元503c,用于根据与所述指定区域对应的二进制渲染数据和所述URL对应的页面的图片数据对所述指定区域进行绘制。
本实施例的有益效果是:将页面分解成缩略图、二进制渲染数据和图片数据,使客户端根据缩略图、二进制渲染数据和图片数据进行绘制,不需要对WWW的网页进行CSS样式过滤和标签的转换操作,可以大大提高CSS样式支持和标签支持,提供了更好的页面渲染效果,让用户舒适的阅读大页面,大大提高用户了的体验度。
实施例6
参见图8,本实施例中提供了一种获取网页的系统,所述系统包括:如实施例4所述的服务器端400和如实施例5所述的客户端500。
本实施例的有益效果是:将页面分解成缩略图、二进制渲染数据和图片数据,使客户端根据缩略图、二进制渲染数据和图片数据进行绘制,不需要对WWW的网页进行CSS样式过滤和标签的转换操作,可以大大提高CSS样式支持和标签支持,提供了更好的页面渲染效果,让用户舒适的阅读大页面,大大提高用户了的体验度。
本实施例提供的服务器端、客户端和系统,具体可以与方法实施例属于同一构思,其具体实现过程详见方法实施例,这里不再赘述。
值得注意的是,上述服务器端、客户端和系统实施例中,所包括的各个模块只是按照功能逻辑进行划分的,但并不局限于上述的划分,只要能够实现相应的功能即可;另外,各功能模块的具体名称也只是为了便于相互区分,并不用于限制本发明的保护范围。
本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成,也可以通过程序来指令相关的硬件完成,所述的程序可以存储于一种计算机可读存储介质中,上述提到的存储介质可以是只读存储器,磁盘或光盘等。
以上所述仅为本发明的较佳实施例,并不用以限制本发明,凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。
Claims (15)
1.一种获取网页的方法,其特征在于,所述方法包括:
接收客户端的统一资源定位符URL请求,获取所述URL请求对应的页面,其中,所述URL请求中包括所述客户端的显示屏幕信息和所述客户端能够显示的图片参数的信息;
根据所述客户端的显示屏幕信息对所述页面进行预处理,得到所述页面的二进制网页渲染数据和所述页面的缩略图,其中,所述二进制网页渲染数据和所述缩略图中的指定的区域一一对应;
根据所述客户端能够显示的图片参数的信息对所述页面上的图片进行转换和压缩,得到所述页面的图片数据;
将所述页面的缩略图、所述页面的二进制网页渲染数据和所述页面的图片数据返回给所述客户端,使所述客户端输出所述URL对应的页面的缩略图,并根据所述页面的缩略图、所述页面的二进制网页渲染数据和所述页面的图片数据对所述页面进行绘制,以实现对所述页面的浏览。
2.根据权利要求1所述的方法,其特征在于,所述获取所述URL请求对应的页面,包括:
获取所述URL请求对应的原始网页;
对所述原始网页进行解析,获取并存储所述原始网页中图片标签对应的图片信息,并执行所述原始网页包含的Javascript,得到所述解析后的所述URL对应的页面。
3.根据权利要求1所述的方法,其特征在于,所述根据所述客户端的显示屏幕信息对所述页面进行预处理,得到所述页面的二进制渲染数据和所述页面的缩略图,包括:
对所述页面进行渲染,获得所述页面的渲染数据和所述页面的原始图片;
将所述页面的渲染数据通过序列化转换为二进制数据,得到所述页面的二进制渲染数据;
根据所述客户端的显示屏幕信息,将所述页面的原始图片调整到所述客户端的显示屏幕能够显示的比例,得到所述页面的缩略图;
将所述页面的二进制渲染数据和所述缩略图中的指定的区域进行映射,使所述渲染数据和所述缩略图中的指定的区域一一对应。
4.根据权利要求3所述的方法,其特征在于,所述对所述页面进行渲染,获得所述页面的原始图片,包括:
根据所述客户端的显示屏幕信息,对所述页面上的文本进行排版,使得所述排版后的文本能够完整的显示在所述客户端的显示屏幕上,获得所述页面的原始图片。
5.根据权利要求3或4所述的方法,其特征在于,根据所述客户端的显示屏幕信息,将所述页面的原始图片调整到所述客户端的显示屏幕能够显示的比例,得到所述页面的缩略图之后,还包括:
判断所述页面的缩略图的内存大小是否超过预设值,如果是,则根据所述客户端的显示屏幕信息对所述缩略图进行切割处理,以减少所述缩略图的内存大小。
6.一种获取网页的方法,其特征在于,所述方法包括:
向服务器端发送统一资源定位符URL请求;
接收所述服务器端返回的所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据;
输出所述URL对应的页面的缩略图,并根据所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据,对所述URL对应的页面进行绘制,以实现对所述页面的浏览。
7.根据权利要求6所述的方法,其特征在于,所述根据所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据,对所述URL对应的页面进行绘制,包括:
当定位所述缩略图中的指定区域时,获取所述URL对应的页面的二进制渲染数据中与所述指定区域对应的二进制渲染数据;
根据与所述指定区域对应的二进制渲染数据和所述URL对应的页面的图片数据对所述指定区域进行绘制。
8.一种服务器端,其特征在于,所述服务器端包括:
页面抓取模块,用于接收客户端的统一资源定位符URL请求,获取所述URL请求对应的页面,其中,所述URL请求中包括所述客户端的显示屏幕信息和所述客户端能够显示的图片参数的信息;
预处理模块,用于根据所述客户端的显示屏幕信息对所述页面进行预处理,得到所述页面的二进制网页渲染数据和所述页面的缩略图,其中,所述二进制网页渲染数据和所述缩略图中的指定的区域一一对应;
图片处理模块,用于根据所述客户端能够显示的图片参数的信息对所述页面上的图片进行转换和压缩,得到所述页面的图片数据;
发送模块,用于将所述页面的缩略图、所述页面的二进制网页渲染数据和所述页面的图片数据返回给所述客户端,使所述客户端输出所述URL对应的页面的缩略图,并根据所述页面的缩略图、所述页面的二进制网页渲染数据和所述页面的图片数据对所述页面进行绘制,以实现对所述页面的浏览。
9.根据权利要求8所述的服务器端,其特征在于,所述页面抓取模块,包括:
获取单元,用于获取所述URL请求对应的原始网页;
解析单元,用于对所述原始网页进行解析,获取并存储所述原始网页中图片标签对应的图片信息,并执行所述原始网页包含的Javascript,得到所述解析后的所述URL对应的页面。
10.根据权利要求8所述的服务器端,其特征在于,所述预处理模块,包括:
渲染单元,用于对所述页面进行渲染,获得所述页面的渲染数据和所述页面的原始图片;
序列化单元,用于将所述页面的渲染数据通过序列化转换为二进制数据,得到所述页面的二进制渲染数据;
缩略图生成单元,用于根据所述客户端的显示屏幕信息,将所述页面的原始图片调整到所述客户端的显示屏幕能够显示的比例,得到所述页面的缩略图;
映射单元,用于将所述页面的二进制渲染数据和所述缩略图中的指定的区域进行映射,使所述渲染数据和所述缩略图中的指定的区域一一对应。
11.根据权利要求10所述的服务器端,其特征在于,所述渲染单元,包括:
原始图片生成子单元,用于根据所述客户端的显示屏幕信息,对所述页面上的文本进行排版,使得所述排版后的文本能够完整的显示在所述客户端的显示屏幕上,获得所述页面的原始图片。
12.根据权利要求10或11所述的服务器端,其特征在于,缩略图生成单元包括:
切割子单元,用于判断所述页面的缩略图的内存大小是否超过预设值,如果是,则根据所述客户端的显示屏幕信息对所述缩略图进行切割处理,以减少所述缩略图的内存大小。
13.一种客户端,其特征在于,所述客户端包括:
发送模块,用于向服务器端发送统一资源定位符URL请求;
接收模块,用于接收所述服务器端返回的所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据;
页面绘制模块,用于根据所述URL对应的页面的缩略图、所述URL对应的页面的二进制渲染数据和所述URL对应的页面的图片数据,对所述URL对应的页面进行绘制,以实现对所述页面的浏览;
所述页面绘制模块包括:
输出单元,用于输出所述URL对应的页面的缩略图。
14.根据权利要求13所述的客户端,其特征在于,所述页面绘制模块,还包括:
获取单元,用于当定位所述缩略图中的指定区域时,获取所述URL对应的页面的二进制渲染数据中与所述指定区域对应的二进制渲染数据;
绘制单元,用于根据与所述指定区域对应的二进制渲染数据和所述URL对应的页面的图片数据对所述指定区域进行绘制。
15.一种获取网页的系统,其特征在于,所述系统包括:如权利要求8-12任一项所述的服务器端和如权利要求13-14任一项所述的客户端。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201210164409.8A CN103425699B (zh) | 2012-05-24 | 2012-05-24 | 获取网页的方法、设备和系统 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201210164409.8A CN103425699B (zh) | 2012-05-24 | 2012-05-24 | 获取网页的方法、设备和系统 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN103425699A CN103425699A (zh) | 2013-12-04 |
CN103425699B true CN103425699B (zh) | 2016-11-09 |
Family
ID=49650455
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201210164409.8A Active CN103425699B (zh) | 2012-05-24 | 2012-05-24 | 获取网页的方法、设备和系统 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN103425699B (zh) |
Families Citing this family (15)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103677942B (zh) * | 2013-12-30 | 2017-09-05 | Tcl集团股份有限公司 | 一种移动终端浏览网络图片的方法和装置 |
US9779069B2 (en) * | 2014-01-31 | 2017-10-03 | Yahoo Holdings, Inc. | Model traversing based compressed serialization of user interaction data and communication from a client-side application |
CN103793532B (zh) * | 2014-02-27 | 2017-04-12 | 北京金山网络科技有限公司 | 一种页面导航方法、装置及浏览器 |
CN103902664B (zh) * | 2014-03-10 | 2017-01-25 | 百度在线网络技术(北京)有限公司 | 页面中图片的渲染方法及信息的提供方法、装置 |
CN103957466B (zh) * | 2014-05-21 | 2018-04-27 | 杭州华数智屏信息技术有限公司 | 基于机顶盒进行网页展示的方法、服务器及系统 |
CN106330814A (zh) * | 2015-06-16 | 2017-01-11 | 阿里巴巴集团控股有限公司 | 展示目标对象的详情信息的方法及装置 |
CN107038176B (zh) * | 2016-02-04 | 2020-06-23 | 阿里巴巴集团控股有限公司 | 网络图页面渲染方法、装置及设备 |
CN106055575A (zh) * | 2016-05-19 | 2016-10-26 | 天脉聚源(北京)传媒科技有限公司 | 一种网站页面优化加载的方法及装置 |
CN106528617B (zh) * | 2016-09-30 | 2019-08-16 | 北京小米移动软件有限公司 | 一种网页图片显示的方法及装置 |
CN106844580B (zh) * | 2017-01-09 | 2020-12-04 | 北京安云世纪科技有限公司 | 一种缩略图的生成方法、装置及移动终端 |
CN108427691B (zh) * | 2017-02-15 | 2021-11-16 | 腾讯科技(深圳)有限公司 | 网络数据传输方法、装置和计算机设备 |
CN107885792B (zh) * | 2017-10-19 | 2020-07-24 | 福建中金在线信息科技有限公司 | 网页文章显示方法、装置及系统 |
CN109144567B (zh) * | 2018-08-03 | 2021-09-14 | 苏州麦迪斯顿医疗科技股份有限公司 | 跨平台的网页渲染方法、装置、服务器及存储介质 |
CN111339458A (zh) * | 2018-12-18 | 2020-06-26 | 阿里巴巴集团控股有限公司 | 页面呈现方法和装置 |
CN111179164A (zh) * | 2019-11-28 | 2020-05-19 | 泰康保险集团股份有限公司 | 一种生成缩略图的方法和装置 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1529262A (zh) * | 2003-10-17 | 2004-09-15 | 深圳市卓然科技开发有限公司 | 网页在线浏览显示的实现方法 |
CN101860533A (zh) * | 2010-05-26 | 2010-10-13 | 卓望数码技术(深圳)有限公司 | 一种基于c/s架构浏览器的数据传输方法及服务器 |
CN102368243A (zh) * | 2011-09-08 | 2012-03-07 | 广州市动景计算机科技有限公司 | 用于在无图浏览模式下查看图片的方法、装置及移动终端 |
Family Cites Families (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US7680785B2 (en) * | 2005-03-25 | 2010-03-16 | Microsoft Corporation | Systems and methods for inferring uniform resource locator (URL) normalization rules |
-
2012
- 2012-05-24 CN CN201210164409.8A patent/CN103425699B/zh active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1529262A (zh) * | 2003-10-17 | 2004-09-15 | 深圳市卓然科技开发有限公司 | 网页在线浏览显示的实现方法 |
CN101860533A (zh) * | 2010-05-26 | 2010-10-13 | 卓望数码技术(深圳)有限公司 | 一种基于c/s架构浏览器的数据传输方法及服务器 |
CN102368243A (zh) * | 2011-09-08 | 2012-03-07 | 广州市动景计算机科技有限公司 | 用于在无图浏览模式下查看图片的方法、装置及移动终端 |
Also Published As
Publication number | Publication date |
---|---|
CN103425699A (zh) | 2013-12-04 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN103425699B (zh) | 获取网页的方法、设备和系统 | |
CN102487402B (zh) | 由服务器端实现网页渲染的方法、设备和系统 | |
CN107885848B (zh) | 基于web技术的网页截屏方法 | |
CN103392179B (zh) | 获取页面资源的方法及装置、浏览器及移动终端 | |
US8403222B2 (en) | Method of enabling the downloading of content | |
US20030200507A1 (en) | System and method for data publication through web pages | |
US20060230100A1 (en) | Web content transcoding system and method for small display device | |
CN101695198B (zh) | 实现无线应用通讯协议页面图片优化的方法和系统 | |
JP2004527041A (ja) | 携帯用計算デバイスへの無線通信媒体を介するコンテンツ送達のためのシステムおよび方法 | |
CN103353886A (zh) | 预览网页的方法及系统 | |
CN103336814B (zh) | 网页页面截图处理方法及装置 | |
WO2007038254A2 (en) | System and method for image processing | |
CN101763357A (zh) | 一种用于浏览器加载互联网资源的方法及系统 | |
CN101040283A (zh) | 表格相关数据缩减 | |
KR100967337B1 (ko) | 프록시 서버를 이용한 이동통신 단말기의 웹 브라우저 시스템 | |
US10289747B2 (en) | Dynamic file concatenation | |
CN102364460A (zh) | 基于移动终端的页面自动放大方法和系统 | |
EP4198773A1 (en) | Image processing method and apparatus, and computer readable storage medium | |
CN102314499A (zh) | 一种用于处理网页内容的方法与设备 | |
CN103646115A (zh) | 一种用于客户端访问网页的方法和系统 | |
CN103699652A (zh) | 一种访问网页的方法和系统 | |
JP2004220260A (ja) | ウェブページ閲覧システム及び画像配信サーバ | |
CN114297544A (zh) | 一种远程浏览方法、装置、设备及存储介质 | |
US20010056497A1 (en) | Apparatus and method of providing instant information service for various devices | |
KR20020006722A (ko) | 웹페이지 재구성 방법 및 이를 이용한 웹페이지 제공방법 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
C14 | Grant of patent or utility model | ||
GR01 | Patent grant | ||
TR01 | Transfer of patent right |
Effective date of registration: 20221121 Address after: 1402, Floor 14, Block A, Haina Baichuan Headquarters Building, No. 6, Baoxing Road, Haibin Community, Xin'an Street, Bao'an District, Shenzhen, Guangdong 518133 Patentee after: Shenzhen Yayue Technology Co.,Ltd. Address before: 2 East 403 room, SEG science and technology garden, Futian District, Guangdong, Shenzhen 518000, China Patentee before: TENCENT TECHNOLOGY (SHENZHEN) Co.,Ltd. |
|
TR01 | Transfer of patent right |