CN111158799A - 一种页面渲染方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请公开了一种页面渲染方法、装置、电子设备及存储介质，涉及计算机视觉领域。具体实现方案为：当宿主应用程序中的附属应用程序处于预取生命周期时，将附属应用程序在当前时刻的环境描述信息传入至目标函数；当环境描述信息满足预下载条件时，通过目标函数预下载附属应用程序的业务数据和显示框架；当附属应用程序满足触发条件时，根据附属应用程序的业务数据和显示框架，渲染生成附属应用程序的显示页面。本申请实施例可以有效地缩短页面渲染时间，提高页面渲染速度，从而可以达到用户点击页面后即可立刻展现的闪开效果。

Description

一种页面渲染方法、装置、电子设备及存储介质

技术领域

本申请涉及图像处理技术领域，进一步涉及计算机视觉技术，尤其是一种页面渲染方法、装置、电子设备及存储介质。

背景技术

小程序本身依托在大型的应用程序中。应用程序启动小程序的方法包括：应用程序接收用户发送的当前小程序对应的启动指令；响应于当前小程序对应的启动指令启动当前小程序。

在现有的页面渲染方法中，虽然可以在小程序未启动前对小程序的业务数据进行预取，但是在预取小程序的业务数据之后，还需要对业务数据进行处理，才能实现对用户的真实可见。即：先对小程序的业务数据进行预取，当用户点击小程序页面时，下载页面显示框架，然后根据小程序的业务数据和显示框架，渲染生成小程序的显示页面。而依赖于页面的复杂程度，许多情况下页面的渲染过程也较为耗时，对于运营活动如红包，商业场景投放如电商类的页面，这类场景对真实的渲染上屏速度有较大依赖。针对性能尤为敏感的场景，现有的页面渲染方法无法达到用户点击后页面即可立刻展现的闪开效果。

发明内容

有鉴于此，本申请提出实施例提供一种页面渲染方法、装置、电子设备及存储介质，可以有效地缩短页面渲染时间，提高页面渲染速度，从而可以达到用户点击页面后即可立刻展现的闪开效果。

第一方面，本申请实施例提供了一种页面渲染方法，所述方法包括：

当检测出宿主应用程序中的附属应用程序处于预取生命周期时，将所述附属应用程序在当前时刻的环境描述信息传入至所述附属应用程序的目标函数；

当所述环境描述信息满足预下载条件时，通过所述目标函数预下载所述附属应用程序的业务数据；并通过所述目标函数预下载所述附属应用程序的显示框架；

当检测出所述附属应用程序满足触发条件时，根据所述附属应用程序的业务数据和显示框架，渲染生成所述附属应用程序的显示页面。

上述实施例具有如下优点或有益效果：本申请中的附属应用程序在未满足触发条件之前，可以提前通过目标函数预下载显示框架，这样当附属应用程序满足触发条件时，可以即刻根据预下载的业务数据和显示框架渲染生成附属应用程序的显示页面，而无需在检测出附属应用程序满足触发条件的时刻再下载显示框架，从而达到缩短页面渲染时间和提高页面渲染速度的目的。而在现有的页面渲染方法中，先对小程序的业务数据进行预取，当用户点击小程序页面时，下载页面显示框架，然后根据小程序的业务数据和显示框架，渲染生成小程序的显示页面。因为本申请采用预下载显示框架的技术手段，解决了现有技术中页面渲染耗时长的技术问题，进而达到了缩短页面渲染时间和提高页面渲染速度的技术效果。

在上述实施例中，所述当所述环境描述信息满足预下载条件时，通过所述目标函数预下载所述附属应用程序的业务数据，包括：

当所述环境描述信息满足预下载条件时，通过所述目标函数调用所述附属应用程序的业务数据的预取函数；其中，所述环境描述信息包括下述至少一项：所述附属应用程序的当前展现状态、所述附属应用程序的入口信息以及所述附属应用程序的待展示页面的页面描述信息；

通过所述附属应用程序的业务数据的预取函数，预下载所述附属应用程序的业务数据。

上述实施例具有如下优点或有益效果：上述实施例通过目标函数调用业务数据的预取函数，再通过业务数据的预取函数预下载附属应用程序的业务数据。上述实施例可以在附属应用程序未开启或者开启时刻等相对较早阶段对业务数据进行预取，从而可以达到用户点击页面后即可立刻展现的闪开效果。

在上述实施例中，所述通过所述目标函数预下载所述附属应用程序的显示框架，包括：

通过所述目标函数创建所述附属应用程序的显示框架的页面容器；并通过所述目标函数获取所述附属应用程序的显示框架的页面路径；

按照所述附属应用程序的显示框架的页面路径，通过所述附属应用程序的显示框架的页面容器，预下载所述附属应用程序的显示框架。

上述实施例具有如下优点或有益效果：上述实施例通过目标函数创建页面容器，再通过页面容器预下载附属应用程序的显示框架。这样附属应用程序在未满足触发条件之前，可以提前通过目标函数预下载显示框架，这样当附属应用程序满足触发条件时，可以即刻根据预下载的业务数据和显示框架渲染生成附属应用程序的显示页面，而无需在检测出附属应用程序满足触发条件的时刻再下载显示框架，从而达到缩短页面渲染时间和提高页面渲染速度的目的。

