CN109543127A - 一种页面刷新方法、装置、设备及可读存储介质 - Google Patents

Abstract

本发明公开了一种页面刷新方法，包括：当接收到用户再次刷新当前页面的指令时，判断当前页面的静态资源在服务端是否已更新；若否，则从本地缓存获取当前页面的目标HTML数据，并将当前页面中的HTML数据替换为目标HTML数据，以完成当前页面的再次刷新；其中，目标HTML数据中包括当前页面的静态资源；目标HTML数据在当前页面完成前次刷新时，预先存储在本地缓存。可见，当再次刷新页面时，该方法略去了对当前页面对应的各种资源的处理步骤，使浏览器无需重复执行无谓的处理操作，从而节约了计算机资源，提高了页面再次刷新的效率。相应地，本发明公开的一种页面刷新装置、设备及可读存储介质，也同样具有上述技术效果。

Description

一种页面刷新方法、装置、设备及可读存储介质

技术领域

本发明涉及计算机技术领域，更具体地说，涉及一种页面刷新方法、装置、设备及可读存储介质。

背景技术

目前，人们在通过浏览器查看网页信息时，对于同一页面，可能会刷新多次。在此过程中，当一个页面首次刷新完成后，该页面对应的相关数据会分类缓存在本地，例如：静态资源，样式、元素等。若该页面再次刷新时，便直接从本地缓存中获取各种资源，并整合处理成HTML数据，以完成该页面的再次刷新。

其中，虽然本地缓存有当前页面的各种资源，但由于这些资源分类存储，即：静态资源存储在静态资源文件夹，样式存储在样式文件夹，元素存储在元素文件夹；因此当页面再次刷新时，浏览器需要对这些资源进行处理后方可完成页面的再次刷新。但由于当前页面的静态资源并不存在更新，因此浏览器处理各种资源的操作，与当前页面首次刷新时浏览器处理资源的操作没有区别，即：浏览器重复执行了无谓的处理操作，既耗费计算机资源，还拖慢了页面刷新的速率。

因此，如何提高页面再次刷新的效率，是本领域技术人员需要解决的问题。

发明内容

本发明的目的在于提供一种页面刷新方法、装置、设备及可读存储介质，以提高页面再次刷新的效率。

为实现上述目的，本发明实施例提供了如下技术方案：

一种页面刷新方法，包括：

当接收到用户再次刷新当前页面的指令时，判断所述当前页面的静态资源在服务端是否已更新；

若否，则从本地缓存获取所述当前页面的目标HTML数据，并将所述当前页面中的HTML数据替换为所述目标HTML数据，以完成所述当前页面的再次刷新；

其中，所述目标HTML数据中包括所述当前页面的静态资源；所述目标HTML数据在所述当前页面完成前次刷新时，预先存储在所述本地缓存。

其中，所述目标HTML数据的缓存过程包括：

当所述当前页面完成前次刷新时，遍历所述当前页面对应的所有dom元素，并获取每个dom元素对应的属性信息；

针对每个dom元素，将当前dom元素与所述当前dom元素对应的属性信息进行结合，并转换为HTML格式；

按照所述多个dom元素之间的关系将所有HTML格式的dom元素进行拼接，生成目标HTML数据，并将所述目标HTML数据存储至本地缓存。

其中，所述按照所述多个dom元素之间的关系将所有HTML格式的dom元素进行拼接，包括：

按照所述多个dom元素之间的关系将所有HTML格式的dom元素挂接至所述当前页面的各个节点。

其中，所述遍历当前页面对应的所有dom元素，包括：

从所述当前页面对应的根元素开始，遍历所有dom元素。

其中，还包括：

若所述当前页面的静态资源在服务端已更新时，从所述服务端获取更新后的静态资源，并对更新后的静态资源进行处理，获得用于页面显示的HTML数据，以完成所述当前页面的再次刷新。

其中，还包括：

若所述当前页面的静态资源在服务端未更新时，将所述目标HTML数据发送至所述服务端，以使所述服务端在接收到所述当前页面的刷新请求时，将所述目标HTML数据返回至相应的客户端。

一种页面刷新装置，包括：

判断模块，用于当接收到用户再次刷新当前页面的指令时，判断所述当前页面的静态资源在服务端是否已更新；

刷新模块，用于所述当前页面的静态资源在服务端未更新时，从本地缓存获取所述当前页面的目标HTML数据，并将所述当前页面中的HTML数据替换为所述目标HTML数据，以完成所述当前页面的再次刷新；

