[发明专利]H5页面预加载方法、系统、存储介质及电子设备

说明书

本发明提供一种H5页面预加载方法、系统、存储介质及电子设备，所述方法包括以下步骤：进行H5页面预加载时，基于原生层预加载H5页面DOM，并将所述H5页面DOM存储至原生缓存中；基于所述原生层预加载所述H5页面DOM对应的静态资源，并将所述静态资源存储至网页缓存中；当打开所述H5页面时，基于所述原生层从所述原生缓存中读取所述H5页面DOM并提供至所述网页组件，基于网页组件从所述网页缓存中读取所述H5页面DOM对应的静态资源，并根据读取的静态资源完成H5页面的渲染。本发明的H5页面预加载方法、系统、存储介质及电子设备能够实现H5页面的快速高效加载，有效提升了用户体验。

技术领域

本发明属于页面加载的技术领域，特别是涉及一种H5页面预加载方法、系统、存储介质及电子设备。

背景技术

H5即HTML5(HyperText Markup Language 5)，其是Web中核心语言HTML的规范，用于描述网页内容结构的语言。用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。在移动端、电脑端等电子设备上，基于H5页面可以通过不同的元素如文字、音乐、图片、链接等来呈现不同的页面信息，其具有快速迭代、灵活配置运营等优势。

目前，电子设备端通常需要预加载H5页面主DOM(Document Object Model，文档对象模型)、页面静态资源，来提高H5嵌入业务部署性能，从而提升用户体验。

发明内容

本发明的目的在于提供一种H5页面预加载方法、系统、存储介质及电子设备，能够实现H5页面的快速高效加载，有效提升了用户体验。

第一方面，本发明提供一种H5页面预加载方法，所述方法包括以下步骤：进行H5页面预加载时，基于原生层预加载H5页面DOM，并将所述H5页面DOM存储至原生缓存中；基于所述原生层预加载所述H5页面DOM对应的静态资源，并将所述静态资源存储至网页缓存中；当打开所述H5页面时，基于所述原生层从所述原生缓存中读取所述H5页面DOM并提供至所述网页组件，基于网页组件从所述网页缓存中读取所述H5页面DOM对应的静态资源，并根据读取的静态资源完成H5页面的渲染。

因此，通过原生层和网页组件之间的交互，本发明的H5页面预加载方法能够极大地优化电子设备端H5页面的性能，实现了H5页面的快速高效加载，有效提升了用户体验；同时解决了采用全局网络拦截组件造成网络请求的HTTP post丢失body、原生层与网页组件的Cookie不同步等问题。

在第一方面的一种实现方式中，基于所述原生层预加载所述H5页面DOM对应的静态资源包括以下步骤：基于所述原生层对所述H5页面DOM进行解析，获取所述静态资源；基于所述原生层预加载所述静态资源。

在第一方面的一种实现方式中，基于所述原生层从所述原生缓存中读取所述H5页面DOM并提供至所述网页组件包括以下步骤：基于所述原生层从所述原生缓存中读取所述H5页面DOM；基于load data方案将所述H5页面DOM提供至所述网页组件。

在第一方面的一种实现方式中，还包括基于所述原生层将当前网页浏览记录写入所述网页组件。

因此，通过采用load data方法，本发明的H5页面预加载方法有效解决了H5页面的历史页面丢失的问题。

第二方面，本发明提供一种H5页面预加载系统，所述系统包括原生层、原生缓存、网页组件和网页缓存；进行H5页面预加载时，所述原生层用于预加载H5页面DOM，并将所述H5页面DOM存储至所述原生缓存中；预加载所述H5页面DOM对应的静态资源，并将所述静态资源存储至所述网页缓存中；当打开所述H5页面时，所述原生层用于从所述原生缓存中读取所述H5页面DOM并提供至所述网页组件，所述网页组件用于从所述网页缓存中读取所述H5页面DOM对应的静态资源，并根据读取的静态资源完成H5页面的渲染。