专利名称：页面加载系统和方法
技术领域：
本发明涉及网络技术领域，具体涉及一种页面加载系统和方法。
背景技术：
网址导航作为浏览器的起始页，其打开速度是很重要的一个指标。早期的网址导航绝大部分都是静态网页，页面比较小，加载速度比较快。但随着信息资源的不断丰富和网址导航的业务增长，网址导航页面中所承载的信息越来越多，例如天气预报、搜索热词、最新资讯等。一方面，这些信息会增大页面的大小；另一方面，这些信息会经常变化，在加载页面时需要动态地向服务器请求更新数据。在这种情况下，网址导航页面的加载速度变慢，根据网速的快慢不同，在网址导航页面的数据块的位置会呈现不同时间的空白或相应的提示。图I示出了现有技术中网址导航页面的一部分的示意图，如图I所示，在这个数据块的位置未能正常的显示数据，而是出现“请稍候，……”的提示。
发明内容
鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的页面加载系统和页面加载方法。根据本发明的一个方面，提供了一种页面加载方法，包括根据页面访问请求，向服务器请求构成完整页面的基本文件；读取已存储的附加数据；根据所述基本文件和附加数据，获取完整页面并显示；当所述附加数据失效时，删除所述附加数据。根据本发明的另一方面，提供了一种页面加载系统，其包括客户端和服务器；所述客户端包括页面加载装置，该页面加载装置包括请求模块，用于根据页面访问请求，向服务器请求构成完整页面的基本文件；读取模块，用于读取已存储的附加数据；显示模块，用于根据所述基本文件和附加数据，获取完整页面并显示。根据本发明提供的页面加载系统和方法，在接收到用户的页面访问请求后，只需向服务器请求构成完整页面的基本文件，根据该基本文件和已存储的附加数据获取完整页面，与现有技术中所有的页面数据都是在接收到用户的页面访问请求后一并向服务器请求相比，减少了所请求的信息量，提高了网页加载速度，避免了页面中某些数据块的位置呈现不同时间的空白或相应的提示的问题。上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式
。
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了 。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中图I示出了现有技术中网址导航页面的一部分的示意图；图2示出了根据本发明一个实施例的页面加载方法的流程图；图3示出了根据本发明另一个实施例的页面加载方法的流程图；图4a和图4b示出了本发明实施例中网址导航页面的一部分的示意图；图5示出了根据本发明一个实施例的页面加载装置的结构示意图。
具体实施例方式下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。图2示出了根据本发明一个实施例的页面加载方法的流程图。如图2所示，该页面加载方法包括以下步骤步骤101、根据页面访问请求，向服务器请求构成完整页面的基本文件。以网址导航页面为例，当用户请求打开网址导航页面时，客户端的浏览器接收到网址导航页面访问请求。根据该网址导航页面访问请求，客户端向服务器请求构成完整页面的基本文件。可选地，构成完整页面的基本文件可以是构成完整页面的最小文件，其包含了页面中最为基本的信息，例如静态信息，该静态信息是指页面中比较稳定的部分，例如网址链接、板块标题等不经常变动的信息。网址导航页面的基本文件是指构成导航首页的基本元素，包括页面的结构、链接、图片等信息。步骤102、读取已存储的附加数据。附加数据包括页面中除了基本文件所包含的信息之外的其它信息，例如动态信息，该动态信息是页面中经常变化的、需要与服务器动态交互的部分，比如天气、笑话、搜索热词等信息，这些信息需要经常更新，即需要经常和服务器互动。附加数据是通过本地存储设备向服务器请求获得和更新的，本地存储设备位于客户端的计算机系统。在用户没有请求打开网址导航页面时，本地存储设备就静默地向服务器请求获得最新数据，并存储这些最新的数据。可选地，附加数据采用浏览器提供的本地存储机制存储在本地存储设备中，根据浏览器类型的不同，所采用的本地存储机制也会有所不同。以IE浏览器为例，附加数据可以存储在本地存储设备的用户数据(Userdata)区。Userdata区是微软为IE在系统中专门开辟的存储空间，它对单个文件的大小限制为128KB，在一个域名下总共可以保存1024KB的文件，文件个数没有限制。在受限站点里，单个文件的大小限制为64KB，在一个域名下总共可以保存640KB的文件。以另一种浏览器为例，附加数据可以采用Local storage的机制进行存储。简单来说,Local storage就是一种让web页面能够以键值对的形式客户端的web浏览器中存储数据的方法，键就是存储的值的编号，值就是要存放的数据本身。这种数据在离开web站点、关闭标签页、退出浏览器等时候依然保存。但这种数据不会被发送到远程web服务器(除非手动发送)。另外，这种机制是web浏览器原生提供的，不需要第三方插件的支持。步骤103、根据基本文件和附加数据，获取完整页面并显示。将包含动态信息的附加数据加载到基本文件上，获取完整页面。本文将这种完整页面称为伪静态页面。例如伪静态页可以理解为，通过读取本地存储的数据，使页面加载完整，使看上去像是一个静态页。可以与动态网页对比来理解，动态网页就是用户打开时，会从服务器请求数据，但这个过程会根据网络情况有一定的延时，用户需要等待一段时间才可以看到数据。如haol23的天气预报，网速慢的情况下，会显示，正在加载天气。所以，伪静态页面，就是用户第一眼看到的是完整页面，我们在服务端静默去更新数据。可选地，获得完整页面可以通过页面渲染方法来实现，具体地，通过从服务器获取 基本文件，在本地存储设备中获取附加数据，然后在浏览器里渲染基本文件和附加数据。本方法可以先渲染基本文件，再渲染附加数据；也可以同时渲染基本文件和附加数据。根据本实施例提供给的页面加载方法，在接收到用户的页面访问请求后，只需向服务器请求构成完整页面的基本文件，根据该基本文件和已存储的附加数据获取完整页面，与现有技术中所有的页面数据都是在接收到用户的页面访问请求后一并向服务器请求相比，减少了所请求的信息量，提高了网页加载速度，避免了页面中某些数据块的位置呈现不同时间的空白或相应的提示的问题。本方法主要是利用本地存储来构造伪静态页面，来提高网页显示速度，缩短网页空白时间。图3示出了根据本发明另一个实施例的页面加载方法的流程图。如图3所示，该页面加载方法包括以下步骤步骤201、通过本地存储设备向服务器请求获得和更新附加数据。图4a和图4b示出了本发明实施例中网址导航页面的一部分的示意图。图4a示出的是热门电影·电视剧的最新资讯，图4b示出的是天气预报的最新数据，这些信息都是会经常变化的动态信息。这种动态信息的相关数据为附加数据，本实施例通过客户端的计算机系统的本地存储设备定期地向服务器请求，而不是等到用户请求访问该页面时才去请求。对于不同的附加数据的类型，时效性的要求会有所不同。因此，可以根据附加数据的类型，采用预设的时间间隔通过本地存储设备向服务器请求更新附加数据。如图4b所示的天气预报数据，它的时效性要求会很高，一般每天会有3次以上的更新，这类数据预设的更新时间间隔会较短。如图4a所示的热门电影·电视剧的数据，它的时效性要求会较低，这类数据预设的更新时间间隔会较长。作为一种具体实施方式
，更新附加数据可以调用如下更新(update)方法update: function(3cey,delay) {varself=this;if(key)
{
delay = O |(delay;setTimeout(function(){self.serverLoad(key);
} ,delay);
} return this;
}步骤202、将附加数据存储在本地存储设备中。对于不同类型的浏览器，附加数据所采用的本地存储机制也会有所不同。以IE浏览器为例，附加数据可以存储在本地存储设备的用户数据(Userdata)区。
在存储时可以调用如下方法
set:function(ns,key.value){if(th i s .owners [ns])(try{
this._owners[ns].setAttribute(key, value); ihi s. owners [n s]. save(ns);
}catch(e) {throw e;}
}
}以另一种浏览器为例，附加数据可以采用Local storage的机制进行存储。在存储时可以调用如下方法set: function (ns, key, value) {try{localStorage. setltem(ns+key, value);}catch(e){throwe;}}, / / throw步骤203、根据页面访问请求，向服务器请求构成完整页面的基本文件。当用户请求打开网址导航页面时，客户端的浏览器接收到网址导航页面访问请求。根据该网址导航页面访问请求，客户端向服务器请求构成完整页面的基本文件。优选地，该构成完整页面的基本文件可以是构成完整页面的最小文件，其包含了页面中最为基本的信息，例如静态信息。步骤204、读取已存储的附加数据。读取附加数据的过程包括向本地存储设备请求附加数据和本地存储设备回传附加数据。
其中向本地存储设备请求附加数据可以调用如下方法
this.IocalLoad = function(key) {vardata\Vrap,data;if(self.config.mods[key])
{
data Wrap = se!riocalStore.get(seif.ns)|! {};
data ■= data\Vrap[key]; if(!data)
{
return null;
}
self.callback(data, (from:"local")); return data;
}
return null;
}本地存储设备回传附加数据可以调用如下方法
this.callback = funct:ion(data,at.tr) {
varapplyFunclist = function(funclist)( if(funci ist. !ength>0)
{
var length，K
for(i=0,length=func!ist.length;i<iength;i++)
{
if(isFunction(funclist[i]j)
{
func]ist[i].apply(nu]l,[data,attr]);
}
}
}
}步骤205、根据基本文件和附加数据，获取完整页面并显示。将包含动态信息的附加数据加载到基本文件上，获取完整页面。这种完整页面为伪静态页面。在上述步骤204之前，还可以包括判断本地存储设备是否已存储有附加数据，若有，则执行步骤204 ;若没有，则需要向服务器请求相关的数据。另外，程序中会设定每一个数据块的数据过期时间，比如笑话，失效时间为3小时。3小时后，本地存储设备中关于笑话的附加数据会失效。当本地存储设备的附加数据失效时，本实施例还包括删除本地存储设备中的附加数据。删除附加数据可以调用以下删除(remove)方法
remove: functionO {
var keys = slice.cai](arguments),i=0.key,dataWrap =this.iocaIStore.get(this.ns)|| {};
for(;key=keys[i++];)
{
if(data Wrap [key ])deletedataWra p[keyj;
}
this. localStore.set(this.ns,data Wrap); return this;
} 根据本实施例提供给的页面加载方法，在接收到用户的页面访问请求后，只需向服务器请求构成完整页面的基本文件，根据该基本文件和已存储的附加数据获取完整页面，其中附加数据是本地存储设备定期地向服务器请求获取的。与现有技术中所有的页面数据都是在接收到用户的页面访问请求后一并向服务器请求相比，减少了所请求的信息量，因为页面中的数据，比如笑话和搜索热词、推荐内容、天气等并非实时更新，所以并不需要每次都向服务器请求这些数据。这样，从服务器请求的数据量越小，页面加载越快，因此提高了网页加载速度。同时，由于从本地存储设备中读取附加数据的时间远远小于从服务器获取，并且页面中各个数据块的数据能一并读取，同时显示，避免了因不同网速造成的数据传输快慢不同，造成的各个数据块的数据显示的时间不同，从而产生的页面中某些数据块的位置呈现不同时间的空白或相应的提示的问题，改善了用户的体验。图5示出了根据本发明一个实施例的页面加载装置的结构示意图。如图5所示，该装置包括请求模块50、读取模块51以及显示模块52。其中，请求模块50用于根据页面访问请求，向服务器请求构成完整页面的基本文件；读取模块51用于读取已存储的附加数据；显示模块52用于根据基本文件和附加数据，获取完整页面并显示。进一步的，该装置还可以包括本地存储设备53，用于向服务器请求获得和更新附加数据，该附加数据包括动态信息，动态信息是页面中经常变化的、需要与服务器动态交互的信息。上述本地存储设备53可以具体用于根据附加数据的类型，采用预设的时间间隔向服务器请求更新附加数据。
进一步的，本地存储设备53还用于采用浏览器提供的本地存储机制存储附加数据。可选地，本地存储设备53包括用于存储附加数据的用户数据区。或者，本地存储设备53具体用于以键值对的形式存储附加数据。进一步的，该装置还可以包括删除模块54，用于当附加数据失效时，删除附加数据。本发明还提供了一种页面加载系统，该系统包括客户端和服务器，其中客户端包括上述实施例所描述的页面加载装置。根据本实施例提供给的页面加载装置及系统，在接收到用户的页面访问请求后，只需向服务器请求构成完整页面的基本文件，根据该基本文件和已存储的附加数据获取完整页面，其中附加数据是本地存储设备定期地向服务器请求获取的。与现有技术中所有的页面数据都是在接收到用户的页面访问请求后一并向服务器请求相比，减少了所请求的信 息量，提高了网页加载速度，避免了页面中某些数据块的位置呈现不同时间的空白或相应的提示的问题，改善了用户的体验。在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式
的权利要求书由此明确地并入该具体实施方式
，其中每个权利要求本身都作为本发明的单独实施例。本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的页面加载系统中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来 实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。
权利要求
1.一种页面加载方法，包括根据页面访问请求，向服务器请求构成完整页面的基本文件；读取已存储的附加数据；根据所述基本文件和附加数据，获取完整页面并显示；当所述附加数据失效时，删除所述附加数据。
2.根据权利要求I所述的方法，还包括通过本地存储设备向服务器请求获得和更新所述附加数据。
3.根据权利要求2所述的方法，所述附加数据包括动态信息，所述动态信息是页面中经常变化的、需要与服务器动态交互的信息。
4.根据权利要求2所述的方法，所述通过本地存储设备向服务器请求更新所述附加数据具体为根据所述附加数据的类型，采用预设的时间间隔通过本地存储设备向服务器请求更新所述附加数据。
5.根据权利要求I至4任一项所述的方法，所述附加数据采用浏览器提供的本地存储机制存储在本地存储设备中。
6.根据权利要求5所述的方法，所述附加数据存储在本地存储设备的用户数据区。
7.根据权利要求5所述的方法，所述附加数据是以键值对的形式存储在本地存储设备中。
8.一种页面加载系统，包括客户端和服务器；所述客户端包括页面加载装置，所述页面加载装置包括请求模块，用于根据页面访问请求，向服务器请求构成完整页面的基本文件；读取模块，用于读取已存储的附加数据；显示模块，用于根据所述基本文件和附加数据，获取完整页面并显示。
9.根据权利要求8所述的页面加载系统，其中，所述页面加载装置还包括本地存储设备，用于向服务器请求获得和更新所述附加数据，所述附加数据包括动态信息，所述动态信息是页面中经常变化的、需要与服务器动态交互的信息。
10.根据权利要求9所述的页面加载系统，所述本地存储设备具体用于根据所述附加数据的类型，采用预设的时间间隔向服务器请求更新所述附加数据。
11.根据权利要求9或10所述的页面加载系统，所述本地存储设备还用于采用浏览器提供的本地存储机制存储所述附加数据。
12.根据权利要求11所述的页面加载系统，所述本地存储设备包括存储所述附加数据的用户数据区。
13.根据权利要求11所述的页面加载系统，所述本地存储设备具体用于以键值对的形式存储所述附加数据。
14.根据权利要求8至13任一项所述的页面加载系统，其中，所述页面加载装置还包括删除模块，用于当所述附加数据失效时，删除所述附加数据。
全文摘要
本发明公开了一种页面加载系统和方法。其中，页面加载系统包括客户端和服务器；客户端包括页面加载装置，页面加载装置包括请求模块，用于根据页面访问请求，向服务器请求构成完整页面的基本文件；读取模块，用于读取已存储的附加数据；显示模块，用于根据基本文件和附加数据，获取完整页面并显示。根据本发明提供的页面加载方法和系统，在接收到用户的页面访问请求后，只需向服务器请求构成完整页面的基本文件，根据该基本文件和已存储的附加数据获取完整页面，与现有技术中所有的页面数据都是在接收到用户的页面访问请求后一并向服务器请求相比，减少了所请求的信息量，避免了页面中某些数据块的位置呈现不同时间的空白或相应的提示的问题。
文档编号G06F17/30GK102930034SQ20121044842
公开日2013年2月13日 申请日期2012年11月9日 优先权日2012年11月9日
发明者周曜, 吴海生, 张云剑 申请人:北京奇虎科技有限公司, 奇智软件(北京)有限公司