一种网页离线化高效加载方法、系统、设备及介质与流程

本发明涉及网页加载，特别是涉及一种网页离线化高效加载方法、系统、设备及介质。

背景技术：

1、目前，移动端常使用基于h5页面的网页离线技术进行网页的离线加载，其使用的h5页面会通过线上接口在线更新离线包，离线包的包体通常较大，受网络影响非常的大，用户网络差的情况下，加载时间通常都会在10s以上，影响用户的体验；而由于包体较大影响加载速度，重要的功能页面就不适合使用h5去开发。

技术实现思路

1、本发明的目的在于，针对现有技术中的上述问题，提供一种网页离线化高效加载方法、系统、设备及介质，进而解决现有技术中移动端下载zip包体较大导致首次加载过慢，影响及时完成渲染和用户体验，使重要功能页面不适合使用h5去开发的问题。

2、为解决上述技术问题，本发明的具体技术方案如下：

3、一方面，本发明提供一种网页离线化高效加载方法，包括以下步骤：

4、资源拆分处理步骤：

5、对待离线化网页的功能资源进行拆分压缩处理，得到拆分资源包；

6、网页离线加载步骤：

7、基于所述拆分资源包配置网页移动端，根据所述网页移动端以及所述拆分资源包进行网页离线化加载；

8、网页变更处理步骤：

9、响应于所述网页移动端的变更情况，执行基于桥接技术进行所述网页移动端的通信，或执行基于资源包重建的移动端配置操作。

10、作为一种改进的方案，所述对待离线化网页的功能资源进行拆分压缩处理，得到拆分资源包，包括：

11、确认所述待离线化网页的若干模块功能；

12、根据若干所述模块功能，对所述待离线化网页的资源文件进行拆分，得到与若干所述模块功能分别对应的若干拆分文件；

13、对若干所述拆分文件分别进行转义及压缩处理，得到若干压缩离线包；

14、将若干所述压缩离线包作为所述拆分资源包。

15、作为一种改进的方案，所述基于所述拆分资源包配置网页移动端，包括：

16、将所述拆分资源包内嵌至所述网页移动端中；

17、在所述网页移动端中对内嵌的所述拆分资源包进行解压，得到解压资源文件。

18、作为一种改进的方案，所述根据所述网页移动端以及所述拆分资源包进行网页离线化加载，包括：

19、响应于所述网页移动端中所述待离线化网页的访问请求，采用本地访问协议访问所述网页移动端中的所述解压资源文件；

20、采用局部可视化组件根据所述局部webview在所述待离线化网页中进行html渲染。

21、作为一种改进的方案，所述变更情况，包括：数据变更和功能变更；

22、所述响应于所述网页移动端的变更情况，基于桥接技术进行所述网页移动端的通信，或执行基于资源包重建的移动端配置操作，包括：

23、响应于所述变更情况为数据变更，基于所述桥接技术进行所述网页移动端的通信；

24、响应于所述变更情况为功能变更，执行所述基于资源包重建的移动端配置操作。

25、作为一种改进的方案，所述基于桥接技术进行所述网页移动端的通信，包括：

26、基于所述桥接技术获取更新html，调用所述待离线化网页使用所述更新html；

27、基于所述桥接技术进行所述待离线化网页与所述网页移动端间的通信。

28、作为一种改进的方案，所述基于资源包重建的移动端配置操作，包括：

29、确认所述功能变更的第一功能；

30、基于所述拆分压缩处理生成与所述第一功能对应的拆分资源包；

31、将与所述第一功能对应的拆分资源包内嵌至所述网页移动端中。

32、另一方面，本发明还提供一种网页离线化高效加载系统，包括：

33、资源拆分处理模块、网页离线加载模块和网页变更处理模块；

34、所述资源拆分处理模块，用于对待离线化网页的功能资源进行拆分压缩处理，得到拆分资源包；

35、所述网页离线加载模块，用于根据所述拆分资源包配置网页移动端，所述网页离线加载模块根据所述网页移动端以及所述拆分资源包进行网页离线化加载；

36、所述网页变更处理模块，用于响应于所述网页移动端的变更情况，执行基于桥接技术进行所述网页移动端的通信，或执行基于资源包重建的移动端配置操作。

37、另一方面，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现所述网页离线化高效加载方法的步骤。

38、另一方面，本发明还提供一种计算机设备，所述计算机设备包括处理器、通信接口、存储器和通信总线，其中，所述处理器，所述通信接口，所述存储器通过所述通信总线完成相互间的通信；其中：

39、所述存储器，用于存放计算机程序；

40、所述处理器，用于通过运行所述存储器上所存放的程序来执行所述 方法的步骤。

41、本发明技术方案的有益效果是：

42、本发明所述的网页离线化高效加载方法，可以通过彻底离线化解决资源加载慢的问题，将网页资源彻底离线化，提高h5页面的加载速度，使页面的加载速度媲美原生app，且不影响功能的迭代，极大的提高了离线化网页的访问流畅度，提升了用户的体验感。

43、本发明所述的网页离线化高效加载系统，可以通过资源拆分处理模块、网页离线加载模块和网页变更处理模块的相互配合，进而实现本发明所述的网页离线化高效加载方法。

44、本发明所述的计算机可读存储介质，可以实现引导资源拆分处理模块、网页离线加载模块和网页变更处理模块进行配合，进而实现本发明所述的网页离线化高效加载方法，且本发明所述的计算机可读存储介质还有效提高所述网页离线化高效加载方法的可操作性。

45、本发明所述的计算机设备，可以实现存储并执行所述计算机可读存储介质，进而实现本发明所述的网页离线化高效加载方法。

技术特征：

1.一种网页离线化高效加载方法，其特征在于，包括以下步骤：

2.根据权利要求1所述的一种网页离线化高效加载方法，其特征在于：

3.根据权利要求2所述的一种网页离线化高效加载方法，其特征在于：

4.根据权利要求3所述的一种网页离线化高效加载方法，其特征在于：

5.根据权利要求4所述的一种网页离线化高效加载方法，其特征在于：

6.根据权利要求4所述的一种网页离线化高效加载方法，其特征在于：

7.根据权利要求5所述的一种网页离线化高效加载方法，其特征在于：

8.一种网页离线化高效加载系统，其特征在于，包括：资源拆分处理模块、网页离线加载模块和网页变更处理模块；

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1~7中任一项所述网页离线化高效加载方法的步骤。

10.一种计算机设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，所述处理器，所述通信接口，所述存储器通过所述通信总线完成相互间的通信；其中：

技术总结
本发明公开了一种网页离线化高效加载方法、系统、设备及介质，所述方法包括以下步骤：对待离线化网页的功能资源进行拆分压缩处理，得到拆分资源包；基于拆分资源包配置网页移动端，根据网页移动端以及拆分资源包进行网页离线化加载；响应于网页移动端的变更情况，执行基于桥接技术进行网页移动端的通信，或执行基于资源包重建的移动端配置操作；本发明能够通过彻底离线化解决资源加载慢的问题，将网页资源彻底离线化，提高H5页面的加载速度，使页面的加载速度媲美原生APP，且不影响功能的迭代，极大的提高了离线化网页的访问流畅度，提升了用户的体验感。

技术研发人员：王辉
受保护的技术使用者：苏州摩多多信息科技有限公司
技术研发日：
技术公布日：2024/1/16