CN114428930A - 基于h5页面的数据预加载方法、装置及电子设备 - Google Patents
基于h5页面的数据预加载方法、装置及电子设备 Download PDFInfo
- Publication number
- CN114428930A CN114428930A CN202210096740.4A CN202210096740A CN114428930A CN 114428930 A CN114428930 A CN 114428930A CN 202210096740 A CN202210096740 A CN 202210096740A CN 114428930 A CN114428930 A CN 114428930A
- Authority
- CN
- China
- Prior art keywords
- webview
- target
- data
- request
- page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 64
- 230000006854 communication Effects 0.000 claims abstract description 24
- 238000004891 communication Methods 0.000 claims abstract description 24
- 238000009877 rendering Methods 0.000 claims description 18
- 238000004590 computer program Methods 0.000 claims description 15
- 230000004044 response Effects 0.000 claims description 13
- 238000011161 development Methods 0.000 description 9
- 230000006870 function Effects 0.000 description 5
- 230000007175 bidirectional communication Effects 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 230000000977 initiatory effect Effects 0.000 description 4
- 230000001960 triggered effect Effects 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- YWXYYJSYQOXTPL-SLPGGIOYSA-N isosorbide mononitrate Chemical compound [O-][N+](=O)O[C@@H]1CO[C@@H]2[C@@H](O)CO[C@@H]21 YWXYYJSYQOXTPL-SLPGGIOYSA-N 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000009191 jumping Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 239000008186 active pharmaceutical agent Substances 0.000 description 1
- 239000012636 effector Substances 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000002708 enhancing effect Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000036316 preload Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000001737 promoting effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请提供了一种基于H5页面的数据预加载方法，用于基于多webviewH5进行数据异步预加载，其中，H5端与Native端基于通信协议进行双向通信，所述方法包括：在加载目标webviewURL之前：所述Native端响应于目标webview预加载触发条件，获取所述目标webview的预请求配置项；以及，根据所述目标webview的预请求配置项，从网络侧预先获取目标webview的配置数据，并以所述预请求配置项为索引，将所述配置数据存储在所述Native端的数据缓存池中。本方案可减少延迟，改善用户体验。
Description
技术领域
本申请涉及H5技术领域，尤其是涉及到一种基于H5页面的数据预加载方法、装置、存储介质及电子设备。
背景技术
智能手机的普及和移动互联网的发展，都为HTML5(HyperText Markup Language5，超文本标记语言5，简称H5)的发展提供了良好的环境。当前，HTML5已被广泛应用于移动APP(应用程序)产品中。基于H5端和Native(原生)端的Hybird(混合应用)开发模式具有低成本、高效率、跨平台等优点。
发明内容
有鉴于此，本申请提供了一种基于H5页面的数据预加载方法、装置、存储介质及电子设备，主要目的在于针对多webview H5实现数据预加载。
依据本申请的一个方面，提供了一种基于H5页面的数据预加载方法，用于基于多webview H5进行数据异步预加载，其中，H5端与Native端基于通信协议进行双向通信，所述方法包括：在加载目标webviewURL之前：所述Native端响应于目标webview预加载触发条件，获取所述目标webview的预请求配置项；以及，根据所述目标webview的预请求配置项，从网络侧预先获取目标webview的配置数据，并以所述预请求配置项为索引，将所述配置数据存储在所述Native端的数据缓存池中。
依据本申请的一个方面，提供了一种基于数据预加载的H5页面实现方法，用于基于数据异步预加载实现H5多webview，其中，H5端与Native端基于通信协议进行双向通信，所述方法包括：在加载目标webviewURL时，所述Native端在本地的数据缓存池中以预请求配置项为索引查找配置数据；若查找成功，则将查找到的目标webview的配置数据发送给所述H5端，使得H5端根据配置数据进行页面渲染。
依据本申请的一个方面，提供了一种基于H5页面的数据预加载装置，用于基于多webview H5进行数据异步预加载，所述装置包括H5端和Native端，H5端与Native端基于通信协议进行双向通信，其中，所述Native端用于，在加载目标webviewURL之前，响应于目标webview预加载触发条件，获取所述目标webview的预请求配置项；以及，根据所述目标webview的预请求配置项，从网络侧预先获取目标webview的配置数据，并以所述预请求配置项为索引，将所述配置数据存储在所述Native端的数据缓存池中。
依据本申请的一个方面，提供了一种基于数据预加载的H5页面实现装置，用于基于数据异步预加载实现H5多webview，所述装置包括H5端和Native端，其中，所述Native端用于：在加载目标webviewURL时，在本地的数据缓存池中以预请求配置项为索引查找配置数据；若查找成功，则将查找到的目标webview的配置数据发送给所述H5端，使得H5端根据配置数据进行页面渲染。
依据本申请的一个方面，提供了一种存储介质，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行上述基于H5页面的数据预加载方法或基于数据预加载的H5页面实现方法。
依据本申请的一个方面，提供了一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行上述基于H5页面的数据预加载方法或基于数据预加载的H5页面实现方法。
借由上述技术方案，本申请提供的一种基于H5页面的数据预加载方法、装置、存储介质及电子设备，针对会场页面等多webview场景下接口耗时较长的问题，为了缩短页面加载耗时，Native端在特定触发时机触发预请求操作，将请求的配置数据存储到Native端本地的数据缓存池中，从而在后续webview阶段，直接读取本地数据缓存池中预先加载的配置数据，提供给H5端进行页面渲染即可，而无需使Native端在webview阶段现从网络侧请求配置数据，节省网络开销，减少延迟，改善用户体验。
上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1示出了本申请实施例提供的一种基于H5页面的数据预加载方法流程图；
图2示出了本申请实施例提供的一种基于H5页面的数据预加载方法框架示意图；
图3示出了本申请实施例提供的一种基于H5页面的数据预加载方法示意图；
图4示出了本申请实施例提供的一种基于H5页面的数据预加载方法示例一流程图；
图5示出了本申请实施例提供的一种基于H5页面的数据预加载方法示例二流程图；
图6示出了本申请实施例提供的一种基于H5页面的数据预加载方法示例三流程图；
图7示出了本申请实施例提供的一种基于H5页面的数据预加载方法示例四流程图；
图8示出了了本申请实施例提供的一种基于数据预加载的H5页面实现方法流程图。
具体实施方式
为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。
本申请实施例可以应用于移动终端的APP上。移动终端可以为手机、平板电脑、可穿戴设备，等等。移动终端的操作系统可以为IOS系统(苹果公司开发的操作系统)、Android(安卓)系统，等等。
随着移动互联网的发展，移动App产品已经成为移动互联网产品最大的流量渠道，企业为了追求开发成本、产品质量、用户体验和开发效率，H5端(前端)和Native端(原生端)融合开发的模式是必然的趋势。目前，移动App产品通常会采用H5端承载服务，Native端承载基础组件服务(如加载H5页面并提供页面路由等)的方式进行开发。
以外卖APP为例，在促销日或促销期间，往往要实现多webview(网页视图)的H5页面，例如，多tab(页面标签)会场场景，从而吸引用户。实际中，会场页面的首屏接口调用耗时较长，部分甚至达2s以上。为了缩短页面加载耗时，本申请实施例提供一种基于H5页面的数据预加载方法，以针对多webview H5页面的场景下，提高页面数据加载的效率，提升用户体验。
参见图1，为本申请实施例提供的一种基于H5页面的数据预加载方法，其中，H5端与Native端基于通信协议进行双向通信。该基于H5页面的数据预加载方法，在加载目标webviewURL(Uniform Resource Locator，统一资源定位符)之前，执行如下步骤S101-S102。
S101：Native端响应于目标webview预加载触发条件，获取目标webview的预请求配置项。
S102：根据目标webview的预请求配置项，从网络侧预先获取目标webview的配置数据，并以预请求配置项为索引，将配置数据存储在Native端的数据缓存池中。
webview是指网页视图，可以内嵌在移动端，实现前端的混合式开发。其中，目标webview是指待预加载的webview，例如，可以是多webview H5的首屏webview，也可以是用户页面操作所针对的webview，也可以是H5端通过jsapi调用所针对的指定webview，后文会有具体例子进行详细说明。
本申请实施例中，针对多webview H5场景，提供多种触发预加载的时机和方式，例如，在路由阶段触发首屏webview预加载，在H5容器阶段进行首屏webview预加载、在H5容器阶段响应于用户页面操作(点击tab切换webview、顶部PageHeader(页面指示器)滑动或者切换，等)进行的webview预加载，以及，H5端调用jsapi进行指定webview预加载。
下面以多webview会场页面应用场景和具体实施示例，对本申请实施例提供的基于H5页面的数据预加载方法行示意性说明。
术语解释如下。
webview，指网页视图，可以内嵌在移动端，实现前端的混合式开发。
H5容器，是移动端基于webview的解决方案，提供了良好的外部扩展功能，拥有JSAPI(JavaScript API，JavaScript语言编程接口)定制、事件机制等能力。
PHA(改进Hybrid App)容器，是提升Hybrid体验的一种新框架，可认为是一种特定H5容器，PHA容器可实现多tab会场页面。
jsbridge，是为JavaScript提供调用Native功能的接口。
以外卖APP为例，在促销日或促销期间，往往要实现多tab会场页面，从而吸引用户。多tab会场页面中，在顶部或底部有导航的多个tab(页面标签)，如果采用普通H5容器，且每次点击tab都需要加载网络端页面数据，则之前打开过的tab也要重新创建和加载，体验不佳。因此，可利用PHA容器的优越性能，实现多tab会场。
参见图2，为本申请实施例提供的一种基于H5页面的数据预加载方法的框架示意图。图中示出了路由阶段、容器阶段(H5容器或PHA容器)、webview阶段，以及服务(service)阶段。本申请实施例提供的基于H5页面的数据预加载方法，可在webview阶段之前实现，例如是在路由阶段或容器阶段实现。
参见图3，为本申请实施例提供的一种基于H5页面的数据预加载方法示意图。
如前分析的，会场页面的首屏接口耗时较长，部分甚至达2s以上，为了缩短页面加载耗时，可对首屏webview进行预请求。首先，提前确定预请求配置，然后，在触发时机(路由阶段或容器阶段的首屏启动、响应于用户页面操作、H5端通过jsbridge调用指定webview时)，触发预请求操作，最后，Native端在预请求操作被触发时，根据预请求配置，从网络侧获取到目标webview(首屏webview或指定webview)的配置数据，完成数据预先加载，从而在后续webview阶段，直接读取本地数据缓存池中预先加载的配置数据，提供给H5端进行页面渲染，而无需使Native端在webview阶段现从网络侧请求配置数据，节省网络开销，提高页面加载效率，减少延迟，改善用户体验。
示例一：路由阶段触发预加载。
参见图4，为本申请实施例提供的一种基于H5页面的数据预加载方法示例一流程图，该示例一在路由阶段触发预加载，对已确定的首屏webview的页面数据进行预加载。
其中，H5端(也可称为前端)、Native端和后端，都是用开发语言编写的应用程序；配置平台是java等语言开发的平台。可以理解，Native端和H5端，可以理解为APP端，位于用户侧，后端和配置平台可以理解为服务器端，位于网络侧。例如：
H5端，是H5、js、css、图片等组成的html页，需要发布到网络侧。
Native端：开发语言为安卓或者iOS编写的应用程序。
后端：部署在网络侧，会返回给H5端或者native端所需的数据。
配置平台：提供开关及配置数据，部署在网络侧。
该示例一中，还具体描述了，Native端在路由阶段建立预请求配置项的预请求库，容器阶段进行URL加载，以及，在webview阶段基于预加载的配置数据实现页面渲染。下面具体说明。
S401：APP启动。
S402：预请求库初始化。
预请求库可以理解是一个数据库，位于Native端，用于存储预请求配置项。预请求配置项是指待预加载的目标webview的关键信息，例如，预请求配置项可以包括目标webviewurl对应的接口path、参数、header等信息。在Native端进行预请求库的初始化过程，从而确定可进行预加载的多个目标webview。
S403：向配置平台请求预请求配置项，以请求到的预请求配置项更新预请求库。
S404：以scheme形式触发多webview H5容器启动路由。
URLscheme是一种页面内跳转协议，通过定义scheme协议，可以非常方便跳转App中的各个页面。
APP可以向操作系统注册一个URL scheme，该scheme用于从浏览器或其他应用中启动本应用。通过指定的URL字段，可以使APP在被调起后直接打开某些特定页面，比如商品详情页、活动详情页等等；也可以执行某些指定动作，如完成支付等；也可以在应用内通过html页来直接调用显示APP内的某个页面。
综上，URL Scheme使用场景大致分以下几种：(1)服务器下发跳转路径，客户端根据服务器下发跳转路径跳转相应的页面；(2)H5页面点击锚点，根据锚点具体跳转路径跳转具体的页面；(3)APP端收到服务器端下发的PUSH通知栏消息，根据消息的点击跳转路径跳转相关页面；(4)APP根据URL跳转到另外一个APP指定页面。完整的URLscheme中包含有URL链接等信息。
S405：从scheme中解析出webview URL。
S406：根据解析出的webview URL在预请求库中进行匹配：若匹配成功，执行S407步骤，若匹配不成功，执行S408步骤。
S407：向后端请求获取首屏webview的配置数据，并存储到数据缓存池中。
根据S405解析出的webview URL在预请求库中匹配之后，根据匹配结果，从预请求库中调取出预请求配置项，以预请求配置项为索引，向后端发起数据预请求，并将请求到的配置数据存储在Native端的数据缓存池中。
在一种实现方式中，通过设置一个预请求记录管理模块，对数据缓存池的数据缓存记录进行管理，此种方式中，上述S407步骤的具体执行过程如下：
首先，根据解析出的预请求配置项进行网络请求之前，预请求记录管理模块查找数据缓存池，确定是否已针对该预请求配置项进行过数据缓存；然后，如果已经缓存过，则无需发起网络请求，如果没有缓存过，发起网络请求，将请求到的配置数据存入到数据缓存池中之后，在预请求记录管理模块中进行记录。
至此，预请求流程结束。可见，此例子中是在路由阶段触发预请求，具体的，此方式适用于多webview H5场景下预先确定好首屏webview的情形，在已确定首屏webview的情况下，从scheme中解析出webview URL即首屏URL，针对该webviewURL在预请求库中进行预请求配置项的匹配，若匹配成功，则启动网络请求，完成首屏webview配置数据的预加载。
下面的步骤涉及容器阶段和webview阶段，实现基于预加载进行页面渲染。
S408：多webviewH5容器启动。
S409：向后端发起请求，从配置参数库中请求获取首屏webview URL。
需要说明的是，该S409步骤中仅向后端请求获取首屏webview URL，而无需请求多webview的配置数据。
从网络侧预先获取目标webview的配置数据，并以所述预请求配置项为索引，将所述配置数据存储在所述Native端的数据缓存池中
S410：与H5端交互，进行首屏webview加载URL。
具体的，Native端通过webview加载H5端首屏主文档，H5端通过特定Nativejsbridge将接口path、参数、header等预请求配置项提供给Native端去拉取页面数据配置。
S411：以预请求配置项为索引在数据缓存池进行匹配，获取首屏webview配置数据。
在一种实现方式中，首先到预请求记录管理模块查找缓存记录，若，查找到记录且配置数据已成功存入数据缓冲池，则从数据缓存池中调取出预请求配置项对应的配置数据；若，查找到记录且配置数据正在请求中，还未成功存入数据缓冲池，则暂时进行等待，待预请求数据下载完成并成功存入之后，再从数据缓存池中调取出预请求配置项对应的配置数据；如果没有查找到记录，则向后端发起网络请求，从后端获取到配置数据。
S412：Native端将配置数据提供给H5端。
S413：H5端根据配置数据进行页面元素展示或相应资源下载。
其中，配置数据具体可以包括产品信息数据，根据配置数据再去下载js、css、图片等资源类文件。S414：完成首屏渲染。
示例二：容器启动阶段触发预加载。
参见图5，为本申请实施例提供的一种基于H5页面的数据预加载方法示例二流程图，该示例二在容器阶段触发预加载，对从多个webview中确定首屏webview并进行页面数据预加载。
该示例二与示例一不同之处在于触发预加载时机不同，对于相同步骤及说明可参见示例一。
S501：APP启动。
S502：预请求库初始化。
S503：向配置平台请求预请求配置项，以请求到的预请求配置项更新预请求库。
S504：多webviewH5容器启动。
S505：向后端发起请求，从配置参数库中获取解析出首屏webview URL。
向后端发起请求，从配置参数库中获取多webview容器中各webveiw所需的配置参数，例如，配置参数包括：webview url、title(标题)、tab icon(标签图标)、key(关键值)、tab title color(标签标题颜色)、page header(页面高度)等，并从中取出已打标为首屏webview的url。
S506：根据解析出首屏webview URL在预请求库中进行匹配：若匹配成功，执行S507步骤，若匹配不成功，执行S508步骤。
S507：向后端请求获取首屏webview的配置数据，并存储到数据缓存池中。
S508：初始化webview。
S509：与H5端交互，进行首屏webview加载URL。
S510：以预请求配置项为索引在数据缓存池进行匹配，获取首屏webview配置数据。在一种实现方式中，首先到预请求记录管理模块查找缓存记录，若，查找到记录且配置数据已成功存入数据缓冲池，则从数据缓存池中调取出预请求配置项对应的配置数据；若，查找到记录且配置数据正在请求中，还未成功存入数据缓冲池，则暂时进行等待，待预请求数据下载完成并成功存入之后，再从数据缓存池中调取出预请求配置项对应的配置数据；如果没有查找到记录，则向后端发起网络请求，从后端获取到配置数据。
S511：Native端将配置数据提供给H5端。
S512：H5端根据配置数据进行页面元素展示或相应资源下载。
S513：完成首屏渲染。
示例三：响应于用户页面操作而触发预加载。
参见图6，为本申请实施例提供的一种基于H5页面的数据预加载方法示例三流程图，该示例三响应于用户页面操作而触发预加载。
该示例三与示例一、示例二不同之处在于触发预加载时机不同，对于相同步骤及说明可参见示例一和示例二。
S601：Native端响应用户页面操作。
页面操作包括但不限于：页面滑动操作、页面标签点击操作，或，页面指示器点击或切换操作。
S602：解析页面操作对应的目标webview URL。
S603：根据解析出的目标webview URL在预请求库中进行匹配：若匹配成功，执行S604步骤，若匹配不成功，执行605步骤。
S604：向后端请求获取解析出的目标webview的配置数据，并存储到数据缓存池中。
S605：初始化目标webview。
S606：与H5端交互，进行目标webview加载URL。
S607：以预请求配置项为索引在数据缓存池进行匹配，获取目标webview的配置数据。
在一种实现方式中，首先到预请求记录管理模块查找缓存记录，若，查找到记录且配置数据已成功存入数据缓冲池，则从数据缓存池中调取出预请求配置项对应的配置数据；若，查找到记录且配置数据正在请求中，还未成功存入数据缓冲池，则暂时进行等待，待预请求数据下载完成并成功存入之后，再从数据缓存池中调取出预请求配置项对应的配置数据；如果没有查找到记录，则向后端发起网络请求，从后端获取到配置数据。
S608：Native端将配置数据提供给H5端。
S609：H5端根据配置数据进行页面元素展示或相应资源下载。
S610：完成页面渲染。
示例四：响应于H5端调用而触发预加载。
参见图7，为本申请实施例提供的一种基于H5页面的数据预加载方法示例四流程图，该示例四响应于H5端调用而触发预加载。
该示例四与示例一、示例二、示例四不同之处在于触发预加载时机不同，对于相同步骤及说明可参见示例一、示例二和示例三。
S701：H5端运行容器线程。
例如，启动H5容器的worker线程，该worker线程执行js脚本。通过容器线程，可得到webview相关数据。
S702：通过jsbridge，Native端从H5端获取目标webview URL。
jsbridge，是给JavaScript提供调用Native功能的接口。本示例中，Native端和H5端通过jsbridge进行通信。
S703：根据目标webview URL在预请求库中进行匹配：若匹配成功，执行S704步骤，若匹配不成功，不发起预请求。
S704：向后端请求获取解析出的目标webview的配置数据，并存储到数据缓存池中。
至此，完成数据预请求。
S705：H5端响应任意触发场景。
该任意触发场景，可以是用户页面操作场景或者页面自动跳转场景等。
S706：Native端与H5端交互，进行目标webview加载URL。
S707：以预请求配置项为索引在数据缓存池进行匹配，获取目标webview的配置数据。
在一种实现方式中，首先到预请求记录管理模块查找缓存记录，若，查找到记录且配置数据已成功存入数据缓冲池，则从数据缓存池中调取出预请求配置项对应的配置数据；若，查找到记录且配置数据正在请求中，还未成功存入数据缓冲池，则暂时进行等待，待预请求数据下载完成并成功存入之后，再从数据缓存池中调取出预请求配置项对应的配置数据；如果没有查找到记录，则向后端发起网络请求，从后端获取到配置数据。
S708：Native端将配置数据提供给H5端。
S709：H5端根据配置数据进行页面元素展示或相应资源下载。
S710：完成页面渲染。
另外，本申请实施例还提供一种基于数据预加载的H5页面实现方法，请参见图8，为该基于数据预加载的H5页面实现方法流程图。
S801：在加载目标webviewURL之前，Native端响应于目标webview预加载触发条件，获取目标webview的预请求配置项；根据目标webview的预请求配置项，从网络侧预先获取目标webview的配置数据，并述预请求配置项为索引，将配置数据存储在Native端的数据缓存池中。
S802：在加载目标webviewURL时，Native端在本地的数据缓存池中以预请求配置项为索引查找配置数据；若查找成功，则将查找到的目标webview的配置数据发送给H5端，使得H5端根据配置数据进行页面渲染。
其中，步骤S801包括以下任一种实现方式：
(1)Native端响应于以scheme形式对多webview H5容器进行的路由启动操作，从scheme中解析出目标webviewURL；根据目标webview URL在预请求库中进行匹配，得到目标webview的预请求配置项。
(2)Native端响应于多webview H5容器启动的操作，向网络侧请求从多webview所需加载所有配置数据中进行查找，确定出目标webviewURL；根据目标webview URL在预请求库中进行匹配，得到目标webview的预请求配置项。
(3)Native端响应于用户页面操作，获取页面操作对应的目标webviewURL；根据目标webviewURL在预请求库中进行匹配，得到目标webview的预请求配置项。
(4)Native端响应于H5端基于jsapi的预加载请求，获取到目标webviewURL；根据目标webview URL在预请求库中进行匹配，得到目标webview的预请求配置项。
另外，在Native端响应于目标webview预加载触发条件之前，还可以包括如下步骤：对预请求库进行初始化，确定可进行预加载的页面；以及，从网络侧获取可进行预加载页面的预请求配置项，以预请求配置项更新预请求库。
可见，本申请实施例提供的方法，针对会场页面等多webview场景下接口耗时较长的问题，为了缩短页面加载耗时，Native端在触发时机(路由阶段或容器阶段的首屏启动、响应于用户页面操作、H5端通过jsbridge调用指定webview时)，触发预请求操作，将请求的配置数据存储到Native端本地的数据缓存池中，从而在后续webview阶段，直接读取本地数据缓存池中预先加载的配置数据，提供给H5端进行页面渲染即可，而无需使Native端在webview阶段现从网络侧请求配置数据，节省网络开销，减少延迟，改善用户体验。
与上述基于H5页面的数据预加载方法相对应，本申请实施例还提供一种基于H5页面的数据预加载装置，用于基于多webview H5进行数据异步预加载，所述装置包括H5端和Native端，H5端与Native端基于通信协议进行双向通信，其中，所述Native端用于，在加载目标webviewURL之前，响应于目标webview预加载触发条件，获取所述目标webview的预请求配置项；以及，根据所述目标webview的预请求配置项，从网络侧预先获取目标webview的配置数据，并以所述预请求配置项为索引，将所述配置数据存储在所述Native端的数据缓存池中。
在一种实现方式中，所述Native端具体用于：响应于以scheme形式对多webviewH5容器进行的路由启动操作，从所述scheme中解析出所述目标webview URL；根据所述目标webview URL在预请求库中进行匹配，得到所述目标webview的预请求配置项。
在一种实现方式中，所述Native端具体用于：响应于多webview H5容器启动的操作，向网络侧请求从多webview所需加载所有配置数据中进行查找，确定出所述目标webviewURL；根据所述目标webview URL在预请求库中进行匹配，得到所述目标webview的预请求配置项。
在一种实现方式中，所述Native端具体用于：响应于用户页面操作，获取所述页面操作对应的目标webview URL；根据所述目标webview URL在预请求库中进行匹配，得到所述目标webview的预请求配置项。
在一种实现方式中，所述页面操作包括页面滑动操作、页面标签点击操作，或，页面指示器点击或切换操作。
在一种实现方式中，所述Native端响具体用于：响应于H5端基于jsapi的预加载请求，获取到目标webview URL；根据所述目标webview URL在预请求库中进行匹配，得到所述目标webview的预请求配置项。
在一种实现方式中，所述Native端还用于：对预请求库进行初始化，确定可进行预加载的多个目标webview；从网络侧获取可进行预加载的多个webview的预请求配置项，以所述预请求配置项更新所述预请求库。
在一种实现方式中，所述Native端还用于：启动对目标webview URL的加载；在本地的所述数据缓存池中以预请求配置项为索引查找配置数据；若查找成功，则将查找到的目标webview的配置数据发送给所述H5端，使得H5端根据配置数据进行页面渲染。
与上述基于数据预加载的H5页面实现方法相对应，本申请实施例还提供一种基于数据预加载的H5页面实现装置，用于基于数据异步预加载实现H5多webview，所述装置包括H5端和Native端，其中，所述Native端用于：在加载目标webviewURL时，在本地的数据缓存池中以预请求配置项为索引查找配置数据；若查找成功，则将查找到的目标webview的配置数据发送给所述H5端，使得H5端根据配置数据进行页面渲染。
在一种实现方式中，所述Native端还用于：响应于目标webview预加载触发条件，获取所述目标webview的预请求配置项；根据所述目标webview的预请求配置项，从网络侧预先获取目标webview的配置数据，并以所述预请求配置项为索引，将所述配置数据存储在所述Native端的数据缓存池中。
在一种实现方式中，所述Native端具体用于：响应于以scheme形式对多webviewH5容器进行的路由启动操作，从所述scheme中解析出所述目标webviewURL；根据所述目标webview URL在预请求库中进行匹配，得到所述目标webview的预请求配置项。
在一种实现方式中，所述Native端具体用于：响应于多webview H5容器启动的操作，向网络侧请求从多webview所需加载所有配置数据中进行查找，确定出所述目标webviewURL；根据所述目标webview URL在预请求库中进行匹配，得到所述目标webview的预请求配置项。
在一种实现方式中，所述Native端具体用于：响应于用户页面操作，获取所述页面操作对应的目标webviewURL；根据所述目标webviewURL在预请求库中进行匹配，得到所述目标webview的预请求配置项。
在一种实现方式中，所述页面操作包括页面滑动操作、页面标签点击操作，或，页面指示器点击或切换操作。
在一种实现方式中，所述Native端具体用于：响应于H5端基于jsapi的预加载请求，获取到目标webviewURL；根据所述目标webview URL在预请求库中进行匹配，得到所述目标webview的预请求配置项。
在一种实现方式中，所述Native端还用于：对预请求库进行初始化，确定可进行预加载的页面；从网络侧获取可进行预加载页面的预请求配置项，以所述预请求配置项更新所述预请求库。
本申请的实施例还提供了一种存储介质，该存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。
可选地，在本实施例中，上述存储介质可以被设置为存储用于执行以下步骤的计算机程序：
用于基于多webview H5进行数据异步预加载，其中，H5端与Native端基于通信协议进行双向通信，所述方法包括：在加载目标webviewURL之前：所述Native端响应于目标webview预加载触发条件，获取所述目标webview的预请求配置项；以及，根据所述目标webview的预请求配置项，从网络侧预先获取目标webview的配置数据，并以所述预请求配置项为索引，将所述配置数据存储在所述Native端的数据缓存池中。
或者，
基于数据预加载的H5页面实现方法，用于基于数据异步预加载实现H5多webview，其中，H5端与Native端基于通信协议进行双向通信，所述方法包括：在加载目标webviewURL时，所述Native端在本地的数据缓存池中以预请求配置项为索引查找配置数据；若查找成功，则将查找到的目标webview的配置数据发送给所述H5端，使得H5端根据配置数据进行页面渲染。
可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(Read-Only Memory，简称为ROM)、随机存取存储器(Random Access Memory，简称为RAM)、移动硬盘、磁碟或者光盘等各种可以存储计算机程序的介质。
本申请的实施例还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。
可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。
可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：
用于基于多webview H5进行数据异步预加载，其中，H5端与Native端基于通信协议进行双向通信，所述方法包括：在加载目标webviewURL之前：所述Native端响应于目标webview预加载触发条件，获取所述目标webview的预请求配置项；以及，根据所述目标webview的预请求配置项，从网络侧预先获取目标webview的配置数据，并以所述预请求配置项为索引，将所述配置数据存储在所述Native端的数据缓存池中。
或者，
基于数据预加载的H5页面实现方法，用于基于数据异步预加载实现H5多webview，其中，H5端与Native端基于通信协议进行双向通信，所述方法包括：在加载目标webviewURL时，所述Native端在本地的数据缓存池中以预请求配置项为索引查找配置数据；若查找成功，则将查找到的目标webview的配置数据发送给所述H5端，使得H5端根据配置数据进行页面渲染。
可选地，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。
上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。
Claims (10)
1.一种基于H5页面的数据预加载方法，其特征在于，用于基于多webviewH5进行数据异步预加载，其中，H5端与Native端基于通信协议进行双向通信，所述方法包括：
在加载目标webviewURL之前：
所述Native端响应于目标webview预加载触发条件，获取所述目标webview的预请求配置项；以及，
根据所述目标webview的预请求配置项，从网络侧预先获取目标webview的配置数据，并以所述预请求配置项为索引，将所述配置数据存储在所述Native端的数据缓存池中。
2.根据权利要求1所述的方法，其特征在于，所述Native端响应于目标webview预加载触发条件，获取所述目标webview的预请求配置项，包括：
所述Native端响应于以scheme形式对多webview H5容器进行的路由启动操作，从所述scheme中解析出所述目标webviewURL；
根据所述目标webviewURL在预请求库中进行匹配，得到所述目标webview的预请求配置项。
3.根据权利要求1所述的方法，其特征在于，所述Native端响应于目标webview预加载触发条件，获取所述目标webview的预请求配置项，包括：
所述Native端响应于多webviewH5容器启动的操作，向网络侧请求从多webview所需加载所有配置数据中进行查找，确定出所述目标webviewURL；
根据所述目标webviewURL在预请求库中进行匹配，得到所述目标webview的预请求配置项。
4.根据权利要求1所述的方法，其特征在于，所述Native端响应于目标webview预加载触发条件，获取所述目标webview的预请求配置项，包括：
所述Native端响应于用户页面操作，获取所述页面操作对应的目标webviewURL；
根据所述目标webviewURL在预请求库中进行匹配，得到所述目标webview的预请求配置项。
5.根据权利要求4所述的方法，其特征在于，所述页面操作包括页面滑动操作、页面标签点击操作，或，页面指示器点击或切换操作。
6.一种基于数据预加载的H5页面实现方法，其特征在于，用于基于数据异步预加载实现H5多webview，其中，H5端与Native端基于通信协议进行双向通信，所述方法包括：
在加载目标webviewURL时，所述Native端在本地的数据缓存池中以预请求配置项为索引查找配置数据；
若查找成功，则将查找到的目标webview的配置数据发送给所述H5端，使得H5端根据配置数据进行页面渲染。
7.一种基于H5页面的数据预加载装置，其特征在于，用于基于多webview H5进行数据异步预加载，所述装置包括H5端和Native端，H5端与Native端基于通信协议进行双向通信，其中，所述Native端用于，在加载目标webviewURL之前，响应于目标webview预加载触发条件，获取所述目标webview的预请求配置项；以及，根据所述目标webview的预请求配置项，从网络侧预先获取目标webview的配置数据，并以所述预请求配置项为索引，将所述配置数据存储在所述Native端的数据缓存池中。
8.一种基于数据预加载的H5页面实现装置，其特征在于，用于基于数据异步预加载实现H5多webview，所述装置包括H5端和Native端，其中，所述Native端用于：在加载目标webviewURL时，在本地的数据缓存池中以预请求配置项为索引查找配置数据；若查找成功，则将查找到的目标webview的配置数据发送给所述H5端，使得H5端根据配置数据进行页面渲染。
9.一种存储介质，其特征在于，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行权利要求1至6任一项中所述的方法。
10.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行权利要求1至6任一项中所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210096740.4A CN114428930A (zh) | 2022-01-26 | 2022-01-26 | 基于h5页面的数据预加载方法、装置及电子设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210096740.4A CN114428930A (zh) | 2022-01-26 | 2022-01-26 | 基于h5页面的数据预加载方法、装置及电子设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114428930A true CN114428930A (zh) | 2022-05-03 |
Family
ID=81312600
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210096740.4A Pending CN114428930A (zh) | 2022-01-26 | 2022-01-26 | 基于h5页面的数据预加载方法、装置及电子设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114428930A (zh) |
-
2022
- 2022-01-26 CN CN202210096740.4A patent/CN114428930A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11907642B2 (en) | Enhanced links in curation and collaboration applications | |
| CN107622135B (zh) | 用于显示信息的方法和装置 | |
| US10083019B2 (en) | Providing application functionality for uninstalled applications | |
| US20190251143A1 (en) | Web page rendering method and related device | |
| US10911565B2 (en) | Method, device and system for associating a service account | |
| JP2019520624A (ja) | ページコンポーネント動的レイアウト | |
| US20170371974A1 (en) | Method for loading webpage, client and programmable device | |
| US7774788B2 (en) | Selectively updating web pages on a mobile client | |
| CN112115396B (zh) | 网页页面渲染方法、装置、设备及存储介质 | |
| CN107291759B (zh) | 浏览器页面资源的处理方法和装置 | |
| US20170192941A1 (en) | Computer-Automated Generation of Application Deep Links | |
| US11893374B2 (en) | Low latency dynamic content management | |
| CN113382083B (zh) | 一种网页截图方法和装置 | |
| CN112256772A (zh) | 数据服务方法、装置以及可读存储介质 | |
| CN111294395A (zh) | 一种终端页面传输方法、装置、介质和电子设备 | |
| CN110647327A (zh) | 基于卡片的用户界面动态控制的方法和装置 | |
| CN112417336B (zh) | 页面显示方法、装置、电子设备及存储介质 | |
| KR101659147B1 (ko) | 정보 처리 장치, 및 그의 제어 방법 | |
| CN109428872B (zh) | 数据传输方法、设备、服务器及启动方法、系统 | |
| US20080297521A1 (en) | System and method for providing skins for a web page | |
| CN110134451B (zh) | 数据显示方法和装置、存储介质及电子装置 | |
| CN116304403A (zh) | 网页访问方法、装置、计算机设备及存储介质 | |
| CN108572985B (zh) | 一种页面显示方法及装置 | |
| CN114428930A (zh) | 基于h5页面的数据预加载方法、装置及电子设备 | |
| CN114528510A (zh) | 网页数据处理的方法、装置、电子设备及介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |