CN113407876A

CN113407876A - 一种网页刷新方法、网页刷新***及相关装置

Info

Publication number: CN113407876A
Application number: CN202110677984.7A
Authority: CN
Inventors: 周文博; 范渊; 黄进
Original assignee: Hangzhou Dbappsecurity Technology Co Ltd
Current assignee: Hangzhou Dbappsecurity Technology Co Ltd
Priority date: 2021-06-18
Filing date: 2021-06-18
Publication date: 2021-09-17
Anticipated expiration: 2041-06-18
Also published as: CN113407876B

Abstract

本申请提供一种网页刷新方法，包括：接收网页的刷新请求；判断浏览器是否设置协商缓存；若是，判断所述刷新请求是否命中视图层级缓存；所述视图层级缓存至少为三层；若所述刷新请求包含视图层级缓存，返回所述刷新请求对应的视图层级缓存，以便所述浏览器利用所述视图层级缓存刷新网页。本申请在执行网页刷新时，先判断浏览器是否设置协商缓存，在浏览器设置协商缓存时，服务端会返回刷新请求对应的视图层级缓存，而无需返回网页的全部数据，节省了重复层级流量的传输，充分的利用了浏览器缓存，能够快速生成页面，缩短网页加载时间，增强用户页面浏览的舒适感。本申请还提供一种网页刷新***、计算机可读存储介质和服务器，具有上述有益效果。

Description

一种网页刷新方法、网页刷新***及相关装置

技术领域

本申请涉及计算机网络领域，特别涉及一种网页刷新方法、网页刷新***及相关装置。

背景技术

目前大部分页面都会注重首屏加载速度，而大部分应用，首屏相对复杂，细节改动频繁，但是部分页面又不会变动，一旦请求页面的全部数据，将造成大部分数据代码重复，且在接收到服务器返回的代码后重新渲染严重影响页面加载速度。

发明内容

本申请的目的是提供一种网页刷新方法、网页刷新***、计算机可读存储介质和服务器，通过设置视图层级缓存有效的提高网页加载速度。

为解决上述技术问题，本申请提供一种网页刷新方法，具体技术方案如下：

接收网页的刷新请求；

判断浏览器是否设置协商缓存；

若是，判断所述刷新请求是否命中视图层级缓存；所述视图层级缓存至少为三层；

若所述刷新请求包含视图层级缓存，返回所述刷新请求对应的视图层级缓存，以便所述浏览器利用所述视图层级缓存刷新网页。

可选的，判断浏览器是否设置协商缓存之前，还包括：

判断所述浏览器是否设置强制缓存；

若否，执行判断浏览器是否设置协商缓存的步骤；

若是，判断所述强制缓存是否过期；

若所述强制缓存过期，执行判断浏览器是否设置协商缓存的步骤；

若所述强制缓存未过期，利用所述强制缓存刷新网页。

可选的，返回所述刷新请求对应的视图层级缓存包括：

解析所述刷新请求中包含的请求头数据，得到视图层级对应的缓存标识；

返回所述缓存标识对应的视图层级缓存。

可选的，若所述请求头数据包含浏览器端视图时间戳，则返回所述缓存标识对应的视图层级缓存包括：

确定最新视图时间戳；

判断所述浏览器端视图时间戳与所述最新视图时间戳是否一致；

若不一致，将所述最新视图时间戳和对应的层级缓存代码作为所述请求头数据对应的视图层级缓存存入响应头数据，并返回所述响应头数据。

可选的，若所述刷新请求不包含视图层级缓存，还包括：

返回全部页面源数据，以便所述浏览器渲染所述页面源数据并刷新网页。

可选的，还包括：

确定目标元素，对所述目标元素添加预设标识，生成所述视图层级缓存。

可选的，还包括：

根据所述网页的目录结构配置相应的唯一标识，生成所述视图层级缓存。

本申请还提供一种网页刷新***，包括：

请求接收模块，用于接收网页的刷新请求；

第一判断模块，用于判断浏览器是否设置协商缓存；

