CN117370691A

CN117370691A - 一种页面加载方法、装置、介质及电子设备

Info

Publication number: CN117370691A
Application number: CN202311292999.7A
Authority: CN
Inventors: 郭佳; 徐奇; 薛富恩
Original assignee: Beijing Arc Information Technology Co ltd
Current assignee: Beijing Arc Information Technology Co ltd
Priority date: 2023-10-08
Filing date: 2023-10-08
Publication date: 2024-01-09

Abstract

本发明公开了一种页面加载方法、装置、介质及电子设备。其中，方法包括：浏览器通过请求接口从服务器获取请求数据加载页面，并将请求数据在前端进行缓存；浏览器通过请求接口再次向服务器获取请求数据；服务器根据请求数据的更新信息向浏览器返回状态信息；浏览器根据状态信息加载请求页面。

Description

一种页面加载方法、装置、介质及电子设备

技术领域

本发明涉及页面加载技术领域，并且更具体地，涉及一种页面加载方法、装置、介质及电子设备。

背景技术

目前通过axios实现前端请求过滤，在同一个页面多个请求每次加载都会请求大量接口，对请求不能进行分类处理；但在实际应中，有些数据是不会一直更新的。从而前端在页面加载中持续请求存在资源浪费的技术问题。

发明内容

针对现有技术的不足，本发明提供一种页面加载方法、装置、介质及电子设备。

根据本发明的一个方面，提供了一种页面加载方法，包括：

浏览器通过请求接口从服务器获取请求数据加载页面，并将请求数据在前端进行缓存；

浏览器通过请求接口再次向服务器获取请求数据；

服务器根据请求数据的更新信息向浏览器返回状态信息；

浏览器根据状态信息加载请求页面。

可选地，服务器根据请求数据的更新信息向浏览器返回状态信息，包括：

在请求数据的更新信息为未修改的情况下，服务器返回304状态码的状态信息；

在请求数据的更新信息为已更新的情况下，服务器返回200状态码以及更新请求数据的状态信息。

可选地，浏览器根据状态信息加载请求页面，包括：

在浏览器接收304状态码的状态信息的情况下，浏览器从前端的缓存中获取请求数据加载请求页面；

在浏览器接收200状态码的状态信息的情况下，浏览器从服务器获取更新请求数据加载请求页面。

根据本发明的另一个方面，提供了一种页面加载装置，包括：

第一获取模块，用于浏览器通过请求接口从服务器获取请求数据加载页面，并将请求数据在前端进行缓存；

第二获取模块，用于浏览器通过请求接口再次向服务器获取请求数据；

返回模块，用于服务器根据请求数据的更新信息向浏览器返回状态信息；

加载模块，用于浏览器根据状态信息加载请求页面。

根据本发明的又一个方面，提供了一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序用于执行本发明上述任一方面所述的方法。

根据本发明的又一个方面，提供了一种电子设备，所述电子设备包括：处理器；用于存储所述处理器可执行指令的存储器；所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现本发明上述任一方面所述的方法。

从而，本申请提供一种页面加载方法，浏览器通过请求接口从服务器获取请求数据加载页面，并将请求数据在前端进行缓存；浏览器通过请求接口再次向服务器获取请求数据；服务器根据请求数据的更新信息向浏览器返回状态信息；浏览器根据状态信息加载请求页面。避免了弱网下一个页面加载多个接口的请求速度，加快了访问速度并且增强前端用户的页面加载体验。

附图说明

通过参考下面的附图，可以更为完整地理解本发明的示例性实施方式：

图1是本发明一示例性实施例提供的页面加载方法的流程示意图；

图2是本发明一示例性实施例提供的页面加载装置的结构示意图；

图3是本发明一示例性实施例提供的电子设备的结构。

具体实施方式

下面，将参考附图详细地描述根据本发明的示例实施例。显然，所描述的实施例仅仅是本发明的一部分实施例，而不是本发明的全部实施例，应理解，本发明不受这里描述的示例实施例的限制。

