CN103019720B - 在浏览器中处理页面的方法及设备 - Google Patents

Abstract

本发明公开了一种在浏览器中处理页面的方法及设备，该方法包括：对页面中需要延时呈现的元素进行注册；在浏览器中解析并渲染该页面中未注册的元素；判断是否要解析并渲染所注册的元素，如果要解析并渲染，则在浏览器中解析并渲染所注册的元素，否则存储所注册的元素；以及呈现所渲染的、位于浏览器的当前窗口中的元素。通过对需要延时呈现的元素进行注册，然后对所注册的需要延时呈现的元素进行延时解析、渲染和呈现，从而不仅能对页面中的图片进行延时呈现处理，而且能对其它的页面元素进行延时呈现处理，由此有效提高了页面的显示速度。

Description

在浏览器中处理页面的方法及设备

技术领域

本发明涉及计算机技术领域，具体涉及一种在浏览器中处理页面的方法及设备。

背景技术

随着互联网的发展，网站提供的内容越来越丰富，吸引了越来越多的用户浏览。然而，网站大量内容的展示同时也拖慢了网页的显示速度，于是延时呈现技术应运而生。延时呈现，是指在网页中先不解析和渲染还没有被用户浏览到的部分，而等到用户向下浏览至相应位置时才加载、解析和渲染并显示该部分的内容。例如，当有些用户只浏览网页中某一范围内的内容时，网页中的其它范围内的内容就不需要加载了。这样，可以有效地加快网页显示速度，还可以降低服务器的消耗。

然而在现有技术中，只能对页面中的图片进行延时呈现处理，对其它的页面元素则无法进行延时呈现。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的在浏览器中处理页面的方法及设备方法。

依据本发明的一个方面，提供了一种在浏览器中处理页面的方法，包括步骤：对页面中需要延时呈现的元素进行注册；在浏览器中解析和渲染该页面中未注册的元素；判断是否要解析和渲染所注册的元素，如果要解析和渲染，则在浏览器中解析和渲染所注册的元素，否则存储所注册的元素；以及呈现所渲染的、位于浏览器的当前窗口中的元素。

可选地，其中对页面中需要延时呈现的元素进行注册的步骤包括：将需要延时呈现的元素嵌入到自定义类型的script标签中。

可选地，判断是否要解析和渲染所注册的元素包括步骤：判断所注册的元素是否位于浏览器的当前窗口中。

可选地，判断是否要解析和渲染所注册的元素包括步骤：判断页面是否在浏览器的窗口中滚动。

可选地，该方法还包括步骤：当浏览器的当前窗口上呈现的内容发生变化时，判断是否要解析和渲染所存储的已注册的元素，如果要解析和渲染，则解析和渲染所注册的元素。

根据本发明的另一个方面，提供一种在浏览器中处理页面的设备，包括：元素注册器，被配置为对页面中需要延时呈现的元素进行注册；元素解析和渲染器，被配置为在浏览器中解析和渲染该页面中未注册的元素；元素解析和渲染判定器，被配置为判断是否要解析和渲染所注册的元素，如果要解析和渲染，则由元素解析和渲染器在浏览器中解析和渲染所注册的元素；元素暂存器，被配置为存储元素解析和渲染判定器判断为不解析和渲染的已注册元素；以及元素呈现器，被配置为呈现由元素解析和渲染器所解析和渲染的、位于浏览器的当前窗口中的元素。

可选地，其中元素注册器将需要延时呈现的元素嵌入到自定义类型的script标签中来进行注册。

可选地，其中元素解析和渲染判定器通过判断所注册的元素是否位于浏览器的当前窗口中来判断是否要解析和渲染所注册的元素。

可选地，元素解析和渲染判定器通过判断页面是否在浏览器的窗口中滚动来判断是否要解析和渲染所注册的元素。

可选地，其中当浏览器的当前窗口上呈现的内容发生变化时，元素解析和渲染判定器判断是否要解析和渲染元素暂存器所存储的已注册的元素，如果要解析和渲染，则由元素解析和渲染器来解析和渲染由元素暂存器存储的已注册的元素。

根据本发明的在浏览器中处理页面的方法及设备方法，可以通过对注册过的需要延时呈现的元素进行延时呈现，以使得对页面中的注册过的元素进行延时呈现处理，从而不仅能对页面中的图片进行延时呈现处理，而且能对其它的页面元素进行延时呈现处理，由此有效提高了页面的显示速度。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明一个实施例的在浏览器中处理页面的方法的流程图；以及

图2示出了根据本发明一个实施例的在浏览器中处理页面的设备的框图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

