[发明专利]一种WEB页面快速加载的方法

说明书

技术领域

本发明涉及WEB技术领域，尤其涉及一种基于HTML5localStorage技术的WEB页面快速加载的方法。

背景技术

现有网页平台中，打开WEB页面需要进行资源下载，若WEB页面的开发使用了某些框架(如Extjs)，就会引用庞大的JS文件(即JavaScript脚本文件)及CSS文件，那么WEB页面加载的速度会变慢，因为WEB页面必须等待所有的JS文件加载完成后，才能被成功渲染并呈现在用户面前，特别是在网络较差的情况下，资源的加载和WEB页面的呈现需要相对较长一段时间，影响用户体验。

发明内容

本发明要解决的技术问题，在于提供一种WEB页面快速加载方法，在网络较差情况下，可快速加载页面，提高用户体验。

本发明是这样实现的：一种WEB页面快速加载方法，包括如下步骤：

步骤1、浏览器通过WEB页面地址获取当前JS文件版本号以及本地JS文件版本号，判断版本是否有更新，若是，则进入步骤2，否则，进入步骤3；

步骤2、根据用户需求选择是否更新，若用户选择更新，则向服务器请求获取最新的JS文件执行，并将最新的JS文件及其版本号存入localStorage，结束流程，否则，进入步骤3；

步骤3、直接读取localStorage中的JS文件执行。

进一步的，所述“若用户选择更新，则向服务器请求获取最新的JS文件执行，并将最新的JS文件及其版本号存入localStorage”具体为：

若用户选择更新，则向服务器请求获取最新的JS文件，并判断请求时间是否超过一规定值，若是，则读取localStorage中的JS文件执行，同时在后台继续请求最新的JS文件，并将请求得到的JS文件以及其版本号存入localStorage，否则，执行最新的JS文件，并将最新的JS文件及其版本号存入localStorage。

本发明具有如下优点：利用HTML5的localStorage特性，即本地存储技术，兼容市面上大部分浏览器，在网络较差的情况下，直接使用localStorage中的JS文件，减少向服务器发起的请求次数，如果更新WEB页面时间太久，则会默认从localStorage中读取JS文件，让用户快速打开WEB页面，并在后台向服务器请求获取新版本的JS文件，在请求成功后存入localStorage中，供下次使用，大大减少获取页面的时间，提升用户体验。

附图说明

下面参照附图结合实施例对本发明作进一步的说明。

图1为本发明一种WEB页面快速加载方法执行流程图。

具体实施方式

如图1所示，本发明一种WEB页面快速加载方法，包括如下步骤：

步骤1、浏览器通过WEB页面地址获取当前JS文件版本号以及本地JS文件版本号，判断版本是否有更新，若是，则进入步骤2，否则，进入步骤3；

步骤2、根据用户需求选择是否更新，若用户选择更新，则向服务器请求获取最新的JS文件执行，并将最新的JS文件及其版本号存入localStorage，结束流程，否则，进入步骤3；

步骤3、直接读取localStorage中的JS文件执行。

所述“若用户选择更新，则向服务器请求获取最新的JS文件执行，并将最新的JS文件及其版本号存入localStorage”具体为：

若用户选择更新，则向服务器请求获取最新的JS文件，并判断请求时间是否超过一规定值，若是，则读取localStorage中的JS文件执行，同时在后台继续请求最新的JS文件，并将请求得到的JS文件以及其版本号存入localStorage，否则，执行最新的JS文件，并将最新的JS文件及其版本号存入localStorage。

本发明通过将较大的JS文件存入localStorage(本地存储)，在无更新版本时，直接从本地获取JS文件，无需从服务器加载，减少资源下载，在JS文件需要更新时，从服务器加载后存入localStorage(本地存储)，在下次使用时可直接从localStorage读取并执行，若更新时间太久，则会默认从localStorage中读取JS文件，让用户在网络较差时也能正常使用WEB页面，同时在后台继续向服务器请求新版本的JS文件，并在请求成功后存入localStorage，减小由于网络较差带来加载失败或加载时间久的问题，大大提高WEB页面加载速度。

上述localStorage是HTML5中新加入的一个特性，主要是用来作为本地存储来使用的。

虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。