在上述实施例中，所述根据所述附属应用程序的业务数据和显示框架，渲染生成所述附属应用程序的显示页面，包括：

通过所述附属应用程序的业务数据调用渲染逻辑的应用程序接口驱动所述渲染逻辑；

通过所述渲染逻辑将附属应用程序的业务数据渲染为超文本标记语言的文本格式的业务数据；

通过所述附属应用程序的显示框架的页面容器，将所述超文本标记语言的文本格式的业务数据添加至所述附属应用程序的显示框架中。

上述实施例具有如下优点或有益效果：上述实施例可以通过渲染逻辑先将附属应用程序的业务数据渲染为超文本标记语言的文本格式的业务数据，这样可以提高页面渲染速度，降低页面渲染复杂度，而且还可以节省存储空间，简化渲染过程。

在上述实施例中，在所述根据所述附属应用程序的业务数据和显示框架，渲染生成所述附属应用程序的显示页面之前，所述方法还包括：

获取显示页面的统一资源定位符URL；

根据所述显示页面的URL和预先确定的预渲染页面的URL，判断所述显示页面是否命中所述预渲染页面；

若所述显示面命中所述预渲染页面，则执行所述根据所述附属应用程序的业务数据和显示框架，渲染生成所述附属应用程序的显示页面的操作。

上述实施例具有如下优点或有益效果：通过策略配置可以将全部页面进行预渲染，也可以将部分页面进行预渲染，在存储空间有限的条件下，上述实施例可以只将重点关注的页面进行预渲染，这样可以在缩短渲染时间的同时，还可以节省存储空间。

第二方面，本申请实施例提供了一种页面渲染装置，所述装置包括：检测模块、预下载模块和渲染模块；其中，

所述检测模块，用于当检测出宿主应用程序中的附属应用程序处于预取生命周期时，将所述附属应用程序在当前时刻的环境描述信息传入至所述附属应用程序的目标函数；

所述预下载模块，用于当所述环境描述信息满足预下载条件时，通过所述目标函数预下载所述附属应用程序的业务数据；并通过所述目标函数预下载所述附属应用程序的显示框架；

所述渲染模块，用于当检测出所述附属应用程序满足触发条件时，根据所述附属应用程序的业务数据和显示框架，渲染生成所述附属应用程序的显示页面。

在上述实施例中，所述预下载模块，具体用于当所述环境描述信息满足预下载条件时，通过所述目标函数调用所述附属应用程序的业务数据的预取函数；其中，所述环境描述信息包括下述至少一项：所述附属应用程序的当前展现状态、所述附属应用程序的入口信息以及所述附属应用程序的待展示页面的页面描述信息；通过所述附属应用程序的业务数据的预取函数，预下载所述附属应用程序的业务数据。

在上述实施例中，所述预下载模块，具体用于通过所述目标函数创建所述附属应用程序的显示框架的页面容器；并通过所述目标函数获取所述附属应用程序的显示框架的页面路径；按照所述附属应用程序的显示框架的页面路径，通过所述附属应用程序的显示框架的页面容器，预下载所述附属应用程序的显示框架。

在上述实施例中，所述渲染模块包括：调用子模块和渲染子模块；其中，

所述调用子模块，用于通过所述附属应用程序的业务数据调用渲染逻辑的应用程序接口驱动所述渲染逻辑；

所述渲染子模块，用于通过所述渲染逻辑将附属应用程序的业务数据渲染为超文本标记语言的文本格式的业务数据；通过所述附属应用程序的显示框架的页面容器，将所述超文本标记语言的文本格式的业务数据添加至所述附属应用程序的显示框架中。

在上述实施例中，所述渲染模块，还用于获取显示页面的URL；根据所述显示页面的URL和预先确定的预渲染页面的URL，判断所述显示页面是否命中所述预渲染页面；若所述显示面命中所述预渲染页面，则执行所述根据所述附属应用程序的业务数据和显示框架，渲染生成所述附属应用程序的显示页面的操作。

第三方面，本申请实施例提供了一种电子设备，包括：

一个或多个处理器；

存储器，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本申请任意实施例所述的页面渲染方法。

第四方面，本申请实施例提供了一种存储介质，其上存储有计算机程序，该程序被处理器执行时实现本申请任意实施例所述的页面渲染方法。