第二判断模块，用于所述第一判断模块判断结果为是时，判断所述刷新请求是否命中视图层级缓存；所述视图层级缓存至少为三层；

网页刷新模块，用于所述第二判断模块判断结果为是时，返回所述刷新请求对应的视图层级缓存，以便所述浏览器利用所述视图层级缓存刷新网页。

本申请还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上所述的方法的步骤。

本申请还提供一种服务器，包括存储器和处理器，所述存储器中存有计算机程序，所述处理器调用所述存储器中的计算机程序时实现如上所述的方法的步骤。

本申请提供一种网页刷新方法，包括：接收网页的刷新请求；判断浏览器是否设置协商缓存；若是，判断所述刷新请求是否命中视图层级缓存；所述视图层级缓存至少为三层；若所述刷新请求包含视图层级缓存，返回所述刷新请求对应的视图层级缓存，以便所述浏览器利用所述视图层级缓存刷新网页。

本申请在执行网页刷新时，先判断浏览器是否设置协商缓存，在浏览器设置协商缓存时，服务端会返回刷新请求对应的视图层级缓存，而无需返回网页的全部数据，节省了重复层级流量的传输，充分的利用了浏览器缓存，能够快速生成页面，缩短网页加载时间，增强用户页面浏览的舒适感。

本申请还提供一种网页刷新***、计算机可读存储介质和服务器，具有上述有益效果，此处不再赘述。

附图说明

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

图1为本申请实施例所提供的一种网页刷新方法的流程图；

图2为本申请实施例所提供的一种网页刷新***的结构示意图。

具体实施方式

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

请参考图1，图1为本申请实施例所提供的一种网页刷新方法的流程图，该方法包括：

S101：接收网页的刷新请求；

本步骤旨在接收网页的刷新请求，该刷新请求可以为主动请求，也可以为根据预先设置的刷新参数所生成的被动刷新请求。例如用户在首页打开网页时，可以为主动生成的刷新请求。本步骤中的网页可以源于各种可运行网页的终端设备，需要说明的是，其可以为移动端网页，例如移动终端上的应用界面，均可以作为本实施例中的网页。

在此对于刷新请求的具体内容不作限定，其至少应当包括缓存请求，但对于具体的缓存请求内容不作具体限定。

S102：判断浏览器是否设置协商缓存；若是，进入S103；

本步骤旨在判断浏览器是否设置协商缓存。协商缓存用于包含浏览器的客户端与服务端进行协商交互，以判断缓存资源是否过期。请求资源时，把浏览器本地缓存的标识同时带到服务端，服务端和最新资源做对比。如果缓存资源未更改，浏览器读取本地缓存。如果缓存资源发生更改，返回最新的资源。

S103：判断所述刷新请求是否命中视图层级缓存；若是，进入S104；

当浏览器设置协商缓存时，并不直接在服务端执行本地资源和最新资源的比对过程，而是判断刷新请求是否包含视图层级缓存。本实施例中，若刷新请求包含视图层级缓存，默认在执行本实施例前已经针对浏览器中的网页进行视图分层。在此对于如何执行网页视图分层不作限定。本实施例在此提供一下几种网页视图分层方式：

第一种：确定目标元素，对所述目标元素添加预设标识，生成所述视图层级缓存。

即用户可以自定义目标元素作为一层视图，并添加相应的预设标识，得到该目标元素的视图层级缓存，相当于将该目标元素从本地网页资源中单独分类，且服务端中进行相应的视图分层。例如可以给某个div设置对应的视图层级，属性用s-index表示。

第二种：根据所述网页的目录结构配置相应的唯一标识，生成所述视图层级缓存。

还可以根据网页的目录结构进行视图分层，例如根节点html元素为第一层，body以及body同级别为第二层，body下一层为第三层级，以此类推。当然，每一层级都包含对应的唯一标识。

第三种：根据所述网页的目录结构进行第一类视图分层，在第一类视图分层的基础上配置自定义层级项。

即将第一种和第二种视图分层方法相结合，优选的，在视图层级的实际应用过程中，可以将第一种方式和第二种相结合，并分为两种模式。第一种为默认模式，以网页元素的目录树状图的级别为参考，默认模式中每一层级会自动加上唯一v-index标识。第二种模式可以手动对元素设置v-index，设置v-index的元素会对对应的唯一标识进行缓存两种层级模式可以共存，为了使得视图分层方便，可以设置默认模式默认开启，手动模式可自由设定。

无论采用何种视图分层方式，其至少应少于三层，但不宜过多，通常可以不超过10层。每一视图层级都应存在唯一对应的标识，且所采用的视图分层方式应与服务端协议配置生成，以便服务端在接收到命中视图层级缓存的刷新请求时，能够返回相应的视图层级缓存。

此外，本步骤中判断刷新请求是否命中视图层级缓存，指判断刷新请求是否包含对视图层级缓存的请求，或者与视图层级缓存请求具有相同作用的其他形式的请求，例如包含对应视图层级唯一标识的请求等。

S104：返回所述刷新请求对应的视图层级缓存，以便所述浏览器利用所述视图层级缓存刷新网页。

当刷新请求中命中视图层级缓存时，返回对应的视图层级缓存。具体的，可以解析刷新请求中包含的请求头数据，得到视图层级对应的缓存标识，即可返回缓存标识对应的视图层级缓存。

需要说明的是，对于如何返回刷新请求对应的视图层级缓存不作不限定，其应根据不同的刷新请求作相应的请求响应。

例如，若所述请求头数据包含浏览器端视图时间戳，则在执行返回所述缓存标识对应的视图层级缓存时可以包括如下步骤：

第一步、确定最新视图时间戳；

第二步、判断所述浏览器端视图时间戳与所述最新视图时间戳是否一致；若不一致，进入第三步；

第三步、将所述最新视图时间戳和对应的层级缓存代码作为所述请求头数据对应的视图层级缓存存入响应头数据，并返回所述响应头数据。

服务端确定自身的最新视图时间戳，并判断请求头数据中的浏览器端视图时间戳是否与自身的最新视图时间戳一致，由于服务端中的最新视图时间戳为当前最新版本，一旦二者不一致，则说明，浏览器端视图时间戳落后与服务端的最新视图时间戳。需要说明的是，无论是浏览器端视图时间戳还是服务端的视图时间戳，均指代相应缓存的最新版本时间，即浏览器端视图时间戳指代浏览器中缓存的当前版本的最后更新时间，服务端的最新视图时间戳同样指代服务端缓存的当前版本的最后更新时间。

当二者不一致时，服务端将最新视图时间戳和对应的层级缓存代码存入响应头数据并返回。容易理解的是，浏览器端在接收到响应头数据后，利用最新视图时间戳对应的层级缓存代码刷新页面，还可以将自身的浏览器端视图时间戳更新为最新视图时间戳。

在上述过程中，浏览器端视图时间戳和服务端的视图时间戳均起到缓存标识的作用，即与视图层级缓存相对应的缓存标识，当然本领域技术人员还可以在本实施例的基础上采用其他形式的缓存标识，用于实现浏览器端与服务端二者之间视图层级缓存更新时的比对过程，在此不一一举例限定，也应在本申请的保护范围内。

此外，本实施例中，若刷新请求不包含视图层级缓存，此时可以返回全部页面源数据，以便所述浏览器渲染所述页面源数据并刷新网页。

需要说明的是，本实施例中的服务端包括服务器，以及其他可以起到接收浏览器端的刷新请求并针对刷新请求进行响应的服务端设备。

本申请实施例在执行网页刷新时，先判断浏览器是否设置协商缓存，在浏览器设置协商缓存时，服务端会返回刷新请求对应的视图层级缓存，而无需返回网页的全部数据，实现网页刷新时的针对性刷新，节省了重复层级流量的传输，充分的利用了浏览器缓存，能够快速生成页面，缩短网页加载时间，增强用户页面浏览的舒适感。

基于上述实施例，作为优选的实施例，判断浏览器是否设置协商缓存之前，还可以包括如下步骤：

S201：判断所述浏览器是否设置强制缓存；若否，进入S202；若是，进入S203；

