专利名称：在浏览器中处理页面的方法及设备的制作方法
技术领域：
本发明涉及计算机技术领域，具体涉及一种在浏览器中处理页面的方法及设备。
背景技术：
随着互联网的发展，网站提供的内容越来越丰富，吸引了越来越多的用户浏览。然而，网站大量内容的展示同时也拖慢了网页的显示速度，于是延时呈现技术应运而生。延时呈现，是指在网页中先不解析和渲染还没有被用户浏览到的部分，而等到用户向下浏览至相应位置时才加载、解析和渲染并显示该部分的内容。例如，当有些用户只浏览网页中某一范围内的内容时，网页中的其它范围内的内容就不需要加载了。这样，可以有效地加快网页显示速度，还可以降低服务器的消耗。然而在现有技术中，只能对页面中的图片进行延时呈现处理，对其它的页面元素则无法进行延时呈现。
发明内容
鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的在浏览器中处理页面的方法及设备方法。依据本发明的一个方面，提供了一种在浏览器中处理页面的方法，包括步骤对页面中需要延时呈现的元素进行注册；在浏览器中解析和渲染该页面中未注册的元素；判断是否要解析和渲染所注册的元素，如果要解析和渲染，则在浏览器中解析和渲染所注册的元素，否则存储所注册的元素；以及呈现所渲染的、位于浏览器的当前窗口中的元素。可选地，其中对页面中需要延时呈现的元素进行注册的步骤包括将需要延时呈现的元素嵌入到自定义类型的script标签中。可选地，判断是否要解析和渲染所注册的元素包括步骤判断所注册的元素是否位于浏览器的当前窗口中。可选地，判断是否要解析和渲染所注册的元素包括步骤判断页面是否在浏览器的窗口中滚动。可选地，该方法还包括步骤当浏览器的当前窗口上呈现的内容发生变化时，判断是否要解析和渲染所存储的已注册的元素，如果要解析和渲染，则解析和渲染所注册的元素。根据本发明的另一个方面，提供一种在浏览器中处理页面的设备，包括元素注册器，被配置为对页面中需要延时呈现的元素进行注册；元素解析和渲染器，被配置为在浏览器中解析和渲染该页面中未注册的元素；元素解析和渲染判定器，被配置为判断是否要解析和渲染所注册的元素，如果要解析和渲染，则由元素解析和渲染器在浏览器中解析和渲染所注册的元素；元素暂存器，被配置为存储元素解析和渲染判定器判断为不解析和渲染的已注册元素；以及元素呈现器，被配置为呈现由元素解析和渲染器所解析和渲染的、位于浏览器的当前窗口中的元素。
可选地，其中元素注册器将需要延时呈现的元素嵌入到自定义类型的script标签中来进行注册。可选地，其中元素解析和渲染判定器通过判断所注册的元素是否位于浏览器的当前窗口中来判断是否要解析和渲染所注册的元素。可选地，元素解析和渲染判定器通过判断页面是否在浏览器的窗口中滚动来判断是否要解析和渲染所注册的元素。可选地，其中当浏览器的当前窗口上呈现的内容发生变化时，元素解析和渲染判定器判断是否要解析和渲染元素暂存器所存储的已注册的元素，如果要解析和渲染，则由元素解析和渲染器来解析和渲染由元素暂存器存储的已注册的元素。根据本发明的在浏览器中处理页面的方法及设备方法，可以通过对注册过的需要延时呈现的元素进行延时呈现，以使得对页面中的注册过的元素进行延时呈现处理，从而不仅能对页面中的图片进行延时呈现处理，而且能对其它的页面元素进行延时呈现处理，由此有效提高了页面的显示速度。上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式
。
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中图1示出了根据本发明一个实施例的在浏览器中处理页面的方法的流程图；以及图2示出了根据本发明一个实施例的在浏览器中处理页面的设备的框图。
具体实施例方式下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。Web页面运行在各种各样的浏览器当中，浏览器载入、解析和渲染页面的速度直接影响着用户体验。本发明提出一种在浏览器中处理页面的方法和一种在浏览器中处理页面的设备。本发明提出的在浏览器中处理页面的方法主要是，通过对需要延时呈现的元素进行注册，然后对所注册的需要延时呈现的元素进行延时解析、渲染和呈现，以使得对页面中的注册过的元素进行延时呈现处理，不仅能对页面中的图片进行延时呈现处理，而且能对其它的页面元素进行延时呈现处理，从而提高页面显示速度。下面结合图1具体说明根据本发明一个实施例的、适于解决上述技术问题的在浏览器中处理网页的方法100的流程图。如图1所示，本发明的在浏览器中处理页面的方法100始于步骤S110，在步骤SllO中，对页面中需要延时呈现的元素进行注册。可选地，需要延时呈现的元素可以是文字、图像(静态图像和动态图像)、Flash动画、声音、视频、表格、导航栏和交互式表单中的任
意一种。可选地，在步骤SllO中，可通过将需要延时呈现的元素嵌入到自定义类型的script标签中的方式实现注册需要延时呈现的元素，其代码如下〈script type=” lazyload，，>这里是要延时呈现的HTML代码〈/script〉通过注册可以将部分HTML代码变成某种注释，而不让浏览器将这些代码解析(parse)、渲染(render)并呈现。随后，在步骤S120中，在浏览器中解析和渲染该页面中未注册的元素。其中，例如，页面解析和渲染可以是浏览器将HTML代码根据HTML规范定义的规则而准备要显示在浏览器窗口中的网页内容的过程。可选地，未注册的元素可以是文字、图像(静态图像和动态图像)、Flash动画、声音、视频、表格、导航栏和交互式表单中的任意一种。可选地，可通过页面渲染引擎来解析和渲染该页面中未注册的元素，页面渲染引擎负责处理网页的内容(HTML、XML、图像等)、整理信息(例如加入CSS等)，解析出网页中各个元素之间的关系，以及计算和准备好网页最后要在显示器上的显示结果。页面渲染引擎可以是Trident排版引擎(是微软的视窗操作系统(Windows)搭载的网页浏览器一Internet Explorer的排版引擎的名称),也可以是Gecko排版引擎(是套开放源代码的、以C++编写的网页排版引擎)。当然可以理解的是，在本发明的实施例中并不限定页面渲染引擎的具体类型。随后，在步骤S130中，判断是否要解析和渲染所注册的元素。可选地，可通过以下两种方式判定是否要解析和渲染所注册的元素方式一、判断所注册的元素是否位于浏览器的当前窗口中，这可以根据在页面渲染引擎所分析的、在所注册元素周围的非注册元素是否显示在浏览器的当前窗口中来进行判断；方式二、判断页面是否在浏览器的窗口中滚动。其中，位于浏览器的当前窗口中的元素是指页面中在浏览当前窗口中显示的元素。通常一个页面由一个HTML文档形成，一个HTML文档的整体高度高于浏览器窗口的高度，那么一部分的页面会处于隐藏的状态，可以通过移动浏览器的滚动条来达到查看处于隐藏状态的部分页面。在一些实施例中，在浏览器中解析和渲染该页面中未注册的元素，解析和渲染完成后，判断是否需要解析和渲染所注册的元素，如果元素需要立即呈现(注册的元素位于浏览器的当前窗口或向下滚动页面)，则进入步骤S140，在步骤S140，在浏览器中解析和渲染所注册的元素；否则，进入步骤S150，在步骤S150，存储所注册的元素，等待合适时机(例如当浏览器的当前窗口上呈现的内容发生变化时)再进行呈现。该部分的实现代码如下//遍历所有注册的元素
I (f script [type=lazyload],). each (funct Ion () { ar Ithis = $ (this);
//不是浏览器的当前窗口或用户滚动到的元素
if (!this, offset 0 . top - S (window) scroI ITop () > document,doc iiiiien t EI einen t. client He i ght) {
//存储不需立即呈现的元素
lazy, push (Sth is);
}else {
//否則，立即呈现
replace (Sthi s);
}
D；在步骤S130中判断需要解析和渲染而进入到步骤S140，在步骤S140中对所注册的元素在浏览器中进行解析和渲染之后，进入步骤S160，在步骤S160中，呈现所渲染的、位于浏览器的当前窗口中的元素，然后结束整个方法流程100。可选地，当需要呈现元素时(即注册的元素位于浏览器的当前窗口或向下滚动页面时)，则对注册的元素进行呈现，步骤S160的部分实现代码如下
var replace = fund ion (ele) {
ele = typeof ele == 'object' ele : this: ele, repiacef i th (ele. val () I jele. html 0);
} *
J I另外，在步骤S130中判断不需要解析和渲染时，则进入到步骤S150，而在步骤S150之后，还返回到步骤S130中，这样，在浏览器的当前窗口上呈现的内容发生变化时，在步骤S130中还可以判断是否要呈现之前未被解析和渲染而被存储的所注册的元素。需要说明的是，图1所示的方法并不限定按所示的各步骤的顺序进行，可以根据需要调整各步骤的先后顺序，例如步骤S120也可在步骤S160之后，或者与步骤S160同时进行，另外，所述步骤也不限定于上述步骤划分，上述步骤可以进一步拆分成更多步骤也可以合并成更少步骤。下面结合一个具体的示例，来介绍本发明的实施例中的在浏览器中处理页面的方法的流程，实现代码如下
权利要求
1.一种在浏览器中处理页面的方法，包括步骤对页面中需要延时呈现的元素进行注册；在浏览器中解析和渲染该页面中未注册的元素；判断是否要解析和渲染所注册的元素，如果要解析和渲染，则在浏览器中解析和渲染所注册的元素，否则存储所注册的元素；以及呈现所解析和渲染的、位于浏览器的当前窗口中的元素。
2.根据权利要求1所述的方法，其中所述对页面中需要延时呈现的元素进行注册的步骤包括将需要延时呈现的元素嵌入到自定义类型的script标签中。
3.根据权利要求1或者2所述的方法，其中，所述判断是否要解析和渲染所注册的元素包括步骤判断所注册的元素是否位于浏览器的当前窗口中。
4.根据权利要求1或者2所述的方法，其中所述判断是否要解析和渲染所注册的元素包括步骤判断所述页面是否在浏览器的窗口中滚动。
5.根据权利要求1-4中任一个所述的方法，还包括步骤，当浏览器的当前窗口上呈现的内容发生变化时，判断是否要解析和渲染所存储的已注册的元素，如果要解析和渲染，则解析和渲染所注册的元素。
6.一种在浏览器中处理页面的设备，包括元素注册器，被配置为对页面中需要延时呈现的元素进行注册；元素解析和渲染器，被配置为在浏览器中解析和渲染该页面中未注册的元素；元素解析和渲染判定器，被配置为判断是否要解析和渲染所注册的元素，如果要解析和渲染，则由所述元素解析和渲染器在浏览器中解析和渲染所注册的元素；元素暂存器，被配置为存储所述元素解析和渲染判定器判断为不解析和渲染的已注册元素；以及元素呈现器，被配置为呈现由元素解析和渲染器所渲染的、位于浏览器的当前窗口中的元素。
7.如权利要求6所述的设备，其中所述元素注册器将需要延时呈现的元素嵌入到自定义类型的script标签中来进行注册。
8.如权利要求6或者7所述的设备，其中所述元素解析和渲染判定器通过判断所注册的元素是否位于浏览器的当前窗口中来判断是否要解析和渲染所注册的元素。
9.如权利要求6或者7所述的设备，其中所述元素解析和渲染判定器通过判断所述页面是否在浏览器的窗口中滚动来判断是否要解析和渲染所注册的元素。
10.根据权利要求6-9中任一所述的设备，其中当浏览器的当前窗口上呈现的内容发生变化时，所述元素解析和渲染判定器判断是否要解析和渲染所述元素暂存器所存储的已注册的元素，如果要解析和渲染，则由所述元素解析和渲染器来解析和渲染由所述元素暂存器存储的已注册的元素。
全文摘要
本发明公开了一种在浏览器中处理页面的方法及设备，该方法包括对页面中需要延时呈现的元素进行注册；在浏览器中解析并渲染该页面中未注册的元素；判断是否要解析并渲染所注册的元素，如果要解析并渲染，则在浏览器中解析并渲染所注册的元素，否则存储所注册的元素；以及呈现所渲染的、位于浏览器的当前窗口中的元素。通过对需要延时呈现的元素进行注册，然后对所注册的需要延时呈现的元素进行延时解析、渲染和呈现，从而不仅能对页面中的图片进行延时呈现处理，而且能对其它的页面元素进行延时呈现处理，由此有效提高了页面的显示速度。
文档编号G06F9/44GK103019720SQ20121054498
公开日2013年4月3日 申请日期2012年12月14日 优先权日2012年12月14日
发明者韩学斌, 黄欢 申请人:北京奇虎科技有限公司, 奇智软件(北京)有限公司