上述申请中的一个实施例具有如下优点或有益效果：本申请提出的页面渲染方法、装置、电子设备及存储介质，当检测出宿主应用程序中的附属应用程序处于预取生命周期时，将附属应用程序在当前时刻的环境描述信息传入至附属应用程序的目标函数；当环境描述信息满足预下载条件时，通过目标函数预下载附属应用程序的业务数据；并通过目标函数预下载附属应用程序的显示框架；当检测出附属应用程序满足触发条件时，根据附属应用程序的业务数据和显示框架，渲染生成附属应用程序的显示页面。也就是说，本申请中的附属应用程序在未满足触发条件之前，可以提前通过目标函数预下载显示框架，这样当附属应用程序满足触发条件时，可以即刻根据预下载的业务数据和显示框架渲染生成附属应用程序的显示页面，而无需在检测出附属应用程序满足触发条件的时刻再下载显示框架，从而达到缩短页面渲染时间和提高页面渲染速度的目的。而在现有的页面渲染方法中，先对小程序的业务数据进行预取，当用户点击小程序页面时，下载页面显示框架，然后根据小程序的业务数据和显示框架，渲染生成小程序的显示页面。因为本申请采用预下载显示框架的技术手段，解决了现有技术中页面渲染耗时长的技术问题，进而达到了缩短页面渲染时间和提高页面渲染速度的技术效果；并且，本申请实施例的技术方案实现简单方便、便于普及，适用范围更广。

上述可选方式所具有的其他效果将在下文中结合具体实施例加以说明。

附图说明

附图用于更好地理解本方案，不构成对本申请的限定。其中：

图1是本申请实施例一提供的页面渲染方法的流程示意图；

图2是本申请实施例二提供的页面渲染方法的流程示意图；

图3是本申请实施例二提供的页面渲染过程的示意图；

图4是本申请实施例三提供的页面渲染装置的结构示意图；

图5是本申请实施例三提供的渲染模块的结构示意图；

图6是用来实现本申请实施例的页面渲染方法的电子设备的框图。

具体实施方式

以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

实施例一

图1是本申请实施例一提供的页面渲染方法的流程示意图，该方法可以由页面渲染装置或者电子设备来执行，该装置或者电子设备可以由软件和/或硬件的方式实现，该装置或者电子设备可以集成在任何具有网络通信功能的智能设备中。如图1所示，页面渲染方法可以包括以下步骤：

S101、当检测出宿主应用程序中的附属应用程序处于预取生命周期时，将附属应用程序在当前时刻的环境描述信息传入至附属应用程序的目标函数。

在本申请的具体实施例中，当检测出宿主应用程序中的附属应用程序处于预取生命周期时，电子设备可以将附属应用程序在当前时刻的环境描述信息传入至附属应用程序的目标函数；其中，环境描述信息包括下述至少一项：附属应用程序的当前展现状态、附属应用程序的入口信息以及附属应用程序的待展示页面的页面描述信息。示例性的，附属应用程序的当前展现状态可以包括：可见、不可见、悬停或者点击；附属应用程序的入口信息可以包括：搜索场景或者分发场景；以及附属应用程序的待展示页面的页面描述信息包括：一级页面，或者位于一级页面层级下的至少一个下级子页面。这里的生命周期是指程序从创建、到开始、暂停、唤起、暂停以及卸载的过程；在附属应用程序被后台预加载后，电子设备可以通过宿主应用程序实时监测附属应用程序当前所处的生命周期。本申请中的附属应用程序是依托在大型的应用程序中的小程序。例如，宿主应用程序可以微信；附属应用程序可以是微信中的微信读书、腾讯新闻、美团外卖、百度网盘等程序。

在本申请的具体实施例中，宿主应用程序在搜索场景下，根据输入的搜索查询请求，获取搜索结果页面作为资源结果页面在显示区域内进行展示，并在检测出显示区域内包括搜索结果页面中的附属应用程序时，对附属应用程序进行后台预加载。宿主应用程序在分发场景下，根据信息流触发请求，获取信息流结果页面作为资源结果页面在显示区域内进行展示，并在检测出显示区域内包括信息流结果页面中的附属应用程序时，对附属应用程序进行后台预加载。

需要说明的是，本申请中的目标函数的处理逻辑可以由开发者进行编写，可以灵活定义当附属应用程序处于何种展现状态下、处于何种场景下(搜索场景或者是分发场景)、待展示页面为何种页面时，通过目标函数构造网络资源获取请求，发送至附属应用平台，然后接收附属应用平台反馈的附属应用程序的业务数据进行存储。

在本申请的具体实施例中，附属应用程序的预取生命周期包括下述至少一项：附属应用程序在显示区域内的滑动状态，附属应用程序在显示区域内的悬停状态以及附属应用程序在显示区域内的点击状态。显示区域是用于向用户展示信息的区域。将附属应用程序的显示页面在显示区域内进行展示，以使用户可以浏览附属应用程序的显示页面中的信息。

在本申请的具体实施例中，在检测附属应用程序是否处于预取生命周期之前，还可以先对附属应用程序进行后台预加载，包括：通过宿主应用程序判断在当前时刻是否未对任何附属应用程序进行后台预加载；如果确定出在当前时刻未对任何附属应用程序进行后台预加载，则继续检测是否已完成针对附属应用程序的应用框架的预下载。如果检测到已完成针对附属应用程序的应用框架预加载，则在针对附属应用程序的应用框架下，从附属应用平台预下载附属应用程序的安装包，并在后台预下载安装包中的设定启动文件。如果检测到未完成针对附属应用程序的应用框架预加载，则进行应用框架的预加载后，在加载完成的应用框架下，从附属应用平台预下载附属应用程序的安装包，并在后台预下载安装包中的设定启动文件。如果确定出在当前时刻已对其他附属应用程序进行后台预加载，则卸载其他附属应用程序的安装包中的启动文件后，在当前的应用框架下，从附属应用平台预下载附属应用程序的安装包，并在后台预加载安装包中的启动文件。可选的，启动文件为app.js文件；app.js文件中包括附属应用程序的运行代码。在后台预加载安装包中的app.js文件，即在后台预加载附属应用程序。