应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。

本领域技术人员可以理解，本发明实施例中的“第一”、“第二”等术语仅用于区别不同步骤、设备或模块等，既不代表任何特定技术含义，也不表示它们之间的必然逻辑顺序。

还应理解，在本发明实施例中，“多个”可以指两个或两个以上，“至少一个”可以指一个、两个或两个以上。

还应理解，对于本发明实施例中提及的任一部件、数据或结构，在没有明确限定或者在前后文给出相反启示的情况下，一般可以理解为一个或多个。

另外，本发明中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本发明中字符“/”，一般表示前后关联对象是一种“或”的关系。

还应理解，本发明对各个实施例的描述着重强调各个实施例之间的不同之处，其相同或相似之处可以相互参考，为了简洁，不再一一赘述。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，技术、方法和设备应当被视为说明书的一部分。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

本发明实施例可以应用于终端设备、计算机系统、服务器等电子设备，其可与众多其它通用或专用计算系统环境或配置一起操作。适于与终端设备、计算机系统、服务器等电子设备一起使用的众所周知的终端设备、计算系统、环境和/或配置的例子包括但不限于：个人计算机系统、服务器计算机系统、瘦客户机、厚客户机、手持或膝上设备、基于微处理器的系统、机顶盒、可编程消费电子产品、网络个人电脑、小型计算机系统﹑大型计算机系统和包括上述任何系统的分布式云计算技术环境，等等。

终端设备、计算机系统、服务器等电子设备可以在由计算机系统执行的计算机系统可执行指令(诸如程序模块)的一般语境下描述。通常，程序模块可以包括例程、程序、目标程序、组件、逻辑、数据结构等等，它们执行特定的任务或者实现特定的抽象数据类型。计算机系统/服务器可以在分布式云计算环境中实施，分布式云计算环境中，任务是由通过通信网络链接的远程处理设备执行的。在分布式云计算环境中，程序模块可以位于包括存储设备的本地或远程计算系统存储介质上。

示例性方法

图1是本发明一示例性实施例提供的页面加载方法的流程示意图。本实施例可应用在电子设备上，如图1所示，页面加载方法100包括以下步骤：

步骤101，浏览器通过请求接口从服务器获取请求数据加载页面，并将请求数据在前端进行缓存。

具体地，请求接口为通过请求是否以最后一次请求为最新请求或者为是否更新接口，浏览器通过所述请求接口从服务器获取页面加载的数据。

步骤102，浏览器通过请求接口再次向服务器获取请求数据。

步骤103，服务器根据请求数据的更新信息向浏览器返回状态信息。

具体地，当第一次请求时服务器返回的响应头中没有Cache-Control和Expires或者Cache-Control和Expires过期，那么浏览器第二次请求时就会与服务器进行协商，与服务器端对比判断资源是否进行了修改更新。如果服务器端的资源没有修改，那么就会返回304状态码，告诉浏览器可以使用缓存中的数据，这样就减少了服务器的数据传输压力。如果数据有更新就会返回200状态码，服务器就会返回更新后的资源并且将缓存信息一起返回。跟协商缓存相关的header头属性有(ETag/If-Not-Match、Last-Modified/If-Modified-Since)请求头和响应头需要成对出现。

步骤104，浏览器根据状态信息加载请求页面。

可选地，浏览器根据状态信息加载请求页面，包括：

具体地，请求主体可以更据需要的内容定义，主要可以包含是否以更新字段。

由前端发送浏览器请求，通过判断是否存在缓存，如果没有缓存，则向Web服务器请求，更据请求响应及缓存协商来呈现页面；

如果存在缓存，则需要判断缓存是否过期，如果没有过期则从缓存中获取；如果缓存已过期则根据上一次请求的响应是否有Etag？请求头或者请求体中存在需更新的字段，来查看请求状态是200(文档有更新)还是304(文档无更新)来区分更新。