S202：执行判断浏览器是否设置协商缓存的步骤；

S203：判断所述强制缓存是否过期；若否，进入S204；若是，返回S202；

S204：利用所述强制缓存刷新网页。

本实施旨在执行协商缓存之前，执行强制缓存的判断。浏览器在发起请求资源前，可以先根据请求头字段Expires和Cach-control判断是否命中强制缓存，如果命中的话就直接读取本地缓存资源，不再向服务器发请求，且返回相应的状态码，例如状态码可以为200。当浏览器端请求某个文件的时候，服务端就在响应头数据中对该文件做缓存配置。缓存的时间、缓存类型都由服务端控制，具体表现为：响应头数据的cache-control，常见的设置是max-age public private no-cache no-store等。简单来说，强制缓存设定了过期时间，客户端每次请求资源时都会看是否过期，只有在过期才会重新向服务器发送请求。

如果没有命中强制缓存，则浏览器会发起请求，会带一些请求头字段，服务端根据这些字段来判断是否命中协商缓存。例如，if-none-match和或者if-modified-since，这是浏览器发给服务端的请求头字段。if-none-match值包含了上次请求服务端返回资源的响应头字段里的Etag值，Etag值为服务端根据资源文件生成的唯一标识，只要资源文件没变化则Etag值不变。

而if-modified-since至用于指示上次服务端返回的last-modified值，last-modified包含了响应资源在服务端最后修改的日期，而浏览器端记载的if-modified-since对应上述实施例中的浏览器端视图时间戳。然后服务端会判断此次请求字段的if-none-match和根据它请求的资源文件生产的Etag的值，比较二者是不是相同，判断唯一标识是否相同。或者判断请求字段的if-modified-since和服务端该资源的最后修改时间，即服务端中的最新视图时间戳做比对。相同的话说明资源没有改变过，则不会返回资源文件，表示协商缓存，此时可以返回协商缓存对应的代码，例如返回304，用于告知浏览器端直接读取本地的缓存资源。如果不同的话说明服务端资源发生变换，则会返回请求的资源文件，还可以返回相应的状态码，例如200。

在执行本实施例的步骤S202时，可以参考上述实施例中S102到S104的过程，在此不作重复说明。

下文针对视图层级缓存和服务端对应的配置采用具体的参数设置过程进行描述：

视图层级在请求头具体的存储方式可以采用键值对，具体的，关键字key使用v-index，值value使用对象的方式存储，存储的内容为当前视图更新的时间戳或者唯一标识。如果对应html代码片段有更新，则发布时候会做差异性对比，并且更新对应的v-index时间戳，当浏览器发出刷新请求时也会带上之前服务端返回的层级标识，服务端将最新的层级标识和浏览器刷新请求中的标识对比，如果一致则不返回html代码片段，如果不一致说明html代码片段已经更新，则返回更新的对应v-index的html代码片段，浏览器接收到对应的代码片段，再进行网页的刷新，由于刷新时仅需要重新渲染部分html代码，能够提高网页刷新速度。

服务端可以设置响应头来配置是否使用视图层级模式，例如字段为view-store，对应的值有，none，表示不使用视图层级；auto，自动模式，自动模式下层级为3，level为层级模式。当设置为level的时候，可以给具体的html内部标签设置层级，具体的设置如下，例如<html v-index＝"4">层级缓存标签</html>，如此设置后，服务端会判断标签html上设置的v-index判断有几层层级，然后再对这几层里，每层设置一个具体缓存标识的v-index-data，当浏览器再次请求的时候，会比对缓存标识，返回不同缓存标识的节点。本实施例对js以及css代码也起作用，可有效的减少多余代码的传输，以达到代码快速传输的目的，从而有助于页面的快速刷新。

本实施例中所设置的视图层级存储方式，以及服务端的配置参数均为本申请公开的一种较为具体的实施过程，本领域技术人员可以在本实施例的基础上采用其他设置方式，也应在本申请的保护范围内。

下面对本申请实施例提供的网页刷新***进行介绍，下文描述的网页刷新***与上文描述的网页刷新方法可相互对应参照。

图2为本申请实施例所提供的一种网页刷新***的结构示意图，本申请还提供一种网页刷新***，包括：

请求接收模块100，用于接收网页的刷新请求；

第一判断模块200，用于判断浏览器是否设置协商缓存；

第二判断模块300，用于所述第一判断模块200判断结果为是时，判断所述刷新请求是否命中视图层级缓存；所述视图层级缓存至少为三层；

网页刷新模块400，用于所述第二判断模块300判断结果为是时，返回所述刷新请求对应的视图层级缓存，以便所述浏览器利用所述视图层级缓存刷新网页。

基于上述实施例，作为优选的实施例，还包括：

强制缓存判断模块，用于判断浏览器是否设置协商缓存之前，判断所述浏览器是否设置强制缓存；若否，进入第一判断模块200；若是，判断所述强制缓存是否过期；若所述强制缓存过期，进入第一判断模块200；若所述强制缓存未过期，利用所述强制缓存刷新网页。

基于上述实施例，作为优选的实施例，网页刷新模块400包括：

解析单元，用于解析所述刷新请求中包含的请求头数据，得到视图层级对应的缓存标识；

返回单元，用于返回所述缓存标识对应的视图层级缓存。

基于上述实施例，作为优选的实施例，若所述请求头数据包含浏览器端视图时间戳，所述网页刷新模块400包括：

响应数据返回单元，用于确定最新视图时间戳；判断所述浏览器端视图时间戳与所述最新视图时间戳是否一致；若不一致，将所述最新视图时间戳和对应的层级缓存代码作为所述请求头数据对应的视图层级缓存存入响应头数据，并返回所述响应头数据。

基于上述实施例，作为优选的实施例，还包括：

刷新模块，用于若所述刷新请求不包含视图层级缓存，返回全部页面源数据，以便所述浏览器渲染所述页面源数据并刷新网页。

基于上述实施例，作为优选的实施例，还包括：

第一视图层级生成模块，用于确定目标元素，对所述目标元素添加预设标识，生成所述视图层级缓存。

基于上述实施例，作为优选的实施例，还包括：

第二视图层级生成模块，用于根据所述网页的目录结构配置相应的唯一标识，生成所述视图层级缓存。

本申请还提供了一种计算机可读存储介质，其上存有计算机程序，该计算机程序被执行时可以实现上述实施例所提供的步骤。该存储介质可以包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

本申请还提供了一种服务器，可以包括存储器和处理器，所述存储器中存有计算机程序，所述处理器调用所述存储器中的计算机程序时，可以实现上述实施例所提供的步骤。当然所述服务器还可以包括各种网络接口，电源等组件。

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

本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围内。

还需要说明的是，在本说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

Claims

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

接收网页的刷新请求；

判断浏览器是否设置协商缓存；

2.根据权利要求1所述的网页刷新方法，其特征在于，判断浏览器是否设置协商缓存之前，还包括：

判断所述浏览器是否设置强制缓存；

若否，执行判断浏览器是否设置协商缓存的步骤；

若是，判断所述强制缓存是否过期；

若所述强制缓存未过期，利用所述强制缓存刷新网页。

3.根据权利要求1所述的网页刷新方法，其特征在于，返回所述刷新请求对应的视图层级缓存包括：

返回所述缓存标识对应的视图层级缓存。

4.根据权利要求3所述的网页刷新方法，其特征在于，若所述请求头数据包含浏览器端视图时间戳，则返回所述缓存标识对应的视图层级缓存包括：

确定最新视图时间戳；

5.根据权利要求1所述的网页刷新方法，其特征在于，若所述刷新请求不包含视图层级缓存，还包括：

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

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

8.一种网页刷新***，其特征在于，包括：

请求接收模块，用于接收网页的刷新请求；

第一判断模块，用于判断浏览器是否设置协商缓存；

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

10.一种服务器，其特征在于，包括存储器和处理器，所述存储器中存有计算机程序，所述处理器调用所述存储器中的计算机程序时实现如权利要求1-7任一项所述的网页刷新方法的步骤。