S102、当环境描述信息满足预下载条件时，通过目标函数预下载附属应用程序的业务数据；并通过目标函数预下载附属应用程序的显示框架。

在本申请的具体实施例中，当环境描述信息满足预下载条件时，电子设备可以通过目标函数预下载附属应用程序的业务数据。具体地，附属应用程序中可以包括目标函数，目标函数在附属应用程序处于预取生命周期时被触发执行，以使附属应用程序在传入的环境描述信息满足预下载条件时，通过目标函数预下载附属应用程序的业务数据。具体地，目标函数可以为预取生命周期钩子函数(onPrefetch(state))。电子设备通过宿主应用程序在监测到附属应用程序处于预取生命周期时，触发执行附属应用程序中包括的目标函数，并将附属应用程序的环境描述信息作为输入参数传入目标函数。目标函数在检测到环境描述信息满足预设条件时，通过目标函数调用附属应用程序的业务数据的预取函数；通过附属应用程序的业务数据的预取函数构造网络资源获取请求，发送至附属应用平台；然后目标函数接收附属应用平台反馈的附属应用程序的业务数据进行存储。

在本申请的具体实施例中，当环境描述信息满足预下载条件时，电子设备还可以通过目标函数预下载附属应用程序的显示框架。具体地，电子设备可以通过目标函数创建附属应用程序的显示框架的页面容器；并通过目标函数获取附属应用程序的显示框架的页面路径；然后按照附属应用程序的显示框架的页面路径，通过附属应用程序的显示框架的页面容器，预下载附属应用程序的显示框架。

S103、当检测出附属应用程序满足触发条件时，根据附属应用程序的业务数据和显示框架，渲染生成附属应用程序的显示页面。

在本申请的具体实施例中，当检测出附属应用程序满足触发条件时，电子设备可以根据附属应用程序的业务数据和显示框架，渲染生成附属应用程序的显示页面。具体地，电子设备可以先通过附属应用程序的业务数据调用渲染逻辑的应用程序接口驱动渲染逻辑；然后通过渲染逻辑将附属应用程序的业务数据渲染为超文本标记语言的文本格式的业务数据；再通过附属应用程序的显示框架的页面容器，将超文本标记语言的文本格式的业务数据添加至附属应用程序的显示框架中。

本申请实施例提出的页面渲染方法，当检测出宿主应用程序中的附属应用程序处于预取生命周期时，将附属应用程序在当前时刻的环境描述信息传入至附属应用程序的目标函数；当环境描述信息满足预下载条件时，通过目标函数预下载附属应用程序的业务数据；并通过目标函数预下载附属应用程序的显示框架；当检测出附属应用程序满足触发条件时，根据附属应用程序的业务数据和显示框架，渲染生成附属应用程序的显示页面。也就是说，本申请中的附属应用程序在未满足触发条件之前，可以提前通过目标函数预下载显示框架，这样当附属应用程序满足触发条件时，可以即刻根据预下载的业务数据和显示框架渲染生成附属应用程序的显示页面，而无需在检测出附属应用程序满足触发条件的时刻再下载显示框架，从而达到缩短页面渲染时间和提高页面渲染速度的目的。而在现有的页面渲染方法中，先对小程序的业务数据进行预取，当用户点击小程序页面时，下载页面显示框架，然后根据小程序的业务数据和显示框架，渲染生成小程序的显示页面。因为本申请采用预下载显示框架的技术手段，解决了现有技术中页面渲染耗时长的技术问题，进而达到了缩短页面渲染时间和提高页面渲染速度的技术效果；并且，本申请实施例的技术方案实现简单方便、便于普及，适用范围更广。

实施例二

图2是本申请实施例二提供的页面渲染方法的流程示意图。如图2所示，页面渲染方法可以包括以下步骤：

S201、当检测出宿主应用程序中的附属应用程序处于预取生命周期时，将附属应用程序在当前时刻的环境描述信息传入至附属应用程序的目标函数。

在本申请的具体实施例中，当检测出宿主应用程序中的附属应用程序处于预取生命周期时，电子设备可以将附属应用程序在当前时刻的环境描述信息传入至附属应用程序的目标函数；其中，附属应用程序的预取生命周期包括下述至少一项：附属应用程序在显示区域内的滑动状态，附属应用程序在显示区域内的悬停状态以及附属应用程序在显示区域内的点击状态。显示区域是用于向用户展示信息的区域。将附属应用程序的显示页面在显示区域内进行展示，以使用户可以浏览附属应用程序的显示页面中的信息。此外，环境描述信息包括下述至少一项：附属应用程序的当前展现状态、附属应用程序的入口信息以及附属应用程序的待展示页面的页面描述信息。示例性的，附属应用程序的当前展现状态可以包括：可见、不可见、悬停或者点击；附属应用程序的入口信息包括：搜索场景或者分发场景；以及附属应用程序的待展示页面的页面描述信息包括：一级页面，或者位于一级页面层级下的至少一个下级子页面。