从而根据本申请提供的方法，如果前端页面加载的该场景不需要重新请求，则直接请求的拦截直接过滤掉，不会将请求发送给服务端，如果该场景需要重复请求，则借助axios来将请求发送给服务端。

此外，数据的更新频率可以按照网站规划的结构来区分，每个行业，每个都有自己的规律和要求，像博客类或者资讯类的站，那信息量很大，可以保持每天更新。像一些普通的企业站，比如说设备类，内容比较少，信息量少，根本没有多少内容可更新就不要一味得去追求更新频率，而应该是从更新的内容质量上去下功夫。比如:一些企业网站的介绍，及网站的备案地址，几乎都是很少变动的，这些就不用一直来更新。

根据缓存中的时间字段和返回数据的修改时间来进行判断接口数据是否更新来重新加载数据，前端和后端预定好接口字段，通过判断接口字段的状态来定义是否需要重新加载。可以设定缓存期，可以是一周、半个月或者一个月更新全部数据，防止更新频率较低的数据一直遗漏更新。

示例性装置

图2是本发明一示例性实施例提供的页面加载装置的结构示意图。如图2所示，装置200包括：

第一获取模块210，用于浏览器通过请求接口从服务器获取请求数据加载页面，并将请求数据在前端进行缓存；

第二获取模块220，用于浏览器通过请求接口再次向服务器获取请求数据；

返回模块230，用于服务器根据请求数据的更新信息向浏览器返回状态信息；

加载模块240，用于浏览器根据状态信息加载请求页面。

可选地，返回模块230，包括：

第一返回子模块，用于在请求数据的更新信息为未修改的情况下，服务器返回304状态码的状态信息；

第二返回子模块，用于在请求数据的更新信息为已更新的情况下，服务器返回200状态码以及更新请求数据的状态信息。

可选地，加载模块240，包括：

第一加载子模块，用于在浏览器接收304状态码的状态信息的情况下，浏览器从前端的缓存中获取请求数据加载请求页面；

第二加载子模块，用于在浏览器接收200状态码的状态信息的情况下，浏览器从服务器获取更新请求数据加载请求页面。

示例性电子设备

图3是本发明一示例性实施例提供的电子设备的结构。如图3所示，电子设备30包括一个或多个处理器31和存储器32。

处理器31可以是中央处理单元(CPU)或者具有数据处理能力和/或指令执行能力的其他形式的处理单元，并且可以控制电子设备中的其他组件以执行期望的功能。

存储器32可以包括一个或多个计算机程序产品，所述计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。所述易失性存储器例如可以包括随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。所述非易失性存储器例如可以包括只读存储器(ROM)、硬盘、闪存等。在所述计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器31可以运行所述程序指令，以实现上文所述的本发明的各个实施例的软件程序的方法以及/或者其他期望的功能。在一个示例中，电子设备还可以包括：输入装置33和输出装置34，这些组件通过总线系统和/或其他形式的连接机构(未示出)互连。

此外，该输入装置33还可以包括例如键盘、鼠标等等。

该输出装置34可以向外部输出各种信息。该输出装置34可以包括例如显示器、扬声器、打印机、以及通信网络及其所连接的远程输出设备等等。

当然，为了简化，图3中仅示出了该电子设备中与本发明有关的组件中的一些，省略了诸如总线、输入/输出接口等等的组件。除此之外，根据具体应用情况，电子设备还可以包括任何其他适当的组件。

示例性计算机程序产品和计算机可读存储介质

除了上述方法和设备以外，本发明的实施例还可以是计算机程序产品，其包括计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本发明各种实施例的方法中的步骤。

所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本发明实施例操作的程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。

此外，本发明的实施例还可以是计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本发明各种实施例的对历史变更记录进行信息挖掘的方法中的步骤。

所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的系统、系统或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

以上结合具体实施例描述了本发明的基本原理，但是，需要指出的是，在本发明中提及的优点、优势、效果等仅是示例而非限制，不能认为这些优点、优势、效果等是本发明的各个实施例必须具备的。另外，上述公开的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节并不限制本发明为必须采用上述具体的细节来实现。

