一种页面加载方法、装置、设备及可读存储介质与流程

1.本发明涉及软件技术领域，特别是涉及一种页面加载方法、装置、设备及可读存储介质。


背景技术：

2.移动互联网时代，app(应用程序)成为移动端流量入口，app内的业务为了快速迭代以及android/ios双端复用等，通常采用app内借助浏览器组件(app内加载h5页面需要一个组件，完成h5的样式解析与渲染、逻辑解析与执行，本发明中称为浏览器组件)来加载html5业务页面(html5为构建web内容的一种语言描述方式，html5业务页面指用html5、css等描述的页面，以下简称为h5页面)。
3.而app内打开一个h5页面，要经历白屏、加载、页面整体框架呈现、数据/图片填充等主要过程的漫长等待，若点击返回到前一个页面，又需要重新经历上述等待，页面性能和用户操作体验较差，业务转化率受影响。
4.为解决这一问题，传统方法中通常采用离线缓存的方案，即把h5的资源打包后提前下发到app中，当浏览器组件发起请求时，拦截请求并尝试从本地获取，如果获取成功，直接加载到界面，由此可以节省网络获取的时间。但是，由于用户要加载的h5页面是灵活多变的，在有限的存储空间下只能实现指定页面的指定资源的离线缓存，面对灵活的用户需求，命中率与占用的资源成正比，这会占用大量本地资源；同时离线缓存的资源存在被篡改的风险，会影响业务的安全性；而且由于资源的灵活更新，离线下载的资源和实际的在线资源可能不匹配，从而导致线上运行的稳定性问题；同时还会带来较高的离线资源维护成本以及兼容性问题。
5.综上所述，如何整体提升app内h5页面性能体验，提升业务转化率，是目前本领域技术人员急需解决的技术问题。


技术实现要素：

