一种web页面缓存更新的方法、系统、web页面和存储介质技术方案

本发明专利技术揭示了一种web页面缓存的方法、系统、web页面和存储介质，其方法包括：利用js文件构建web页面，js文件包括web页面的内容数据和js文件的hash值；第一次请求web页面，在获取第一web页面后，自动缓存第一web页面，包括第一js文件的第一hash值；第二次请求web页面，获取第二web页面的数据；解析第二web页面的数据，获取第二js文件的第二hash值；对比第一hash值和第二hash值，若两者一致，则无需更新第一web页面；若两者不一致，则缓存第二web页面，第一web页面更新为第二web页面。该方法不仅降低用户使用流量，而且消除了因web页面缓存产生的更新滞后和程序错误问题，提升用户体验感。验感。验感。

【技术实现步骤摘要】
一种web页面缓存更新的方法、系统、web页面和存储介质


[0001]本专利技术涉及web应用领域，尤其一种web页面缓存更新的方法、系统、web页面和存储介质。

技术介绍

[0002]目前，前端和后端分离是互联网应用发展的主要趋势，在web开发时，经常采用web页面缓存机制，来大幅度降低前端web页面向服务器端获取文件而产生的流量，提高用户体验。
[0003]但与此同时，新的问题也产生了，即如果服务器中前端的程序更新后，由于前端页面缓存机制，往往容易导致用户端没有更新前端页面而产生一些程序错误，而目前的浏览器工具对于强制缓存更新的兼容性都一般，并无法完全解决前端程序更新后而导致的一系列程序崩溃或文件错误问题。
[0004]因此，需要提供一种新的方案，在保持web页面缓存降低文件缓存流量的基础上，当前端程序更新时，及时获取新的文件数据，对缓存的web页面数据进行更新，消除web页面缓存带来的程序错误问题，提升用户使用感。

技术实现思路