本说明书中各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似的部分相互参见即可。对于系统实施例而言，由于其与方法实施例基本对应，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本发明中涉及的器件、系统、设备、系统的方框图仅作为例示性的例子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这些器件、系统、设备、系统。诸如“包括”、“包含”、“具有”等等的词语是开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇“或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是如此。这里所使用的词汇“诸如”指词组“诸如但不限于”，且可与其互换使用。

可能以许多方式来实现本发明的方法和系统。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本发明的方法和系统。用于所述方法的步骤的上述顺序仅是为了进行说明，本发明的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本发明实施为记录在记录介质中的程序，这些程序包括用于实现根据本发明的方法的机器可读指令。因而，本发明还覆盖存储用于执行根据本发明的方法的程序的记录介质。

还需要指出的是，在本发明的系统、设备和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本发明的等效方案。提供所公开的方面的以上描述以使本领域的任何技术人员能够做出或者使用本发明。对这些方面的各种修改对于本领域技术人员而言是非常显而易见的，并且在此定义的一般原理可以应用于其他方面而不脱离本发明的范围。因此，本发明不意图被限制到在此示出的方面，而是按照与在此公开的原理和新颖的特征一致的最宽范围。

为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将本发明的实施例限制到在此公开的形式。尽管以上已经讨论了多个示例方面和实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添加和子组合。

Claims

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

浏览器通过请求接口从服务器获取请求数据加载页面，并将所述请求数据在前端进行缓存；

所述浏览器通过所述请求接口再次向所述服务器获取所述请求数据；

所述服务器根据所述请求数据的更新信息向所述浏览器返回状态信息；

所述浏览器根据所述状态信息加载请求页面。

2.根据权利要求1所述的方法，其特征在于，所述服务器根据所述请求数据的更新信息向所述浏览器返回状态信息，包括：

在所述请求数据的所述更新信息为未修改的情况下，所述服务器返回304状态码的状态信息；

在所述请求数据的所述更新信息为已更新的情况下，所述服务器返回200状态码以及更新请求数据的状态信息。

3.根据权利要求2所述的方法，其特征在于，所述浏览器根据所述状态信息加载请求页面，包括：

在所述浏览器接收所述304状态码的状态信息的情况下，所述浏览器从所述前端的缓存中获取所述请求数据加载请求页面；

在所述浏览器接收所述200状态码的状态信息的情况下，所述浏览器从所述服务器获取所述更新请求数据加载请求页面。

4.一种页面加载装置，其特征在于，包括：

第一获取模块，用于浏览器通过请求接口从服务器获取请求数据加载页面，并将所述请求数据在前端进行缓存；

第二获取模块，用于所述浏览器通过所述请求接口再次向所述服务器获取所述请求数据；

返回模块，用于所述服务器根据所述请求数据的更新信息向所述浏览器返回状态信息；

加载模块，用于所述浏览器根据所述状态信息加载请求页面。

5.根据权利要求4所述的装置，其特征在于，返回模块，包括：

第一返回子模块，用于在所述请求数据的所述更新信息为未修改的情况下，所述服务器返回304状态码的状态信息；

第二返回子模块，用于在所述请求数据的所述更新信息为已更新的情况下，所述服务器返回200状态码以及更新请求数据的状态信息。

6.根据权利要求5所述的装置，其特征在于，加载模块，包括：

第一加载子模块，用于在所述浏览器接收所述304状态码的状态信息的情况下，所述浏览器从所述前端的缓存中获取所述请求数据加载请求页面；

第二加载子模块，用于在所述浏览器接收所述200状态码的状态信息的情况下，所述浏览器从所述服务器获取所述更新请求数据加载请求页面。

7.一种计算机可读存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序用于执行上述权利要求1-3任一所述的方法。

8.一种电子设备，其特征在于，所述电子设备包括：

处理器；

用于存储所述处理器可执行指令的存储器；

所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现上述权利要求1-3任一所述的方法。