6.本发明的目的是提供一种页面加载方法、装置、设备及可读存储介质，以整体提升app内h5页面性能体验，提升业务转化率。
7.为解决上述技术问题，本发明提供如下技术方案：
8.一种页面加载方法，包括：
9.检测到app启动后，创建浏览器组件实例；
10.提取所述app内的用户操作信息，并将所述用户操作信息输入至智能预测服务器进行下一级浏览页面预测，获取预测页面；
11.调用所述浏览器组件实例对所述预测页面进行后台加载，并将加载的所述预测页面添加至预加载浏览器组件池；
12.获取到页面加载请求后，判断所述预加载浏览器组件池中是否存在所述页面加载请求的目标页面；
13.若存在，从所述预加载浏览器组件池中提取出预加载的所述目标页面，并进行输出设置。
14.可选地，在所述检测到app启动后，还包括：
15.收集框架运行信息；
16.将所述框架运行信息输入至配置生成模型中进行配置参数设置，生成配置参数；其中，所述配置参数包括：所述浏览器组件实例的创建个数、预加载个数中至少一种；
17.则相应地，所述创建浏览器组件实例，包括：创建与所述创建个数对应的浏览器组件实例；
18.所述将所述用户操作信息输入至智能预测服务器进行下一级浏览页面预测，获取预测页面，包括：将所述用户操作信息输入至智能预测服务器进行下一级浏览页面预测，生成预测页面列表；从所述预测页面列表中提取出与所述预加载个数对应的高浏览概率页面，作为所述预测页面。
19.可选地，所述配置参数还包括：预加载页面保存时间；则所述将所述框架运行信息输入至配置生成模型中进行配置参数设置，包括：将所述框架运行信息输入至配置生成模型中进行预加载页面保存时间的设置；
20.则相应地，还包括：若第一页面在所述预加载浏览器组件池中的存放时间超过所述预加载页面保存时间，从所述预加载浏览器组件池中销毁所述第一页面。
21.可选地，在所述调用所述浏览器组件实例对所述预测页面进行后台加载之前，还包括：
22.判断所述预加载浏览器组件池的剩余存储量是否低于下限阈值；
23.若是，按照剩余有效时间由短到长的顺序，依次销毁所述预加载浏览器组件池中的各预加载页面，直至所述剩余存储量不低于所述下限阈值。
24.可选地，在所述创建浏览器组件实例之后，还包括：加载空浏览页面。
25.可选地，在所述判断所述预加载浏览器组件池中是否存在所述页面加载请求的目标页面之后，还包括：
26.若所述预加载浏览器组件池中不存在所述页面加载请求的目标页面，加载所述目标页面；
27.提取所述目标文件的加载文件；
28.将所述加载文件添加至所述预加载浏览器组件池中。
29.一种页面加载装置，包括：
30.实例预创建单元，用于检测到app启动后，创建浏览器组件实例；
31.页面预测单元，用于提取所述app内的用户操作信息，并将所述用户操作信息输入至智能预测服务器进行下一级浏览页面预测，获取预测页面；
32.预加载单元，用于调用所述浏览器组件实例对所述预测页面进行后台加载，并将加载的所述预测页面添加至预加载浏览器组件池；
33.请求处理单元，用于获取到页面加载请求后，判断所述预加载浏览器组件池中是否存在所述页面加载请求的目标页面；若存在，触发输出单元；
34.所述输出单元，用于从所述预加载浏览器组件池中提取出预加载的所述目标页面，并进行输出设置。
35.可选地，所述的页面加载装置还包括：参数智能配置单元；
36.所述参数智能配置单元，用于在所述检测到app启动后，收集框架运行信息；将所述框架运行信息输入至配置生成模型中进行配置参数设置，生成配置参数；其中，所述配置参数包括：所述浏览器组件实例的创建个数、预加载个数中至少一种；
37.则相应地，所述实例预创建单元用于：检测到app启动后，创建与所述创建个数对应的浏览器组件实例；
38.所述页面预测单元用于：提取所述app内的用户操作信息，并将所述用户操作信息输入至智能预测服务器进行下一级浏览页面预测，生成预测页面列表；从所述预测页面列表中提取出与所述预加载个数对应的高浏览概率页面，作为所述预测页面。
39.一种计算机设备，包括：
40.存储器，用于存储计算机程序；
41.处理器，用于执行所述计算机程序时实现上述页面加载方法的步骤。
42.一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述页面加载方法的步骤。
43.本发明实施例所提供的方法，在app启动后对预测的下一级浏览页面进行预加载，则在接收到用户的页面加载请求后，若已加载页面中包括该请求的目标页面，即可直接调用已经加载的目标页面直接进行输出设置，以呈现给用户，而无需经历接收到请求后的初始化、资源下载解析及执行等加载步骤，从而实现了app内h5页面的输出提速；同时该方法还引入了智能预加载服务，可以根据用户在app内的操作信息进行下一级预览页面的预估，选择高概率页面进行预加载，把有限的资源预加载点击概率大的页面，因此可以平衡预加载命中率与资源占用间的矛盾，在有限的内存和流量情况下，最大限度提升预加载命中率，提升用户体验。
44.相应地，本发明实施例还提供了与上述页面加载方法相对应的页面加载装置、设备和可读存储介质，具有上述技术效果，在此不再赘述。
附图说明
45.为了更清楚地说明本发明实施例或相关技术中的技术方案，下面将对实施例或相关技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
46.图1为一种h5页面加载交互示意图；
47.图2为本发明实施例中一种页面加载方法的实施流程图；
48.图3为本发明实施例中一种智能预加载示意图；
49.图4为本发明实施例中一种app端内预加载示意图；
50.图5为本发明实施例中一种配置参数智能生成示意图；
51.图6为本发明实施例中一种页面加载装置的结构示意图；
52.图7为本发明实施例中一种计算机设备的结构示意图。
具体实施方式
53.本发明的核心是提供一种页面加载方法，整体提升app内h5页面性能体验，提升业务转化率。
54.为了使本技术领域的人员更好地理解本发明方案，下面结合附图和具体实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
55.如图1所示，app内当需要打开h5页面时，需要创建浏览器组件，通过浏览器组件完成加载页面、执行页面脚本、接收后端数据、渲染和绘制到屏幕的过程，用户需经历无反馈等待、白屏等过程；跳转到下一页面同样经历上述等待，再返回到前一页面，依然经历较长等待，跳转流畅度差，从而降低了app内加载h5页面的整体体验，而据统计发现如果页面加载耗时超过3s，那么有53％的用户会选择直接退出该页面了。
56.针对于此，本发明的目的在于：保证app内首次打开h5页面时能够快速呈现、用户在浏览多个h5页面时前进后退交互流畅。
57.请参考图2，图2为本发明实施例中一种页面加载方法的流程图，该方法可以整体提升app内h5页面性能体验，提升业务转化率，该方法具体包括以下步骤：
58.s101、检测到app启动后，创建浏览器组件实例；
59.app启动时(此时用户并未打开app内的h5页面)，后台静默创建n个浏览器组件实例，以完成浏览器组件实例的初始化，预先创建浏览器组件实例之后，后续如果需要打开某个浏览器页面，就可以直接调用预先生成的浏览器组件实例，无需再实时创建，从而提升了h5页面加载速度。而创建的浏览器组件实例可以由浏览器组件池完成对这些实例的管理，包括浏览器组件的创建、预热、销毁、回收和复用等，以便于统一管理。
60.在创建浏览器组件实例之后，还可以进一步通过加载空h5页面将创建的浏览器组件实例预热，方便在使用时快速展示新页面，缩短白屏等待时间，当然，也可以不进行空h5页面的加载，在此不做限定。
61.s102、提取app内的用户操作信息，并将用户操作信息输入至智能预测服务器进行下一级浏览页面预测，获取预测页面；
62.理想状态下，预创建的浏览器组件实例足够多，预加载浏览器组件池足够大，才能在用户前台h5页面浏览过程中，跳转到任意页面，都能从预加载浏览器池中命中并直接推到前台，用户享受页面直出的提速体验。但是实际上，预加载过多h5页面，不但内存占用增加，还会耗费用户流量，也会给业务后端服务器造成较大压力，而用户期望打开的h5页面却因为各种原因未被预加载。
63.针对于此，本方法中提出：进入app内页面，上报用户标识、设备情况、眼球浏览区域、屏幕中间区域等用户操作信息到智能预测服务器，智能预测服务器把这些参数作为入参，智能预测下一级页面列表，以实现智能预加载。
64.本方法提出的智能预加载如图3所示，重点针对特定用户在特定场景下预加载哪些h5页面的问题，结合业务场景，模型服务通过收集用户业务相关的用户画像，结合历史用户浏览数据，如是否点击、浏览路径、停留时长等离线用户行为数据库，可以采用ctr(click-through-rate，页面点击率，它是互联网广告中最基本的概念，广告系统中为了保
障广告收益，需要对广告入口进行ctr预测，点击概率高的优先展示)经典算法进行建模，提供预测服务api(application program interface，应用程序接口)；当然除了上述常规的用户行为数据，在适宜的情况下，还可收集用户的浏览页面时眼球停留、屏幕中间区域等其他个性化信息，使得预测模型更加准确。当处于特定业务状态的特定用户浏览到特定页面时，预测服务会下发下一级h5页面点击概率排序列表，按照剩余资源选择前n(如2个、5个)进行预加载，提升页面加载命中率，从而可以用较少的资源占用同时获取最好的用户体验。
65.s103、调用浏览器组件实例对预测页面进行后台加载，并将加载的预测页面添加至预加载浏览器组件池；
66.从浏览器组件池(即第一个步骤创建的n个浏览器组件实例的存储池)取出预创建的浏览器组件实例并在后台加载(如urla渲染出htmla)，并将他们存放到预加载浏览器组件池，预加载浏览器组件池管理所有后台预先加载了h5页面的浏览器组件，并对他们进行有效期管理、命中匹配检测等。将进行后台加载后的预测页面添加至预加载浏览器组件池，可以方便在命中时推到前台。其中，调用浏览器组件实例对预测页面进行后台加载的实现方式可以参照相关技术的介绍，在此不做限定。
67.s104、获取到页面加载请求后，判断预加载浏览器组件池中是否存在页面加载请求的目标页面；
68.如图4所示为一种app端内预加载示意图，用户想在浏览器中打开一个url，即发起页面加载请求时，通过点击h5入口打开url展示页面，此时首先检查预加载浏览器组件池中是否已经有请求对应的预加载浏览器组件，如果有，则认为命中，则执行步骤s105直接从预加载浏览器组件池中提取出预加载的目标页面的步骤，从而实现页面打开提速。
69.而若预加载浏览器组件池中不存在页面加载请求的目标页面，可以直接按照传统方法进行目标页面的实时加载输出，以展示给用户，在加载完成后，还可以进一步将其对应的加载文件添加至预加载浏览器组件池中，以便后续页面浏览中的直接调用该加载文件，实现提速。需要说明的是，对于预加载浏览器组件池中不存在页面加载请求的目标页面的情况下的处理方式，本实施例中不做限定，可以根据实际情况进行设置，在此不再赘述。
70.s105、从预加载浏览器组件池中提取出预加载的目标页面，并进行输出设置。
71.若预加载浏览器组件池中存在页面加载请求的目标页面，则直接将该目标页面对应的已加载浏览器组件设置成用户可见，将h5页面的浏览器组件呈现在页面上，实现目标页面直出。而当用户跳转不同的h5页面，用户连续打开了html切换到html5后，点击返回，实际是不同浏览器组件在界面上的替换，框架会替换前一个浏览器组件，无需等待也无需重新加载，体验如同原生页面间切换一样，可参考图4中页面直出步骤，因此该方法同时还解决了用户返回时的提速问题。
72.基于上述介绍，本发明实施例所提供的技术方案，在app启动后对预测的下一级浏览页面进行预加载，则在接收到用户的页面加载请求后，若已加载页面中包括该请求的目标页面，即可直接调用已经加载的目标页面直接进行输出设置，以呈现给用户，而无需经历接收到请求后的初始化、资源下载解析及执行等加载步骤，从而实现了app内h5页面的输出提速；同时该方法还引入了智能预加载服务，可以根据用户在app内的操作信息进行下一级预览页面的预估，选择高概率页面进行预加载，把有限的资源预加载点击概率大的页面，因此可以平衡预加载命中率与资源占用间的矛盾，在有限的内存和流量情况下，最大限度提
升预加载命中率，提升用户体验。
73.需要说明的是，基于上述实施例，本发明实施例还提供了相应的改进方案。在优选/改进实施例中涉及与上述实施例中相同步骤或相应步骤之间可相互参考，相应的有益效果也可相互参照，在本文的优选/改进实施例中不再一一赘述。
74.浏览器组件个数、预加载个数等参数的设定，依赖当前用户手机内存空间、应用内内存占用、用户浏览记录等情况，如果参数设定过大，则造成资源浪费以及内存浪费；如果参数设定过小，则命中率偏低，体验提升不明显。比如浏览器组件创建就会消耗一定内存，浏览器组建创建过多，则造成app内存不足，影响正常业务功能。
75.针对于此，本发明中进一步提出反馈参数和控制参数，借助pid闭环控制器思想，实现参数自动化、智能化、动态化的控制能力，实现资源的充分利用保障用户体验的最大化提升。
76.则在检测到app启动后，可以进一步执行以下步骤：
77.s106、收集框架运行信息；
78.框架运行信息的收集可以包含框架运行时的正常异常等数据，包括但不限于内存溢出、无可用webview、webview过期等异常信息收集以及预加载运行过程中的逻辑埋点收集，本实施例中仅以上述信息类型为例进行介绍，信息类型可以根据实际使用需要进行相应的增添，在此不做限定。
79.s107、将框架运行信息输入至配置生成模型中进行配置参数设置，生成配置参数；
80.如图5所示为一种配置参数智能生成示意图，通过配置生成模型对输出参数进行处理，处理完成后生成配置参数，影响预加载框架的配置参数，再把收集到的信息通过大数据计算后作为参数输入到配置生成模型形成控制闭环；从而达成配置参数的自动化、智能化控制。其中，生成的配置参数可以包含浏览器组件个数、预加载个数等参数，但不限于此，在此不做限定。
81.则相应地，步骤s101创建浏览器组件实例，包括：创建与创建个数对应的浏览器组件实例。
82.app启动时，后台静默创建与创建个数对应的浏览器组件实例，完成浏览器组件实例的初始化。
83.则相应地，步骤s102将用户操作信息输入至智能预测服务器进行下一级浏览页面预测，获取预测页面，包括：将用户操作信息输入至智能预测服务器进行下一级浏览页面预测，生成预测页面列表；从预测页面列表中提取出与预加载个数对应的高浏览概率页面，作为预测页面。
84.框架可根据从智能预测服务端获取到的下一级页面列表触发预加载，如目前后端下发的最大预加载个数m，则从下一级页面列表中取top m个url。
85.本实施例提供的方法，通过后端动态下发浏览器组件池大小、预加载页面的上限等控制参数，并且手机端命中次数、浏览器组件剩余个数以及预加载页面个数等框架运行信息也及时上报，作为反馈信息给到后端，后端利用该多维度参数，可以引入在生产制造业广泛使用的过程控制pid算法(在过程控制中，按偏差的比例(p)、积分(i)和微分(d)进行控制的pid控制器(亦称pid调节器)是应用最为广泛的一种自动控制器。它具有原理简单，易于实现，适用面广，控制参数相互独立，参数的选定比较简单等优点)，动态、实时、自动化的
优化配置参数即智能调参服务，实现用户内存和流量的高效利用。
86.需要说明的是，本实施例中仅以配置参数为浏览器组件实例的创建个数以及预加载个数为例进行介绍，当然，也可以进一步进行其他参数的智能化配置，比如配置参数中可以进一步包括：预加载页面保存时间；则将框架运行信息输入至配置生成模型中进行配置参数设置，包括：将框架运行信息输入至配置生成模型中进行预加载页面保存时间的设置。则相应地，在上述执行步骤之外，还包括：若第一页面在预加载浏览器组件池中的存放时间超过预加载页面保存时间，从预加载浏览器组件池中销毁第一页面。
87.当预加载的h5页面在预加载浏览器组件池存放超过预加载页面保存时间(maxtime)后自动销毁，防止过期页面被命中，也可以及时腾出空间，保证新页面的顺利预加载存储。
88.其他配置参数均可参照本实施例的介绍，在此不再赘述。
89.基于上述实施例，已经预加载的h5页面需要保存一定时间等待命中，预加载页面的保存时长、资源不足时的释放策略决定了预加载浏览器组件池的利用率。
90.因此，为进一步保障预加载浏览器组件池中加载组件的快速流转，提升命中率，在步骤s103执行调用浏览器组件实例对预测页面进行后台加载之前，可以进一步执行以下步骤：
91.s108、判断预加载浏览器组件池的剩余存储量是否低于下限阈值；
92.若预加载浏览器组件池的剩余存储量低于下限阈值，执行步骤s109；若预加载浏览器组件池的剩余存储量不低于下限阈值，可以无操作，继续当前的页面加载流程，对该种情况下的处理方式本实施例中不做限定，可以根据实际使用需要进行设定，在此不再赘述。
93.s109、按照剩余有效时间由短到长的顺序，依次销毁预加载浏览器组件池中的各预加载页面，直至剩余存储量不低于下限阈值。
94.当有新的预加载需求时，如果预加载浏览器组件池的剩余存储量低于下限阈值，即预加载浏览器组件池达到上限，可以释放老的h5页面来加载新的h5页面，具体可以按照剩余有效时间排序，优先将剩余最短时间的预加载页面清空，这样既可以解决用户打开下一个页面时如何智能提速的问题，同时又可以控制资源占用。
95.相应于上面的方法实施例，本发明实施例还提供了一种页面加载装置，下文描述的页面加载装置与上文描述的页面加载方法可相互对应参照。
96.参见图6所示，该装置包括以下模块：
97.实例预创建单元110主要用于检测到app启动后，创建浏览器组件实例；
98.页面预测单元120主要用于提取app内的用户操作信息，并将用户操作信息输入至智能预测服务器进行下一级浏览页面预测，获取预测页面；
99.预加载单元130主要用于调用浏览器组件实例对预测页面进行后台加载，并将加载的预测页面添加至预加载浏览器组件池；
100.请求处理单元140主要用于获取到页面加载请求后，判断预加载浏览器组件池中是否存在页面加载请求的目标页面；若存在，触发输出单元150；
101.输出单元150主要用于从预加载浏览器组件池中提取出预加载的目标页面，并进行输出设置。
102.在本发明的一种具体实施方式中，页面加载装置中可以进一步包括：参数智能配
置单元。
103.其中，参数智能配置单元，用于在检测到app启动后，收集框架运行信息；将框架运行信息输入至配置生成模型中进行配置参数设置，生成配置参数；其中，配置参数包括：浏览器组件实例的创建个数、预加载个数中至少一种；
104.则相应地，实例预创建单元用于：检测到app启动后，创建与创建个数对应的浏览器组件实例；
105.页面预测单元用于：提取app内的用户操作信息，并将用户操作信息输入至智能预测服务器进行下一级浏览页面预测，生成预测页面列表；从预测页面列表中提取出与预加载个数对应的高浏览概率页面，作为预测页面。
106.相应于上面的方法实施例，本发明实施例还提供了一种计算机设备，下文描述的一种计算机设备与上文描述的一种页面加载方法可相互对应参照。
107.该计算机设备包括：
108.存储器，用于存储计算机程序；
109.处理器，用于执行计算机程序时实现上述方法实施例的页面加载方法的步骤。
110.具体的，请参考图7，为本实施例提供的一种计算机设备的具体结构示意图，该计算机设备可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processing units，cpu)322(例如，一个或一个以上处理器)和存储器332，存储器332存储有一个或一个以上的计算机应用程序342或数据344。其中，存储器332可以是短暂存储或持久存储。存储在存储器332的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对数据处理设备中的一系列指令操作。更进一步地，中央处理器322可以设置为与存储器332通信，在计算机设备301上执行存储器332中的一系列指令操作。
111.计算机设备301还可以包括一个或一个以上电源326，一个或一个以上有线或无线网络接口350，一个或一个以上输入输出接口358，和/或，一个或一个以上操作系统341。
112.上文所描述的页面加载方法中的步骤可以由计算机设备的结构实现。
113.相应于上面的方法实施例，本发明实施例还提供了一种可读存储介质，下文描述的一种可读存储介质与上文描述的一种页面加载方法可相互对应参照。
114.一种可读存储介质，可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现上述方法实施例的页面加载方法的步骤。
115.该可读存储介质具体可以为u盘、移动硬盘、只读存储器(read-only memory，rom)、随机存取存储器(random access memory，ram)、磁碟或者光盘等各种可存储程序代码的可读存储介质。
116.本领域技术人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。本领域技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。