S202、当环境描述信息满足预下载条件时，通过目标函数调用附属应用程序的业务数据的预取函数。

在本申请的具体实施例中，当环境描述信息满足预下载条件时，电子设备可以通过目标函数调用附属应用程序的业务数据的预取函数。具体地，附属应用程序中可以包括目标函数，目标函数在附属应用程序处于预取生命周期时被触发执行，以使附属应用程序在传入的环境描述信息满足预下载条件时，通过预取函数预下载附属应用程序的业务数据。具体地，目标函数可以为预取生命周期钩子函数(onPrefetch(state))；预取函数可以为swan.request(data)。电子设备通过宿主应用程序在检测到附属应用程序处于预取生命周期时，触发执行附属应用程序中包括的目标函数，并将附属应用程序的环境描述信息作为输入参数传入目标函数。目标函数在检测到环境描述信息满足预设条件时，通过目标函数调用附属应用程序的业务数据的预取函数。

S203、通过附属应用程序的业务数据的预取函数，预下载附属应用程序的业务数据。

在本申请的具体实施例中，电子设备可以通过附属应用程序的业务数据的预取函数，预下载附属应用程序的业务数据。具体地，电子设备可以通过附属应用程序的业务数据的预取函数构造网络资源获取请求，发送至附属应用平台；然后目标函数接收附属应用平台反馈的附属应用程序的业务数据进行存储。

S204、通过目标函数创建附属应用程序的显示框架的页面容器；并通过目标函数获取附属应用程序的显示框架的页面路径。

在本申请的具体实施例中，电子设备可以通过目标函数创建附属应用程序的显示框架的页面容器；并通过目标函数获取附属应用程序的显示框架的页面路径。常见的用于页面编辑的图形用户界面(也称作“页面编辑界面”)中包括的处于编辑状态的页面，该页面也称作页面容器，用户可以向该页面容器中添加文字、图片、多媒体文件等元素，例如PPT编辑界面；在保存之后，可以将该页面容器以及添加到该页面容器中的全部元素作为一个整体图像进行显示。在本步骤中，电子设备可以根据小程序描述文件中的页面相对路径和小程序包路径，确定显示框架的绝对路径。其中，绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。完整的描述页面位置的路径就是绝对路径，以web站点根目录为参考基础的目录路径。

S205、按照附属应用程序的显示框架的页面路径，通过附属应用程序的显示框架的页面容器，预下载附属应用程序的显示框架。

在本申请的具体实施例中，电子设备可以按照附属应用程序的显示框架的页面路径，通过附属应用程序的显示框架的页面容器，预下载附属应用程序的显示框架。具体地，电子设备可以通过附属应用程序的显示框架的页面容器构造显示框架获取请求，发送至附属应用平台；然后目标函数接收附属应用平台反馈的附属应用程序的显示框架进行存储；其中，显示框架可以包括至少一个样式组件或者逻辑代码；在本步骤中，电子设备可以通过目标函数接收附属应用平台反馈的显示框架的安装包，在后台预下载安装包中的app.js文件，即在后台预下载显示框架。

S206、当检测出附属应用程序满足触发条件时，根据附属应用程序的业务数据和显示框架，渲染生成附属应用程序的显示页面。

在本申请的具体实施例中，当检测出附属应用程序满足触发条件时，电子设备可以根据附属应用程序的业务数据和显示框架，渲染生成附属应用程序的显示页面。具体地，电子设备可以先通过附属应用程序的业务数据调用渲染逻辑的应用程序接口驱动渲染逻辑；然后通过渲染逻辑将附属应用程序的业务数据渲染为超文本标记语言的文本格式的业务数据；再通过附属应用程序的显示框架的页面容器，将超文本标记语言的文本格式的业务数据添加至附属应用程序的显示框架中；其中，显示框架可以包括至少一个样式组件或者逻辑代码；在本步骤中，电子设备可以根据样式组件或者逻辑代码的类型，将超文本标记语言的文本格式的业务数据划分至对应的样式组件或者逻辑代码中；然后将各个样式组件或者逻辑代码对应的业务数据添加至各个样式组件或者逻辑代码中。

较佳地，在本申请的具体实施例中，宿主应用程序中可以包括一个附属应用程序，也可以包括多个附属应用程序，电子设备可以针对一部分附属应用程序的显示页面进行预渲染，也可以针对全部附属应用程序的显示页面进行预渲染；当电子设备只针对一部分附属应用程序的显示界面进行预渲染时，用户点击的显示页面可能是已被预渲染的页面，也可能是被预渲染的页面，因此，电子设备在渲染生成附属应用程序的显示页面之前，可以先判断显示页面是否命中预渲染页面。具体地，电子设备可以获取显示页面的URL；然后根据显示页面的URL和预先确定的预渲染页面的URL，判断显示页面是否命中预渲染页面；若显示面命中预渲染页面，则执行根据附属应用程序的业务数据和显示框架，渲染生成附属应用程序的显示页面的操作。具体地，若显示页面的URL与至少一个预渲染页面的URL相同，则表示显示页面命中预渲染页面；若显示页面的URL与任意一个预渲染页面的URL均不相同，则表示显示页面未命中预渲染页面。当显示页面未命中预渲染页面时，电子设备可以采用现有的加载逻辑渲染生成附属应用程序的显示页面。