其中，所述目标HTML数据中包括所述当前页面的静态资源；所述目标HTML数据在所述当前页面完成前次刷新时，预先存储在所述本地缓存。

其中，还包括：

遍历模块，用于当所述当前页面完成前次刷新时，遍历所述当前页面对应的所有dom元素，并获取每个dom元素对应的属性信息；

转换模块，用于针对每个dom元素，将当前dom元素与所述当前dom元素对应的属性信息进行结合，并转换为HTML格式；

存储模块，用于按照所述多个dom元素之间的关系将所有HTML格式的dom元素进行拼接，生成目标HTML数据，并将所述目标HTML数据存储至本地缓存。

一种页面刷新设备，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现上述任意一项所述的页面刷新方法的步骤。

一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述任意一项所述的页面刷新方法的步骤。

通过以上方案可知，本发明实施例提供的一种页面刷新方法，包括：当接收到用户再次刷新当前页面的指令时，判断所述当前页面的静态资源在服务端是否已更新；若否，则从本地缓存获取所述当前页面的目标HTML数据，并将所述当前页面中的HTML数据替换为所述目标HTML数据，以完成所述当前页面的再次刷新；其中，所述目标HTML数据中包括所述当前页面的静态资源；所述目标HTML数据在所述当前页面完成前次刷新时，预先存储在所述本地缓存。

可见，在接收到用户再次刷新当前页面的指令，且当前页面的静态资源在服务端未更新时，直接从本地缓存获取预先处理得到的目标HTML数据，并将当前页面中的HTML数据替换为目标HTML数据，完成当前页面的再次刷新；其中略去了对当前页面对应的各种资源的处理步骤，使浏览器无需重复执行无谓的处理操作，从而节约了计算机资源，提高了页面再次刷新的效率。

相应地，本发明实施例提供的一种页面刷新装置、设备及可读存储介质，也同样具有上述技术效果。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例公开的一种页面刷新方法流程图；

图2为本发明实施例公开的一种HTML数据缓存流程图；

图3为本发明实施例公开的一种页面刷新装置示意图；

图4为本发明实施例公开的一种页面刷新设备示意图；

图5为本发明实施例公开的另一种页面刷新方法流程图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例公开了一种页面刷新方法、装置、设备及可读存储介质，以提高页面再次刷新的效率。

参见图1，本发明实施例提供的一种页面刷新方法，包括：

S101、接收用户再次刷新当前页面的指令；

S102、判断当前页面的静态资源在服务端是否已更新；若是，则执行S103；若否，则执行S104；

S103、从服务端获取更新后的静态资源，并对更新后的静态资源进行处理，获得用于页面显示的HTML数据，以完成当前页面的再次刷新；

S104、从本地缓存获取当前页面的目标HTML数据，并将当前页面中的HTML数据替换为目标HTML数据，以完成当前页面的再次刷新。

其中，所述目标HTML数据中包括所述当前页面的静态资源；所述目标HTML数据在所述当前页面完成前次刷新时，预先存储在所述本地缓存。静态资源即当前页面需要展示的图片、文档和视频等资源。

优选地，请参见图2，所述目标HTML数据的缓存过程包括：

S201、当前页面完成前次刷新时，遍历当前页面对应的所有dom元素，并获取每个dom元素对应的属性信息；

S202、针对每个dom元素，将当前dom元素与当前dom元素对应的属性信息进行结合，并转换为HTML格式；

S203、按照多个dom元素之间的关系将所有HTML格式的dom元素进行拼接，生成目标HTML数据，并将目标HTML数据存储至本地缓存。

其中，所述按照所述多个dom元素之间的关系将所有HTML格式的dom元素进行拼接，包括：按照所述多个dom元素之间的关系将所有HTML格式的dom元素挂接至所述当前页面的各个节点。

其中，所述遍历当前页面对应的所有dom元素，包括：从所述当前页面对应的根元素开始，遍历所有dom元素。

具体的，网页页面对应的dom元素一般挂接在树形结构中，树形结构中的所有元素统称为dom元素，每个节点表示一个dom元素。每个dom元素对应有样式，即颜色、显示格式、存储位置等。树形结构的根节点称为根元素，各个dom元素依据树形结构具有固定的连接关系。其中，HTML数据即为带有行内样式的数据。