Web页面运行在各种各样的浏览器当中，浏览器载入、解析和渲染页面的速度直接影响着用户体验。本发明提出一种在浏览器中处理页面的方法和一种在浏览器中处理页面的设备。本发明提出的在浏览器中处理页面的方法主要是，通过对需要延时呈现的元素进行注册，然后对所注册的需要延时呈现的元素进行延时解析、渲染和呈现，以使得对页面中的注册过的元素进行延时呈现处理，不仅能对页面中的图片进行延时呈现处理，而且能对其它的页面元素进行延时呈现处理，从而提高页面显示速度。下面结合图1具体说明根据本发明一个实施例的、适于解决上述技术问题的在浏览器中处理网页的方法100的流程图。

如图1所示，本发明的在浏览器中处理页面的方法100始于步骤S110，在步骤S110中，对页面中需要延时呈现的元素进行注册。可选地，需要延时呈现的元素可以是文字、图像（静态图像和动态图像）、Flash动画、声音、视频、表格、导航栏和交互式表单中的任意一种。

可选地，在步骤S110中，可通过将需要延时呈现的元素嵌入到自定义类型的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，存储所注册的元素，等待合适时机（例如当浏览器的当前窗口上呈现的内容发生变化时）再进行呈现。该部分的实现代码如下：

在步骤S130中判断需要解析和渲染而进入到步骤S140，在步骤S140中对所注册的元素在浏览器中进行解析和渲染之后，进入步骤S160，在步骤S160中，呈现所渲染的、位于浏览器的当前窗口中的元素，然后结束整个方法流程100。

可选地，当需要呈现元素时（即注册的元素位于浏览器的当前窗口或向下滚动页面时），则对注册的元素进行呈现，步骤S160的部分实现代码如下：

另外，在步骤S130中判断不需要解析和渲染时，则进入到步骤S150，而在步骤S150之后，还返回到步骤S130中，这样，在浏览器的当前窗口上呈现的内容发生变化时，在步骤S130中还可以判断是否要呈现之前未被解析和渲染而被存储的所注册的元素。

需要说明的是，图1所示的方法并不限定按所示的各步骤的顺序进行，可以根据需要调整各步骤的先后顺序，例如步骤S120也可在步骤S160之后，或者与步骤S160同时进行，另外，所述步骤也不限定于上述步骤划分，上述步骤可以进一步拆分成更多步骤也可以合并成更少步骤。

下面结合一个具体的示例，来介绍本发明的实施例中的在浏览器中处理页面的方法的流程，实现代码如下：

下面结合图2说明根据本发明的一个实施例的、适于解决上述问题的一种在浏览器中处理页面的设备200。

如图2所示，本发明的在浏览器中处理页面的设备200包括：元素注册器210、元素解析和渲染判定器220、元素解析和渲染器230、元素呈现器240和元素暂存器260。

其中，元素注册器210被配置为对页面中需要延时呈现的元素进行注册。可选地，需要延时呈现的元素可以是文字、图像（静态图像和动态图像）、Flash动画、声音、视频、表格、导航栏和交互式表单中的任意一种。在一些实施例中，元素注册器210将需要延时呈现的元素嵌入到自定义类型的script标签中来进行注册。其代码如下：

<script type=”lazyload”>

这里是要延时呈现的HTML代码

</script>

元素解析和渲染器230被配置为在浏览器中解析和渲染该页面中未注册的元素以及需要解析和渲染的在元素注册器210中注册的元素。可选地，未注册的元素可以是文字、图像（静态图像和动态图像）、Flash动画、声音、视频、表格、导航栏和交互式表单中的任意一种。该元素解析和渲染器230负责取得网页的内容（HTML、XML、图像等等）、整理信息（例如加入CSS等），以及计算网页的显示方式然后会输出至电子设备的显示屏，元素解析和渲染器230可以是Trident排版引擎（是微软的视窗操作系统（Windows）搭载的网页浏览器—Internet Explorer的排版引擎的名称），也可以是Gecko排版引擎（是套开放源代码的、以C++编写的网页排版引擎）。当然可以理解的是，在本发明的实施例中并不限定元素解析和渲染器230的具体类型。

元素解析和渲染判定器220被配置为判断是否要解析和渲染所注册的元素，如果要解析和渲染，则由元素解析和渲染器230在浏览器中解析和渲染所注册的元素。可选地，所注册的元素可以是文字、图像（静态图像和动态图像）、Flash动画、声音、视频、表格、导航栏和交互式表单中的任意一种。在一些实施例中，在浏览器中由元素解析和渲染器230解析和渲染该页面中未注册的元素，解析和渲染完成后，由元素解析和渲染判定器220判断注册的元素是否需要解析和渲染，如果需要对注册的元素立即呈现（位于浏览器的当前窗口或向下滚动页面），则由元素解析和渲染器230对需要解析和渲染的注册的元素进行解析和渲染，然后由元素呈现器240对所解析和渲染的非注册的元素以及所解析和渲染的注册的元素进行呈现；如果元素解析和渲染判定器220判断不需要对注册的元素立即呈现，则将不需要解析和渲染的注册的元素存储到元素暂存器260中，等待合适时机（例如当浏览器的当前窗口上呈现的内容发生变化时）再进行呈现，部分实现代码如下：