图3是本申请实施例二提供的页面渲染过程的示意图。如图3所示，在附属应用程序的启动处理过程的准备环节中，宿主应用程序进行应用框架的预加载后，在加载完成的应用框架下，从附属应用平台预下载附属应用程序的安装包，并在后台预加载安装包中的app.js文件；当显示区域内的显示内容进行更新时，在当前的应用框架下，预下载变更后的附属应用程序的安装包，在卸载准备环节已加载的无用的app.js文件之后，在后台预加载变更后的附属应用程序的安装包中的app.js文件。在附属应用程序被后台预加载后，附属应用程序实时监测附属应用程序当前所处的生命周期，在监测到预取生命周期时，在预取渲染环节触发执行运行代码中包括的预期生命周期钩子函数app.js onPrefetch(data)，并将附属应用程序的环境描述信息作为输入参数传入预期生命周期钩子函数app.jsonPrefetch(data)，例如，将预取事件派发或者用户点击的相关参数传入至触发预期生命周期钩子函数app.js onPrefetch(data)，通过预期生命周期钩子函数app.js onPrefetch(data)在检测到环境描述信息data满足预设条件时，预下载附属应用程序的业务数据。环境描述信息data包括附属应用程序的当前展现状态“state”和附属应用程序的待展示页面的页面描述信息“launchScheme”。当前展现状态“state”可以为“悬停”或者“点击”。页面描述信息“launchScheme”可以为路径信息“path？query”。在预取生命周期钩子函数中，预先开放了除了用户界面(User Interface，UI)功能之外的全部功能。例如，获取系统信息的功能，或者获取设备标识的功能。开发者可以预取生命周期钩子函数中实现对上述功能的调用。可选地，预取生命周期钩子函数中的处理逻辑由开发者进行编写。需要说明的是，本申请可以灵活定义当目标附属应用程序处于何种展现状态下、待展示页面为何种页面时，构造网络资源获取请求，发送至附属应用平台，然后接收附属应用平台反馈的附属应用程序的业务数据进行存储。具体地，电子设备可以先调用附属应用程序的业务数据的预取函数swan.request(data)；通过swan.request(data)通过调用set data API构造网络资源获取请求，发送至附属应用平台，然后接收附属应用平台反馈的附属应用程序的业务数据进行存储。此外，电子设备还可以通过目标函数创建附属应用程序的显示框架的页面容器；通过附属应用程序的显示框架的页面容器，预下载附属应用程序的显示框架。宿主应用程序响应于用户的对显示区域内的附属应用程序的点击操作，前台开启附属应用程序，附属应用程序触发渲染(set Data)，根据预下载的业务数据和显示框架，渲染生成附属应用程序的启动显示页面，并显示生成的启动显示页面。通过本申请可对小程序页面提前完成预渲染，助力开发者将小程序秒开体验变成可能，弥补了现有预取方案仅能够预取数据而未真实触发页面渲染的问题，从而保证小程序打开速度在性能要求极为严苛的运营活动或商业推广场景也能够游刃有余，有效提升小程序对用户的触达率。

本申请实施例提出的页面渲染方法，当宿主应用程序中的附属应用程序处于预取生命周期时，将附属应用程序在当前时刻的环境描述信息传入至附属应用程序的目标函数；当环境描述信息满足预下载条件时，通过目标函数预下载附属应用程序的业务数据；并通过目标函数预下载附属应用程序的显示框架；当附属应用程序满足触发条件时，根据附属应用程序的业务数据和显示框架，渲染生成附属应用程序的显示页面。也就是说，本申请中的附属应用程序在未满足触发条件之前，可以提前通过目标函数预下载显示框架，这样当附属应用程序满足触发条件时，可以即刻根据预下载的业务数据和显示框架渲染生成附属应用程序的显示页面，而无需在检测出附属应用程序满足触发条件的时刻再下载显示框架，从而达到缩短页面渲染时间和提高页面渲染速度的目的。而在现有的页面渲染方法中，先对小程序的业务数据进行预取，当用户点击小程序页面时，下载页面显示框架，然后根据小程序的业务数据和显示框架，渲染生成小程序的显示页面。因为本申请采用预下载显示框架的技术手段，解决了现有技术中页面渲染耗时长的技术问题，进而达到了缩短页面渲染时间和提高页面渲染速度的技术效果；并且，本申请实施例的技术方案实现简单方便、便于普及，适用范围更广。

实施例三

图4是本申请实施例三提供的页面渲染装置的结构示意图。如图4所示，所述装置400包括：检测模块401、预下载模块402和渲染模块403；其中，