可见，本实施例提供了一种页面刷新方法，该方法在接收到用户再次刷新当前页面的指令，且当前页面的静态资源在服务端未更新时，直接从本地缓存获取预先处理得到的目标HTML数据，并将当前页面中的HTML数据替换为目标HTML数据，完成当前页面的再次刷新；其中略去了对当前页面对应的各种资源的处理步骤，使浏览器无需重复执行无谓的处理操作，从而节约了计算机资源，提高了页面再次刷新的效率。

基于上述实施例，需要说明的是，还包括：若所述当前页面的静态资源在服务端未更新时，将所述目标HTML数据发送至所述服务端，以使所述服务端在接收到所述当前页面的刷新请求时，将所述目标HTML数据返回至相应的客户端。

下面对本发明实施例提供的一种页面刷新装置进行介绍，下文描述的一种页面刷新装置与上文描述的一种页面刷新方法可以相互参照。

参见图3，本发明实施例提供的一种页面刷新装置，包括：

判断模块301，用于当接收到用户再次刷新当前页面的指令时，判断所述当前页面的静态资源在服务端是否已更新；

刷新模块302，用于所述当前页面的静态资源在服务端未更新时，从本地缓存获取所述当前页面的目标HTML数据，并将所述当前页面中的HTML数据替换为所述目标HTML数据，以完成所述当前页面的再次刷新；

其中，所述目标HTML数据中包括所述当前页面的静态资源；所述目标HTML数据在所述当前页面完成前次刷新时，预先存储在所述本地缓存。

其中，还包括：

遍历模块，用于当所述当前页面完成前次刷新时，遍历所述当前页面对应的所有dom元素，并获取每个dom元素对应的属性信息；

转换模块，用于针对每个dom元素，将当前dom元素与所述当前dom元素对应的属性信息进行结合，并转换为HTML格式；

存储模块，用于按照所述多个dom元素之间的关系将所有HTML格式的dom元素进行拼接，生成目标HTML数据，并将所述目标HTML数据存储至本地缓存。

其中，所述存储模块具体用于：

按照所述多个dom元素之间的关系将所有HTML格式的dom元素挂接至所述当前页面的各个节点。

其中，所述遍历模块具体用于：

从所述当前页面对应的根元素开始，遍历所有dom元素。

其中，还包括：

获取模块，用于若所述当前页面的静态资源在服务端已更新时，从所述服务端获取更新后的静态资源，并对更新后的静态资源进行处理，获得用于页面显示的HTML数据，以完成所述当前页面的再次刷新。

其中，还包括：

发送模块，用于若所述当前页面的静态资源在服务端未更新时，将所述目标HTML数据发送至所述服务端，以使所述服务端在接收到所述当前页面的刷新请求时，将所述目标HTML数据返回至相应的客户端。

可见，本实施例提供了一种页面刷新装置，包括：判断模块以及刷新模块。当接收到用户再次刷新当前页面的指令时，首先由判断模块判断所述当前页面的静态资源在服务端是否已更新；当所述当前页面的静态资源在服务端未更新时，刷新模块从本地缓存获取所述当前页面的目标HTML数据，并将所述当前页面中的HTML数据替换为所述目标HTML数据，以完成所述当前页面的再次刷新。如此各个模块之间分工合作，各司其职，从而节约了计算机资源，提高了页面再次刷新的效率。

下面对本发明实施例提供的一种页面刷新设备进行介绍，下文描述的一种页面刷新设备与上文描述的一种页面刷新方法及装置可以相互参照。

参见图4，本发明实施例提供的一种页面刷新设备，包括：

存储器401，用于存储计算机程序；

处理器402，用于执行所述计算机程序时实现上述任意实施例所述的页面刷新方法的步骤。

下面对本发明实施例提供的一种可读存储介质进行介绍，下文描述的一种可读存储介质与上文描述的一种页面刷新方法、装置及设备可以相互参照。

一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上述任意实施例所述的页面刷新方法的步骤。

在实际应用过程中实施本发明的方案时，可按照下述方式进行，包括：初次页面渲染完成后，从document元素开始遍历页面所有元素，通过JavaScript函数window.getComputedStyle获取对应的样式；将各个dom元素和其对应的样式结合起来即变为html形式，即是带有行内样式的html，然后按原有的dom之间的父子关系进行拼接获得到完整的html；将获得的html保存到本地的localStorage作为缓存；页面刷新后判断静态资源是否存在更新情况，若否，则从localStorage里取出缓存，并将页面的html直接替换为缓存的html。