[0005]本专利技术的目的是提供一种新的方案，在保持web页面缓存以降低流量的基础上，当前端程序更新时，及时获取新的文件数据，对缓存的web页面数据进行更新，消除web页面缓存带来的程序错误问题，提升用户体验感。
[0006]为了达到上述目的，本专利技术提供了一种web页面缓存更新的方法，包括：
[0007]利用js文件构建web页面，所述js文件包括所述web页面的内容数据和所述js文件的hash值；
[0008]第一次请求web页面，在获取第一web页面后，自动缓存所述第一web页面，所述第一web页面包括第一js文件的第一hash值；
[0009]第二次请求web页面，获取第二web页面的数据；
[0010]解析所述第二web页面的数据，获取第二js文件的第二hash值；
[0011]对比所述第一hash值和第二hash值，若两者一致，则无需更新所述第一web页面；若两者不一致，则缓存所述第二web页面，所述第一web页面更新为所述第二web页面。
[0012]可选的，通过javascript脚本请求获取所述第二js文件的第二hash值。
[0013]可选的，所述js文件通过编译打包生成，所述js文件的hash值被写在所述js文件的文件名中。
[0014]可选的，若所述第一hash值和第二hash值不一致，客户端加载显示所述第二web页面。
[0015]本专利技术还提供了一种web页面，包括：
[0016]js文件，所述js文件包括所述web页面的内容数据和所述js文件的hash值；
[0017]javascript脚本，用于自动请求获取所述js文件的hash值。
[0018]可选的，所述js文件的hash值被写入所述js文件的文件名。
[0019]可选的，所述javascript脚本的触发条件是当所述web页面被加载时。
[0020]本专利技术还提供了一种web页面缓存更新的系统，基于web页面，包括：
[0021]数据交互模块，用于向服务器发送请求获取web页面，并接收所述服务器的应答；
[0022]缓存模块，用于缓存web页面；
[0023]数据解析模块，用于解析web页面的数据，获取js文件的hash值；判断web页面被加载时javascript脚本自服务器获取的第二hash值与所述缓存模块中已缓存web页面的第一hash值是否一致，若两者不一致，则进行缓存更新。
[0024]可选的，还包括：显示模块，用于显示web页面，当所述第二hash值与所述第一hash值不一致时，显示所述第二hash值所代表的web页面。
[0025]本专利技术还提供一种存储介质，存有计算机程序，在执行所述计算机程序时实现web页面缓存更新的方法。
[0026]本专利技术的web页面缓存更新的方法通过在第一次请求web页面时自动缓存，之后再以web页面中能够代表文件大小的hash值来判断服务器中的web页面是否更新，若web页面被加载时向服务器请求获取的数据中hash值与缓存的web页面的hash值一致，则说明不需要对缓存的web页面进行更新，若不一致，则说明需要更新。这种通过javascript脚本获取js文件中hash值的方式，当前端程序更新时，能够及时获取新的文件数据，对缓存的web页面数据进行更新，消除web页面缓存带来的程序错误问题。且有选择性地缓存web页面不仅减少了缓存web页面的流量，而且提升用户使用浏览器的便捷性，并且本专利技术的判断是否需要对缓存文件进行更新的方式简单而迅速，有效优化了缓存更新的方式，降低客户端进程负荷，提升用户体验感和前端开发效率。
附图说明
[0027]图1为本专利技术一具体实施例中的web页面缓存更新的方法的流程图；
[0028]图2为本专利技术一具体实施例中的web页面缓存更新的系统的模块图。
具体实施方式
[0029]下面将结合说明书附图对本专利技术的web页面缓存更新的方法、系统、web页面和存储介质进行更详细的描述，其中表示了本专利技术的优选实施例，应该理解本领域技术人员可以修改在此描述的本专利技术，而仍然实现本专利技术的有利效果。因此，下列描述应当被理解为对于本领域技术人员的广泛知道，而并不作为对本专利技术的限制。
[0030]请参考图1，图1为本专利技术一具体实施例中的web页面缓存更新的方法的流程图。
[0031]步骤S101：利用js文件构建web页面，所述js文件包括所述web页面的内容数据和所述js文件的hash值；
[0032]步骤S102：第一次请求web页面，在获取第一web页面后，自动缓存所述第一web页面，所述第一web页面包括第一js文件的第一hash值；
[0033]步骤S103：第二次请求web页面，获取第二web页面的数据；
[0034]步骤S104：解析所述第二web页面的数据，获取第二js文件的第二hash值；
[0035]步骤S105：对比所述第一hash值和第二hash值，若两者一致，则无需更新所述第一web页面；若两者不一致，则缓存所述第二web页面，所述第一web页面更新为所述第二web页面。
[0036]具体的，在步骤S101中，利用js文件构建web页面，所述js文件包括所述web页面的内容数据和所述js文件的hash值，js文件的hash值代表着js文件的大小，当web页面的内容数据不变，即web页面没有进行更新时，js文件的hash值也不会产生变动。
[0037]进一步的，编译js文件时，将js文件的hash值打包至js文件的文件名中，例如，文件名为index.7ec804c2.js的js文件，7ec804c2代表该js文件的hash值，这种静态数据被调取所需的流量和时间更低，能够提升服务器的处理速度。
[0038]在步骤S102中，客户端第一次通过URL网址向服务器请求获取web页面本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种web页面缓存更新的方法，其特征在于，包括：利用js文件构建web页面，所述js文件包括所述web页面的内容数据和所述js文件的hash值；第一次请求web页面，在获取第一web页面后，自动缓存所述第一web页面，所述第一web页面包括第一js文件的第一hash值；第二次请求web页面，获取第二web页面的数据；解析所述第二web页面的数据，获取第二js文件的第二hash值；对比所述第一hash值和第二hash值，若两者一致，则无需更新所述第一web页面；若两者不一致，则缓存所述第二web页面，所述第一web页面更新为所述第二web页面。2.根据权利要求1所述的web页面缓存更新的方法，其特征在于，通过javascript脚本请求获取所述第二js文件的第二hash值。3.根据权利要求1所述的web页面缓存更新的方法，其特征在于，所述js文件通过编译打包生成，所述js文件的hash值被写在所述js文件的文件名中。4.根据权利要求1所述的web页面缓存更新的方法，其特征在于，若所述第一hash值和第二hash值不一致，客户端加载显示所述第二web页面。5.一种web页面，其特征在于，包括：js文件，所述js文件包括所述web页面的内容数据和所述js文件的hash值；...

【专利技术属性】
技术研发人员：陈超，刘健，张国梁，孙浩，
申请(专利权)人：上海同在互联网科技有限公司，
类型：发明
国别省市：