所述检测模块401，用于当检测出宿主应用程序中的附属应用程序处于预取生命周期时，将所述附属应用程序在当前时刻的环境描述信息传入至所述附属应用程序的目标函数；

所述预下载模块402，用于当所述环境描述信息满足预下载条件时，通过所述目标函数预下载所述附属应用程序的业务数据；并通过所述目标函数预下载所述附属应用程序的显示框架；

所述渲染模块403，用于当检测出所述附属应用程序满足触发条件时，根据所述附属应用程序的业务数据和显示框架，渲染生成所述附属应用程序的显示页面。

进一步的，所述预下载模块402，具体用于当所述环境描述信息满足预下载条件时，通过所述目标函数调用所述附属应用程序的业务数据的预取函数；其中，所述环境描述信息包括下述至少一项：所述附属应用程序的当前展现状态、所述附属应用程序的入口信息以及所述附属应用程序的待展示页面的页面描述信息；通过所述附属应用程序的业务数据的预取函数，预下载所述附属应用程序的业务数据。

进一步，所述预下载模块402，具体用于通过所述目标函数创建所述附属应用程序的显示框架的页面容器；并通过所述目标函数获取所述附属应用程序的显示框架的页面路径；按照所述附属应用程序的显示框架的页面路径，通过所述附属应用程序的显示框架的页面容器，预下载所述附属应用程序的显示框架。

图5是本申请实施例三提供的渲染模块的结构示意图。如图5所示，所述渲染模块403包括：调用子模块4031和渲染子模块4032；其中，

所述调用子模块4031，用于通过所述附属应用程序的业务数据调用渲染逻辑的应用程序接口驱动所述渲染逻辑；

所述渲染子模块4032，用于通过所述渲染逻辑将附属应用程序的业务数据渲染为超文本标记语言的文本格式的业务数据；通过所述附属应用程序的显示框架的页面容器，将所述超文本标记语言的文本格式的业务数据添加至所述附属应用程序的显示框架中。

进一步，所述渲染模块403，还用于获取显示页面的URL；根据所述显示页面的URL和预先确定的预渲染页面的URL，判断所述显示页面是否命中所述预渲染页面；若所述显示面命中所述预渲染页面，则执行所述根据所述附属应用程序的业务数据和显示框架，渲染生成所述附属应用程序的显示页面的操作。

上述页面渲染装置可执行本申请任意实施例所提供的方法，具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可参见本申请任意实施例提供的页面渲染方法。

实施例四

根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。

如图6所示，是根据本申请实施例的页面渲染方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。

如图6所示，该电子设备包括：一个或多个处理器601、存储器602，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示GUI的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图6中以一个处理器601为例。

存储器602即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的页面渲染方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的页面渲染方法。

存储器602作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的页面渲染方法对应的程序指令/模块(例如，附图4所示的检测模块401、预下载模块402和渲染模块403)。处理器601通过运行存储在存储器602中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的页面渲染方法。

存储器602可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据页面渲染方法的电子设备的使用所创建的数据等。此外，存储器602可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器602可选包括相对于处理器601远程设置的存储器，这些远程存储器可以通过网络连接至页面渲染方法的电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

页面渲染方法的电子设备还可以包括：输入装置603和输出装置604。处理器601、存储器602、输入装置603和输出装置604可以通过总线或者其他方式连接，图6中以通过总线连接为例。

输入装置603可接收输入的数字或字符信息，以及产生与页面渲染方法的电子设备的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置604可以包括显示设备、辅助照明装置(例如，LED)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(LCD)、发光二极管(LED)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。

此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用ASIC(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)、互联网和区块链网络。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

根据本申请实施例的技术方案，当检测出宿主应用程序中的附属应用程序处于预取生命周期时，将附属应用程序的环境描述信息传入至附属应用程序的目标函数；当环境描述信息满足预下载条件时，通过目标函数预下载附属应用程序的业务数据；并通过目标函数预下载附属应用程序的显示框架；当检测出附属应用程序满足触发条件时，根据附属应用程序的业务数据和显示框架，渲染生成附属应用程序的显示页面。也就是说，本申请中的附属应用程序在未满足触发条件之前，可以提前通过目标函数预下载显示框架，这样当附属应用程序满足触发条件时，可以即刻根据预下载的业务数据和显示框架渲染生成附属应用程序的显示页面，而无需在检测出附属应用程序满足触发条件的时刻再下载显示框架，从而达到缩短页面渲染时间和提高页面渲染速度的目的。而在现有的页面渲染方法中，先对小程序的业务数据进行预取，当用户点击小程序页面时，下载页面显示框架，然后根据小程序的业务数据和显示框架，渲染生成小程序的显示页面。因为本申请采用预下载显示框架的技术手段，解决了现有技术中页面渲染耗时长的技术问题，进而达到了缩短页面渲染时间和提高页面渲染速度的技术效果；并且，本申请实施例的技术方案实现简单方便、便于普及，适用范围更广。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。

Claims (12)

1.一种页面渲染方法，其特征在于，所述方法包括：

当检测出宿主应用程序中的附属应用程序处于预取生命周期时，将所述附属应用程序在当前时刻的环境描述信息传入至所述附属应用程序的目标函数；