上述实施过程对应的页面刷新方法请参见图5，包括：

步骤1，页面渲染完成后获取页面的各个元素及其对应的样式；

步骤2，将获得的元素和样式拼接为html；

步骤3，将html保存到本地的localStorage作为缓存；

步骤4，页面刷新后判断静态资源是否存在更新的情况，若否，则执行步骤5；若是，则返回步骤1；

步骤5，从localStorage里取出缓存，并将页面的html直接替换为缓存的html；

如此浏览器可以直接解析渲染后的html，而不用等待资源载入完成再进行解析、渲染等处理，从而减少了等待时间，加速了页面显示。

在上述方案的基础上，还可以将缓存的html发送给服务器，服务器将原有的html替换为缓存的html。这样服务器在接收到其他客户端的请求时，便可以直接返回经过解析、渲染处理的html数据，这样其他客户端就不需要做解析、渲染处理，节省了计算时间，提高了刷新效率。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种页面刷新方法，其特征在于，包括：

当接收到用户再次刷新当前页面的指令时，判断所述当前页面的静态资源在服务端是否已更新；

若否，则从本地缓存获取所述当前页面的目标HTML数据，并将所述当前页面中的HTML数据替换为所述目标HTML数据，以完成所述当前页面的再次刷新；

其中，所述目标HTML数据中包括所述当前页面的静态资源；所述目标HTML数据在所述当前页面完成前次刷新时，预先存储在所述本地缓存。

2.根据权利要求1所述的页面刷新方法，其特征在于，所述目标HTML数据的缓存过程包括：

当所述当前页面完成前次刷新时，遍历所述当前页面对应的所有dom元素，并获取每个dom元素对应的属性信息；

针对每个dom元素，将当前dom元素与所述当前dom元素对应的属性信息进行结合，并转换为HTML格式；

按照所述多个dom元素之间的关系将所有HTML格式的dom元素进行拼接，生成目标HTML数据，并将所述目标HTML数据存储至本地缓存。

3.根据权利要求2所述的页面刷新方法，其特征在于，所述按照所述多个dom元素之间的关系将所有HTML格式的dom元素进行拼接，包括：

按照所述多个dom元素之间的关系将所有HTML格式的dom元素挂接至所述当前页面的各个节点。

4.根据权利要求2所述的页面刷新方法，其特征在于，所述遍历当前页面对应的所有dom元素，包括：

从所述当前页面对应的根元素开始，遍历所有dom元素。

5.根据权利要求1所述的页面刷新方法，其特征在于，还包括：

若所述当前页面的静态资源在服务端已更新时，从所述服务端获取更新后的静态资源，并对更新后的静态资源进行处理，获得用于页面显示的HTML数据，以完成所述当前页面的再次刷新。

6.根据权利要求1-5任意一项所述的页面刷新方法，其特征在于，还包括：

若所述当前页面的静态资源在服务端未更新时，将所述目标HTML数据发送至所述服务端，以使所述服务端在接收到所述当前页面的刷新请求时，将所述目标HTML数据返回至相应的客户端。

7.一种页面刷新装置，其特征在于，包括：

判断模块，用于当接收到用户再次刷新当前页面的指令时，判断所述当前页面的静态资源在服务端是否已更新；

刷新模块，用于所述当前页面的静态资源在服务端未更新时，从本地缓存获取所述当前页面的目标HTML数据，并将所述当前页面中的HTML数据替换为所述目标HTML数据，以完成所述当前页面的再次刷新；

其中，所述目标HTML数据中包括所述当前页面的静态资源；所述目标HTML数据在所述当前页面完成前次刷新时，预先存储在所述本地缓存。

8.根据权利要求7所述的页面刷新装置，其特征在于，还包括：

遍历模块，用于当所述当前页面完成前次刷新时，遍历所述当前页面对应的所有dom元素，并获取每个dom元素对应的属性信息；

转换模块，用于针对每个dom元素，将当前dom元素与所述当前dom元素对应的属性信息进行结合，并转换为HTML格式；

存储模块，用于按照所述多个dom元素之间的关系将所有HTML格式的dom元素进行拼接，生成目标HTML数据，并将所述目标HTML数据存储至本地缓存。

9.一种页面刷新设备，其特征在于，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如权利要求1-6任意一项所述的页面刷新方法的步骤。

10.一种可读存储介质，其特征在于，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1-6任意一项所述的页面刷新方法的步骤。