WO2014090187A1

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

Info

Publication number: WO2014090187A1
Application number: PCT/CN2013/089352
Authority: WO
Inventors: 韩学斌; 黄欢
Original assignee: Beijing Qihoo Technology Co Ltd; Qizhi Software Beijing Co Ltd
Current assignee: Beijing Qihoo Technology Co Ltd; Qizhi Software Beijing Co Ltd
Priority date: 2012-12-14
Filing date: 2013-12-13
Publication date: 2014-06-19
Anticipated expiration: 2015-06-14
Also published as: CN103019720A; CN103019720B

Abstract

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

Description

在浏览器中处理页面的方法及设备技术领域

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

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

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

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

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

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

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

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

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

图 2示出了根据本发明一个实施例的在浏览器中处理页面的设备的框图；图 3示出了用于执行根据本发明的方法的智能电子设备的框图；以及图 4示出了用于保持或者携带实现根据本发明的方法的程序代码的存储单元示意图。具体实施方式

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

Web页面运行在各种各样的浏览器当中，浏览器载入、解析和渲染页面的速度直接影响着用户体验。本发明提出一种在浏览器中处理页面的方法和一种在浏览器中处理页面的设备。本发明提出的在浏览器中处理页面的方法主要是，通过对需要延时呈现的元素进行注册，然后对所注册的需要延时呈现的元素进行延时解析、渲染和呈现，以使得对页面中的注册过的元素进行延时呈现处理，不仅能对页面中的图片进行延时呈现处理，而且能对其它的页面元素进行延时呈现处理，从而提高页面显示速度。下面结合图 1具体说明根据本发明一个实施例的、适于解决上述技术问题的在浏览器中处理网页的方法 100的流程图。骤骤 SS111100中中，，对对页页面面中中需需要要延延时时呈呈现现的的元元素素进进行行注注册册。。可可选选地地，，需需要要延延时时呈呈现现的的元元素素可可以以是是文文字字、、图图像像（（静静态态图图像像和和动动态态图图像像））、、 FF llaasshh动动画画、、声声音音、、视视频频、、表表格格、、导导航航栏栏和和交交互互式式表表单单中中的的任任意意一一种种。。

可可选选地地，，在在步步骤骤 SS111100中中，，可可通通过过将将需需要要延延时时呈呈现现的的元元素素嵌嵌入入到到自自定定义义类类型型的的 ssccrr iipptt标标签签中中的的方方式式实实现现注注册册需需要要延延时时呈呈现现的的元元素素，，其其代代码码如如下下：：

< <ssccrr iipptt ttyyppee=="" llaazzyyllooaadd "" >>

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

< <// ssccrr iipptt>>

通通过过注注册册可可以以将将部部分分 HHTTMMLL代代码码变变成成某某种种注注释释，，而而不不让让浏浏览览器器将将这这些些代代码码解解

随后，在步骤 S120中，在浏览器中解析和渲染该页面中未注册的元素。其

要显示在浏览器窗口中的网页内容的过程。

可选地，未注册的元素可以是文字、图像（静态图像和动态图像）、 Flash 动画、声音、视频、表格、导航栏和交互式表单中的任意一种。可选地，可通过页面渲染引擎来解析和渲染该页面中未注册的元素，页面渲染引擎负责处理网页的内容（HTML、 XML , 图像等）、整理信息（例如加入 CSS等），解析出网页中各个元素之间的关系，以及计算和准备好网页最后要在显示器上显示的结果。页面渲染引擎可以是 Tr ident排版引擎（是微软的视窗操作系统（Windows ) 搭载的网页浏览器一 Internet Explorer的排版引擎的名称），也可以是 Gecko 排版引擎（是套开放源代码的、以 C++编写的网页排版引擎）。当然可以理解的是，在本发明的实施例中并不限定页面渲染引擎的具体类型。

随后，在步骤 S130中，判断是否要解析和渲染所注册的元素。可选地，可通过以下两种方式判定是否要解析和渲染所注册的元素：方式一、判断所注册的元素是否位于浏览器的当前窗口中，这可以根据在页面渲染引擎所分析的、在所注册元素周围的非注册元素是否显示在浏览器的当前窗口中来进行判断；方式二、判断页面是否在浏览器的窗口中滚动。

其中，位于浏览器的当前窗口中的元素是指页面中在浏览当前窗口中显示的元素。通常一个页面由一个 HTML文档形成，一个 HTML文档的整体高度高于浏览器窗口的高度，那么一部分的页面会处于隐藏的状态，可以通过移动浏览器的滚动条来达到查看处于隐藏状态的部分页面。

在一些实施例中，在浏览器中解析和渲染该页面中未注册的元素，解析和渲染完成后，判断是否需要解析和渲染所注册的元素，如果元素需要立即呈现 (注册的元素位于浏览器的当前窗口或向下滚动页面），则进入步骤 S140 , 在步骤 S140, 在浏览器中解析和渲染所注册的元素；否则，进入步骤 S150, 在步骤 S150, 存储所注册的元素，等待合适时机（例如当浏览器的当前窗口上呈现的内容发生变化时）再进行呈现。该部分的实现代码如下：

//遍历所有注册的元素

$ (^/ script [type=lazyload] ^/ ) . each (function () {

var $this = $ (this) ;

//不是浏览器的当前窗口或用户滚动到的元素

if ($this. offset (). top - $ (window) . scroll Top () > documen t. document Element, cl ientHeight) {

//存储不需立即呈现的元素

lazy, push ($this)；

} else {

//否则，立即呈现

replace ($this)；

}

})；

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

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

ele = typeofele == 'object'？ ele： this;

ele. replaceWith( ele.val()\\ ele.html( ) );

}；

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

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

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