当所述环境描述信息满足预下载条件时，通过所述目标函数预下载所述附属应用程序的业务数据；并通过所述目标函数预下载所述附属应用程序的显示框架；

当检测出所述附属应用程序满足触发条件时，根据所述附属应用程序的业务数据和显示框架，渲染生成所述附属应用程序的显示页面。

2.根据权利要求1所述的方法，其特征在于，所述当所述环境描述信息满足预下载条件时，通过所述目标函数预下载所述附属应用程序的业务数据，包括：

当所述环境描述信息满足预下载条件时，通过所述目标函数调用所述附属应用程序的业务数据的预取函数；其中，所述环境描述信息包括下述至少一项：所述附属应用程序的当前展现状态、所述附属应用程序的入口信息以及所述附属应用程序的待展示页面的页面描述信息；

通过所述附属应用程序的业务数据的预取函数，预下载所述附属应用程序的业务数据。

3.根据权利要求1所述的方法，其特征在于，所述通过所述目标函数预下载所述附属应用程序的显示框架，包括：

通过所述目标函数创建所述附属应用程序的显示框架的页面容器；并通过所述目标函数获取所述附属应用程序的显示框架的页面路径；

按照所述附属应用程序的显示框架的页面路径，通过所述附属应用程序的显示框架的页面容器，预下载所述附属应用程序的显示框架。

4.根据权利要求3所述的方法，其特征在于，所述根据所述附属应用程序的业务数据和显示框架，渲染生成所述附属应用程序的显示页面，包括：

通过所述附属应用程序的业务数据调用渲染逻辑的应用程序接口驱动所述渲染逻辑；

通过所述渲染逻辑将附属应用程序的业务数据渲染为超文本标记语言的文本格式的业务数据；

通过所述附属应用程序的显示框架的页面容器，将所述超文本标记语言的文本格式的业务数据添加至所述附属应用程序的显示框架中。

5.根据权利要求1所述的方法，其特征在于，在所述根据所述附属应用程序的业务数据和显示框架，渲染生成所述附属应用程序的显示页面之前，所述方法还包括：

获取显示页面的统一资源定位符URL；

根据所述显示页面的URL和预先确定的预渲染页面的URL，判断所述显示页面是否命中所述预渲染页面；

若所述显示面命中所述预渲染页面，则执行所述根据所述附属应用程序的业务数据和显示框架，渲染生成所述附属应用程序的显示页面的操作。

6.一种页面渲染的装置，其特征在于，所述装置包括：检测模块、预下载模块和渲染模块；其中，

所述检测模块，用于当检测出宿主应用程序中的附属应用程序处于预取生命周期时，将所述附属应用程序在当前时刻的环境描述信息传入至所述附属应用程序的目标函数；

所述预下载模块，用于当所述环境描述信息满足预下载条件时，通过所述目标函数预下载所述附属应用程序的业务数据；并通过所述目标函数预下载所述附属应用程序的显示框架；

所述渲染模块，用于当检测出所述附属应用程序满足触发条件时，根据所述附属应用程序的业务数据和显示框架，渲染生成所述附属应用程序的显示页面。

7.根据权利要求6所述的装置，其特征在于：

所述预下载模块，具体用于当所述环境描述信息满足预下载条件时，通过所述目标函数调用所述附属应用程序的业务数据的预取函数；其中，所述环境描述信息包括下述至少一项：所述附属应用程序的当前展现状态、所述附属应用程序的入口信息以及所述附属应用程序的待展示页面的页面描述信息；通过所述附属应用程序的业务数据的预取函数，预下载所述附属应用程序的业务数据。

8.根据权利要求6所述的装置，其特征在于：

所述预下载模块，具体用于通过所述目标函数创建所述附属应用程序的显示框架的页面容器；并通过所述目标函数获取所述附属应用程序的显示框架的页面路径；按照所述附属应用程序的显示框架的页面路径，通过所述附属应用程序的显示框架的页面容器，预下载所述附属应用程序的显示框架。

9.根据权利要求8所述的装置，其特征在于，所述渲染模块包括：调用子模块和渲染子模块；其中，

所述调用子模块，用于通过所述附属应用程序的业务数据调用渲染逻辑的应用程序接口驱动所述渲染逻辑；

所述渲染子模块，用于通过所述渲染逻辑将附属应用程序的业务数据渲染为超文本标记语言的文本格式的业务数据；通过所述附属应用程序的显示框架的页面容器，将所述超文本标记语言的文本格式的业务数据添加至所述附属应用程序的显示框架中。

10.根据权利要求6所述的装置，其特征在于：

所述渲染模块，还用于获取显示页面的统一资源定位符URL；根据所述显示页面的URL和预先确定的预渲染页面的URL，判断所述显示页面是否命中所述预渲染页面；若所述显示面命中所述预渲染页面，则执行所述根据所述附属应用程序的业务数据和显示框架，渲染生成所述附属应用程序的显示页面的操作。

11.一种电子设备，其特征在于，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-5中任一项所述的方法。

12.一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，所述计算机指令用于使所述计算机执行权利要求1-5中任一项所述的方法。

Images