在一些实施例中，元素解析和渲染判定器220通过判断所注册的元素是否位于浏览器的当前窗口中来判断是否要解析和渲染所注册的元素。在另一些实施例中，元素解析和渲染判定器220也通过判断所述页面是否在浏览器的窗口中滚动来判断是否要解析和渲染所注册的元素。

元素呈现器240被配置为呈现由元素解析和渲染器所解析和渲染的、位于浏览器的当前窗口中的元素。在一些实施例中，当需要呈现元素时（浏览器当前窗口呈现完成或用户向下滚动页面时），将存储的元素移交给元素呈现器进行呈现，部分实现代码如下：

元素暂存器260被配置为存储元素解析和渲染判定器220判断为不解析和渲染的已注册元素。

在一些实施例中，当浏览器的当前窗口上呈现的内容发生变化时，元素解析和渲染判定器220判断是否要解析和渲染元素暂存器260所存储的已注册的元素，如果要解析和渲染，则由元素解析和渲染器230来解析和渲染由元素暂存器260存储的已注册的元素。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书（包括伴随的权利要求、摘要和附图）中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书（包括伴随的权利要求、摘要和附图）中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器（DSP）来实现根据本发明实施例的在浏览器中处理页面的设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序（例如，计算机程序和计算机程序产品）。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (8)

1.一种在浏览器中处理页面的方法，包括步骤：

将页面中需要延时呈现的元素嵌入到自定义类型的script标签中来进行注册，通过注册将部分HTML代码变成注释，不让浏览器将所述部分HTML代码解析、渲染并呈现；所述需要延时呈现的元素是文字、图像、Flash动画、声音、视频、表格、导航栏和交互式表单中的任意一种；

在浏览器中通过页面渲染引擎解析和渲染该页面中未注册的元素；

遍历所有注册的元素，判断是否要解析和渲染所注册的元素，如果要解析和渲染，则在浏览器中解析和渲染所注册的元素，否则存储所注册的元素，等待合适时机再进行呈现；以及

呈现所解析和渲染的、位于浏览器的当前窗口中的元素。

2.根据权利要求1所述的方法，其中，所述判断是否要解析和渲染所注册的元素包括步骤：

判断所注册的元素是否位于浏览器的当前窗口中。

3.根据权利要求1所述的方法，其中所述判断是否要解析和渲染所注册的元素包括步骤：

判断所述页面是否在浏览器的窗口中滚动。

4.根据权利要求1-3中任一个所述的方法，还包括步骤，

当浏览器的当前窗口上呈现的内容发生变化时，判断是否要解析和渲染所存储的已注册的元素，如果要解析和渲染，则解析和渲染所注册的元素。

5.一种在浏览器中处理页面的设备，包括：

元素注册器，被配置为将页面中需要延时呈现的元素嵌入到自定义类型的script标签中来进行注册，通过注册将部分HTML代码变成注释，不让浏览器将所述部分HTML代码解析、渲染并呈现；所述需要延时呈现的元素是文字、图像、Flash动画、声音、视频、表格、导航栏和交互式表单中的任意一种；

元素解析和渲染器，被配置为在浏览器中通过页面渲染引擎解析和渲染该页面中未注册的元素；

元素解析和渲染判定器，被配置为遍历所有注册的元素，判断是否要解析和渲染所注册的元素，如果要解析和渲染，则由所述元素解析和渲染器在浏览器中解析和渲染所注册的元素；

元素暂存器，被配置为存储所述元素解析和渲染判定器判断为不解析和渲染的已注册元素，用以等待合适时机再进行呈现；以及

元素呈现器，被配置为呈现由元素解析和渲染器所渲染的、位于浏览器的当前窗口中的元素。

6.如权利要求5所述的设备，其中所述元素解析和渲染判定器通过判断所注册的元素是否位于浏览器的当前窗口中来判断是否要解析和渲染所注册的元素。

7.如权利要求5所述的设备，其中所述元素解析和渲染判定器通过判断所述页面是否在浏览器的窗口中滚动来判断是否要解析和渲染所注册的元素。

8.根据权利要求5-7中任一所述的设备，其中当浏览器的当前窗口上呈现的内容发生变化时，所述元素解析和渲染判定器判断是否要解析和渲染所述元素暂存器所存储的已注册的元素，如果要解析和渲染，则由所述元素解析和渲染器来解析和渲染由所述元素暂存器存储的已注册的元素。