〈！ DOCTYPE HTML>

<html>

<hcad>

</head>

<body>

<div>

这里是浏览器当前窗口的内容

. . .

</div>

〈！一注册延时呈现的元素一〉

< script type= "lazyloa d ">

这里是需要延时呈现的内容

</script>

< script

src="ht tp: //s0. qhimg. com/ lib/ jquery/172. js "></script>

var lazy load = function () {

var lazy = [], //对注册的元素进行存储

〃对元素进行呈现

replace = function (clc) { ele = typeof ele == object ？ ele ： this;

ele. replaceWi th (ele. val () I lele. h tml ()) ;

}；

return {

in i t: fun ction () {

//判定元素是否被渲染

$ scri t [ type=lazyloa d] ^/ )■ each (f unc t ion () { //遍历所有注册的元素

var $this = $ (this)；

if ($this. offset () . top - $ (window) . scroll Top () > documen t, documen tElemen t. cl ien tHeigh t) { //不需要立即呈现

lazy, push ($this); 〃暂存元素 } else {

replace ($this); 〃呈现元素

}

})；

$ (window) . one scrolF , function () { / / 面滚动时, 呈现所存储的注册的元素

$. each (lazy, replace)；

}

}；

} ()；

</script>

$ (function () {

lazy load. ini t O; //延时呈现初始

})；

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

如图 2所示，本发明的在浏览器中处理页面的设备 200包括：元素注册器

210、元素解析和渲染判定器 220、元素解析和渲染器 230、元素呈现器 240和元素暂存器 260。

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

< script type=" lazyload" >

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

</script>

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

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

//遍历所有元素注册器里的元素

$ script [type=lazyload] ^/ ) . each (function () {

var $this = $ (this) ;

//不是浏览器的当前窗口或用户滚动到的元素

if ($this. offse t (). top - $ (window) . scroll Top () > documen t. documen t Elemen t, cl ien tHeigh t) {

〃不需立即呈现的元素放入元素暂存器中

lazy, push ($this)；

} else {

//否则，立即呈现

replace ($this)；

}

})；

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

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

var replace = function(ele){

ele = typeof ele = = 'object'？ ele： this;

ele. replaceWith( ele. val( ) 11 ele. html( ) );

};

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

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

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

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

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

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

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

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器（DSP )来实现根据本发明实施例的在浏览器中处理页面的设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序（例如，计算机程序和计算机程序产品）。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。智能电子设备。该智电子殳备传统上包括处理器 310和以存 ^者器 320形式的计算机程序产品或者计算机可读介质。存储器 320可以是诸如闪存、 EEPROM (电可擦除可编程只读存储器）、 EPROM、硬盘或者 ROM之类的码 331的存储空间 330。例如，用于程序代码的存储空间 ^30可以包括分别用一 ^或者多个计算机程产品中读或者写入到这一个或者多个计^ 程序产品中。这些计算机程序产品包括诸如硬盘，紧致盘（CD ) 、存储卡或者软盘之类的程序代码载体。这样的计算机程序产品通常为如参考图 4所述的便携式或者固定存储单元。该存储单元可以具有与图 3的智能电子设备中的存储器 320类似布置的存储段或者存储空间等。程序代码可以例如以适当序^ 1，Γ即可以由例如诸如 310之类的处理器读取的代码，这些代码当由智能电子设备运行时，导致该智能电子设备执行上面所描述的方法中的各个步骤。

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

Claims

权利要求

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

对页面中需要延时呈现的元素进行注册；

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

判断是否要解析和渲染所注册的元素，如果要解析和渲染，则在浏览器中解析和渲染所注册的元素，否则存储所注册的元素；以及

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

2、根据权利要求 1所述的方法，其中所述对页面中需要延时呈现的元素进行注册的步骤包括：

将需要延时呈现的元素嵌入到自定义类型的 scr ipt标签中。

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

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

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

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

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

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

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

元素注册器，被配置为对页面中需要延时呈现的元素进行注册；元素解析和渲染器，被配置为在浏览器中解析和渲染该页面中未注册的元素；

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

元素暂存器，被配置为存储所述元素解析和渲染判定器判断为不解析和渲染的已注册元素；以及

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

7、如权利要求 6所述的设备，其中所述元素注册器将需要延时呈现的元素嵌入到自定义类型的 scr ipt标签中来进行注册。

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

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

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

11、一种计算机程序，包括计算机可读代码，当智能电子设备运行所述计算机可读代码运行时，导致权利要求 1-5中的任一项权利要求所述的方法被执行。

12、一种计算机可读介质，其中存储了如权利要求 11所述的计算机程序。