CN113703893A - 一种页面渲染方法、装置、终端及存储介质 - Google Patents

Abstract

本发明实施例公开了一种页面渲染方法、装置、终端及存储介质。该方法应用于页面客户端，该页面客户端包括多个功能项目，该方法包括：在接收到页面渲染指令时，获取与页面渲染指令对应的预渲染页面，并读取预渲染页面，预渲染页面内记载有目标资源文件信息；当读取到目标资源文件信息时，确定页面客户端中是否缓存有与目标资源文件信息对应的目标资源文件，目标资源文件是多个功能项目中的至少两个功能项目在运行时需要的资源文件；如果是，则从页面客户端中获取到目标资源文件；根据目标资源文件向页面服务端进行数据请求，并根据数据请求结果进行与页面渲染指令对应的待渲染页面的渲染。本发明实施例的技术方案，可以缩短页面渲染时间。

Description

一种页面渲染方法、装置、终端及存储介质

技术领域

本发明实施例涉及计算机技术领域，尤其涉及一种页面渲染方法、装置、终端及存储介质。

背景技术

异步的JavaScript与XML(Asynchronous JavaScript and XML，Ajax)技术的出现，让Web应用在无需刷新的状态下能够显示不同页面的内容，这就是单页面应用(SinglePage Web Application，SPA)。

随着业务需求的发展，页面的复杂程度也变得越来越高。在网络延迟优化和硬件性能提升已达一定瓶颈的情况下，单页面应用在优化了用户体验的同时，也带来了首屏可见时间过长的问题，即页面渲染时间过长的问题。

发明内容

本发明实施例提供了一种页面渲染方法、装置、终端及存储介质，解决了页面渲染时间过长的问题。

第一方面，本发明实施例提供了一种页面渲染方法，应用于页面客户端，页面客户端包括多个功能项目，该方法可以包括：

在接收到页面渲染指令时，获取与页面渲染指令对应的预渲染页面，读取预渲染页面，其中，预渲染页面内记载有目标资源文件信息；

当读取到目标资源文件信息时，确定页面客户端中是否缓存有与目标资源文件信息对应的目标资源文件，其中，目标资源文件是多个功能项目中的至少两个功能项目在运行时需要的资源文件；

如果是，则从页面客户端中获取目标资源文件；

根据目标资源文件向页面服务端进行数据请求，并根据数据请求结果进行与页面渲染指令对应的待渲染页面的渲染。

第二方面，本发明实施例还提供了一种页面渲染装置，配置于页面客户端，页面客户端包括多个功能项目，该装置可以包括：

预渲染页面读取模块，用于接收到页面渲染指令时，获取与页面渲染指令对应的预渲染页面，并读取预渲染页面，其中，预渲染页面内记载有目标资源文件信息；

目标资源文件确定模块，用于当读取到目标资源文件信息时，确定页面客户端中是否缓存有与目标资源文件信息对应的目标资源文件，其中，目标资源文件是多个功能项目中的至少两个功能项目在运行时需要的资源文件；

目标资源文件获取模块，用于若是，则从页面客户端中获取目标资源文件；

待渲染页面渲染模块，用于根据目标资源文件向页面服务端进行数据请求，并根据数据请求结果进行与页面渲染指令对应的待渲染页面的渲染。

第三方面，本发明实施例还提供了一种终端，可以包括：

一个或多个处理器；

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

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

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

本发明实施例的技术方案，页面客户端通过获取与接收到的页面渲染指令对应的预渲染页面，并对预渲染页面进行读取；当读取到预渲染页面中的目标资源文件信息时，可以确定本地中是否缓存有与目标资源文件信息对应的目标资源文件，该目标资源文件可以是多个功能项目中的至少两个功能项目在运行时需要的资源文件；如果是，则可以从页面客户端中获取目标资源文件；进而，根据目标资源文件向页面服务端进行数据请求，然后根据数据请求结果进行与页面渲染指令对应的待渲染页面的渲染。上述技术方案，在多微服务架构下，通过将目标资源文件从各功能项目中抽离出来，并将它们拉取到本地中以让各功能项目命中缓存进行应用的方式，可以让同一目标资源文件的单次拉取满足多个功能项目间的应用，由此无需从资源服务端重复获取该同一目标资源文件，减少了网络请求时间消耗，加快了目标资源文件的获取速度，进一步加快了与目标资源文件相关的数据的获取速度，最终可以在预渲染页面的基础上快速地渲染出对于用户而言的真实有效的数据(即将数据请求结果替换预渲染页面中的预设数据)，达到了缩短页面渲染时间的效果。

附图说明

图1是本发明实施例一中的一种页面渲染方法的流程图；

图2是本发明实施例一中一种页面渲染方法中目标资源文件的抽离示意图；

图3是本发明实施例二中的一种页面渲染方法的流程图；

图4是本发明实施例三中的一种页面渲染方法的流程图；

图5是本发明实施例四中的一种页面渲染方法的流程图；

图6是本发明实施例四中一种页面渲染方法中预渲染过程的流程图；

图7是本发明实施例五中的一种页面渲染装置的结构框图；

图8是本发明实施例六中的一种终端的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

在介绍本发明实施例之前，先对本发明实施例的应用场景进行示例性说明：为了提高应用服务的灵活性，可以基于微服务架构进行应用服务框架的部署，即应用服务中的各功能模块按照微服务维度进行划分，可以将各页面分别划分到相应的功能模块中，再即以微服务架构的形式实现同一功能模块内各页面的存放，由此后续在进行功能变更时只需要变更相应的微服务即可，操作灵活性更强。在实际应用中，可选的，上述微服务架构可以基于vue框架得到。

进一步，针对每个功能模块，其内可能存放有多个页面，这多个页面中的首屏页面可以是该功能模块被应用时首个展现出来的页面。在此基础上，由于存在通过不同的功能模块跳转到该功能模块以对该功能模块进行应用的情况，因此首屏页面的数量可以是一个、两个或是多个，在此未做具体限定。在实际应用中，可选的，上述功能模块还可以称为功能项目、微服务项目等。

在功能项目跳转过程中，为了减少用户对首屏页面的等待时间，可以对各功能项目中的首屏页面进行预渲染(Prerendering)，由此加快了首屏页面的渲染速度，进而提升了用户体验。但是，通过预渲染技术渲染出的预渲染页面仅能显示出那些内容固定的数据，如图标数据、页面样式数据等，而对于用户而言的真实有效的数据多是基于预设数据如“--”等进行表示，由此这只能让用户在视觉上感觉缩短了白屏时间，但是实际的页面渲染时间并未缩短。因此，如何更快的得到对于用户而言的真实有效的数据，是缩短页面渲染时间的关键所在。

正如上文所述，当应用服务中的各功能项目按照微服务维度进行划分，且在不同的微服务间存在着相关的交互时，可以采用统一的项目框架构建出这些功能项目。由于该项目框架中存在一些公共的资源文件，这些资源文件可以被多个功能项目所应用，且分别存储在各自的功能项目中。示例性的，假设某个资源文件同时被部署在页面客户端中的功能项目A和功能项目B所应用，并且同时存储在资源服务器中与功能项目A对应的资源存储区域A中、以及与功能项目B对应的资源存储区域B中。那么，当功能项目A被启动时，页面客户端需要从资源存储区域A中获取该资源文件以供功能项目A应用；然后，当功能项目B被启动时，页面客户端又需要从资源存储区域B中获取该资源文件以供功能项目B应用。显然，在功能项目跳转过程中存在同一资源文件的重复获取的情况，这对于页面渲染速度造成了较大影响。上述公共的资源文件可以是vue、vue-router、loader等常用的基础框架、以及vue-awsome-swiper、vuex、quasar等常用的第三方插件。

实施例一

图1是本发明实施例一中提供的一种页面渲染方法的流程图。本实施例可适用于页面渲染的情况，尤其适用于通过将目标资源文件缓存在页面客户端中以加快页面渲染速度的情况。该方法可以由本发明实施例提供的页面渲染装置来执行，该装置可以由软件和/或硬件的方式实现，且可以配置在页面客户端上，该页面客户端可以集成在终端且包括多个功能项目。

参见图1，本发明实施例的方法具体包括如下步骤：

S110、在接收到页面渲染指令时，获取与页面渲染指令对应的预渲染页面，并读取预渲染页面，其中，预渲染页面内记载有目标资源文件信息。

其中，页面渲染指令可以是用于对某个待展示页面进行渲染的指令，该待展示页面还可以被称为待渲染页面，其可以是应用程序(Application，APP)中的页面，也可以是浏览器中的页面，在此未做具体限定。该预渲染页面可以是先前对待渲染页面进行预渲染后得到的页面，其是与页面渲染指令对应的页面。

需要说明的是，预渲染页面可以理解为一个模板，其内记载有待渲染页面需要的各种数据的数据信息，这些数据信息可以通过页面客户端对预渲染页面进行读取后依次得到。实际应用中，可选的，上述数据信息可以包括目标资源文件的信息(即目标资源文件信息)，页面客户端可以通过读取得到的目标资源文件信息获取相应的目标资源文件，该目标资源文件可能存储于本地(即页面客户端自身)中，也可能存储于资源服务器上，这与实际情况有关，在此未做具体限定。

S120、当读取到目标资源文件信息时，确定在页面客户端中是否缓存有与目标资源文件信息对应的目标资源文件，其中，目标资源文件是多个功能项目中的至少两个功能项目在运行时需要的资源文件。

其中，页面客户端在读取预渲染页面时，可以根据各信息在预渲染页面中的记载顺序进行依次读取，即预渲染页面本身决定了什么样的信息先被读取，什么样的信息后被读取。在此基础上，当页面客户端读取得到预渲染页面中的目标资源文件信息时，其可以先确定与目标资源文件信息对应的目标资源文件是否缓存在本地中，目标资源文件可以是多个功能项目中的至少两个功能项目在运行时均需要的资源文件，即上文中阐述的公共的资源文件，其内可以记载有与在待渲染页面的什么位置摆放什么数据有关的信息。

需要说明的，正如上文所述，由于同一目标资源文件是分别存储在各功能项目中的，或是说分别存储在资源服务端中与各功能项目分别对应的资源存储区域中的，因此上述步骤实施的前提是，将目标资源文件从各功能项目中抽离出来，示例性的，参见图2，这可以发生在各功能项目的打包(即构建build)过程中。这些被抽离出来的目标资源文件可以存储在资源服务端内的同一资源存储区域中，也可以由页面客户端从同一资源存储区域中获取到目标资源文件，并将其缓存到本地。另外，为了保证各功能项目对该同一目标资源文件的有效应用，可以让这些功能项目应用到同一目标资源文件的同一应用版本，这意味着该同一目标资源文件只需要在资源服务端或是本地中保存一个应用版本即可，并且在遇到问题时可以直接通过该同一目标资源文件的升级进行解决。

S130、如果是，则从页面客户端中获取目标资源文件。

其中，如果本地中存储有目标资源文件，那么可以从本地中直接获取目标资源文件，无需再从资源服务端中进行获取，由此解决了因同一目标资源文件的重复获取而带来的页面渲染时间过长的问题。特别地，针对某目标资源文件，由于各功能项目对其的应用版本相同，那么只要将其缓存在本地中，任何功能项目均能成功命中缓存，由此进一步保证了目标资源文件的快速获取。

S140、根据目标资源文件向页面服务端进行数据请求，根据数据请求结果进行与页面渲染指令对应的待渲染页面的渲染。

其中，由于在目标资源文件内可以记载有与在待渲染页面的什么位置摆放什么数据有关的信息，因此可以根据目标资源文件向页面服务端进行数据请求，并根据数据请求结果(即页面服务端返回的数据)进行待渲染页面的渲染。

本发明实施例的技术方案，页面客户端通过获取与接收到的页面渲染指令对应的预渲染页面，并对预渲染页面进行读取；当读取到预渲染页面中的目标资源文件信息时，可以确定本地中是否缓存有与目标资源文件信息对应的目标资源文件，该目标资源文件可以是多个功能项目中的至少两个功能项目在运行时需要的资源文件；如果是，则可以从页面客户端中获取目标资源文件；进而，根据目标资源文件向页面服务端进行数据请求，然后根据数据请求结果进行与页面渲染指令对应的待渲染页面的渲染。上述技术方案，在多微服务架构下，通过将目标资源文件从各功能项目中抽离出来，并将它们拉取到本地中以让各功能项目命中缓存进行应用的方式，可以让同一目标资源文件的单次拉取满足多个功能项目间的应用，由此无需从资源服务端重复获取该同一目标资源文件，减少了网络请求时间消耗，加快了目标资源文件的获取速度，进一步加快了与目标资源文件相关的数据的获取速度，最终可以在预渲染页面的基础上快速地渲染出对于用户而言的真实有效的数据(即将数据请求结果替换预渲染页面中的预设数据)，达到了缩短页面渲染时间的效果。

一种可选的技术方案，各目标资源文件存储在资源服务端的同一资源存储区域中，上述页面渲染方法，还可以包括：否则，从资源存储区域中获取目标资源文件，并将获取到的目标资源文件缓存到页面客户端中。其中，由于抽离出来的目标资源文件可以存储在资源服务端的同一资源存储区域中，因此当某目标资源文件未缓存在本地时，这说明先前还没有功能项目对其进行过应用，此时可以从该同一资源存储区域中获取该目标资源文件，然后再将获取到的该目标资源文件缓存在本地中，以便其余需要对其进行应用的功能项目可以通过命中缓存的方式获取得到。

在介绍本发明实施例二之前，先对其的应用场景进行示例性说明：预渲染页面可以是由页面客户端在打包工程中生成，然后存储到页面服务端中的页面，因此页面客户端在接收到页面渲染指令时，其需要从页面服务端中获取预渲染页面。这意味着，虽然预渲染页面无需执行编译，但是仍需要通过页面客户端发起HTTP请求以将整个预渲染页面传输完成后才能获取得到。由于该HTTP请求始终存在网络传输的限制，在弱网或是无网的情况下，页面客户端均无法从页面服务端中快速拉取到预渲染页面。

实施例二

图3是本发明实施例二中提供的一种页面渲染方法的流程图。本实施例以上述各技术方案为基础进行优化。在本实施例中，可选的，上述页面渲染方法，还可包括：在页面客户端被启动时，确定页面客户端中各功能项目的需预渲染的首屏页面，其中，预渲染页面属于首屏页面；若页面客户端中未缓存有首屏页面，则从页面服务端中获取首屏页面，并将获取得到的首屏页面缓存在页面客户端中；获取与页面渲染指令对应的预渲染页面，可以包括：根据页面渲染指令确定待获取的预渲染页面，并从页面客户端中获取预渲染页面。其中，与上述各实施例相同或相应的术语的解释在此不再赘述。

参见图3，本实施例的方法具体可以包括如下步骤：

S210、在页面客户端被启动时，确定页面客户端中各功能项目的需预渲染的首屏页面，其中预渲染页面属于首屏页面。

其中，某功能项目的首屏页面可以是该功能项目被跳转到时首个展示出来的页面，即需要在先前被预渲染的页面。实际应用中，可选的，首屏页面可以根据预先配置后的配置信息确定，该配置信息中可以存储有各首屏页面的路由地址，该路由地址也可以称为统一资源定位符(Uniform Resource Locator，URL)。

S220、如果页面客户端中未缓存有首屏页面，则从页面服务端中获取首屏页面，并将获取到的首屏页面缓存在页面客户端中。

其中，当确定出首屏页面是哪些页面后，可以先确定一下本地中是否缓存有首屏页面，如果否，则可以从页面服务端中获取首屏页面，并将它们缓存到本地中。换言之，可以在网络较好的情况下提前拉取首屏页面，并将它们缓存到本地中，由此后续在需要获取任一首屏页面时，可以直接从本地缓存中获取得到，由此屏蔽了网络层面对于预渲染页面(首屏页面中的一种)的获取速度的影响。

S230、在接收到页面渲染指令时，根据页面渲染指令确定待获取的预渲染页面，并从页面客户端中获取预渲染页面，读取预渲染页面，其中预渲染页面内记载有目标资源文件信息。

S240、当读取到目标资源文件信息时，确定在页面客户端中是否缓存有与目标资源文件信息对应的目标资源文件，其中，目标资源文件是多个功能项目中的至少两个功能项目在运行时需要的资源文件。

S250、如果是，则从页面客户端中获取目标资源文件。

S260、根据目标资源文件向页面服务端进行数据请求，根据数据请求结果进行与页面渲染指令对应的待渲染页面的渲染。

本发明实施例的技术方案，当启动页面客户端时，先确定页面客户端中的各功能项目的需预渲染的首屏页面；若在页面客户端中未缓存有某首屏页面，则从页面服务端中获取该首屏页面，并将获取到的首屏页面缓存在页面客户端中；由此，后续在需要获取预渲染页面(即各首屏页面中的一个)时，可以从本地缓存中直接获取得到，由此解决了因为网络出现波动而影响到预渲染页面的获取速度的问题。

一种可选的技术方案，上述页面渲染方法，还可以包括：如果页面客户端中缓存有首屏页面，则获取存储在页面服务端中的首屏页面的当前版本号、及缓存在页面客户端中的首屏页面的历史版本号，并确定当前版本号和历史版本号是否相同；如果否，则从页面服务端中获取首屏页面，并基于获取到的首屏页面对缓存在页面客户端中的首屏页面进行更新。其中，考虑到功能项目存在更新的情况，那么在更新前缓存到本地中的首屏页面已经不再适合于更新后的功能项目，而且页面服务端中永远存储有最新版本的首屏页面。因此，当本地中缓存有某首屏页面时，可以获取存储在页面服务端中的首屏页面的当前版本号、及缓存在页面客户端中的首屏页面的历史版本号，当二者相同时，这说明缓存在本地中的首屏页面就是最新版本的首屏页面，其适配于当前的功能项目；否则，说明缓存在本地中的首屏页面不是最新版本的首屏页面，其不再适配于当前的功能项目，此时可以从页面服务端中获取最新版本的首屏页面，并基于获取结果进行本地缓存中首屏页面的更新，由此保证了后续从本地缓存中获取到的首屏页面和当前的功能项目的匹配性。

在介绍本发明实施例三之前，先对其的应用场景进行示例性说明：预渲染页面可以是页面客户端在打包过程中产生的页面，其的页面样式通常是固定的，无法适配于不同终端型号的兼容性显示。示例性的，以终端是手机为例，目前市场中主流的手机机型的系统为ios和安卓，二者在刘海屏幕的设置上存在一定的区别。以页面样式是安卓样式为例，如果是集成在系统为ios的手机上的页面客户端获取到预渲染页面，那么该页面客户端可以执行如下操作：根据预渲染页面向页面服务端进行数据请求，根据数据请求结果渲染出安卓样式的待渲染页面；与此同时，根据预渲染页面确定待获取的javascript文件(即js文件)，从页面服务端或是本地中获取js文件，并对获取得到的js文件进行调用，当js文件中记载有根据手机机型修改页面样式的脚本时，可以根据文件调用结果对页面样式进行修改以进行手机机型适配。需要说明的是，由于js文件很大，且当页面客户端对js文件中的各脚本均读取完毕后，其方能对其执行调用操作，这意味着当安卓样式的待渲染页面已被展示出来后，js文件方被调用，即ios的手机上可能会先展示出安卓样式的待渲染页面，然后再被刷新为ios样式的待渲染页面，再即页面样式先异常展示再正常展示，用户体验不佳。

实施例三

图4是本发明实施例三中提供的一种页面渲染方法的流程图。本实施例以上述各技术方案为基础进行优化。本实施例中，可选的，预渲染页面内还记载有页面样式信息和页面样式修改脚本，上述页面渲染方法，还可包括：当读取到页面样式信息时，根据页面样式信息向页面服务端进行数据请求，接收页面服务端返回的页面样式数据；当读取到页面样式修改脚本时，执行页面样式修改脚本以对页面样式数据进行修改；根据数据修改结果进行待渲染页面的渲染。其中，与上述各实施例相同或相应的术语的解释在此不再赘述。

参见图4，本实施例的方法具体可以包括如下步骤：

S310、在接收到页面渲染指令时，获取与页面渲染指令对应的预渲染页面，并读取预渲染页面，其中，预渲染页面内记载有目标资源文件信息、页面样式信息和页面样式修改脚本。

其中，页面样式信息可以是与待渲染页面的页面样式有关的数据信息，如与页面高度、字体大小等有关的数据信息；页面样式修改脚本可以包括用于对获取到的与页面样式信息对应的页面样式数据进行修改的脚本，其内可以包括用于判断获取到的页面样式数据是否适配于配置有页面客户端的终端的逻辑。在实际应用中，可选的，相较于页面样式修改脚本，页面样式信息可以是先被读取得到的信息，由此可以避免出现在页面客户端还未获取到页面样式数据时，页面样式修改脚本已被执行而需要对页面样式数据进行修改的情况。

S320、当读取到目标资源文件信息时，确定在页面客户端中是否缓存有与目标资源文件信息对应的目标资源文件，其中，目标资源文件是多个功能项目中的至少两个功能项目在运行时需要的资源文件。

S330、如果是，则从页面客户端中获取目标资源文件。

S340、根据目标资源文件向页面服务端进行数据请求，根据数据请求结果进行与页面渲染指令对应的待渲染页面的渲染。

S350、当读取到页面样式信息时，根据该页面样式信息向页面服务端进行数据请求，接收页面服务端返回的页面样式数据。

S360、当读取到页面样式修改脚本时，执行该页面样式修改脚本以对页面样式数据进行修改，并根据数据修改结果进行待渲染页面的渲染。

其中，为了解决上文中阐述的先异常展示页面样式，再正常展示页面样式的问题，可以预先对预渲染页面进行修改，将从js文件中抽离出来的页面样式修改脚本添加到预渲染页面中，因此页面客户端获取得到的预渲染页面内包括页面样式修改脚本。需要强调的是，相对于js文件，页面样式修改脚本非常小，即其可以很快地读取并执行完毕，而且当页面客户端对预渲染页面内的各数据信息均读取完毕后，与预渲染页面对应的待渲染页面才能渲染出来，这意味着当页面客户端已获取到页面样式数据且还未读取完毕全部的数据信息时，页面样式修改脚本已被读取并执行完毕，那么后续页面客户端渲染出的待渲染页面已是页面样式被修改过的页面，即首次展示的即为页面样式正常的待渲染页面。

在实际应用中，可选的，预渲染页面中的各数据信息可以存储在撰写于id＝app中的DOM节点内，其中id＝app可以理解为预渲染页面中的一个段落，其内包括可用于存储数据信息的DOM节点。在此基础上，经实验验证，页面样式修改脚本可以添加在预渲染页面的底部，由此可以在先渲染DOM节点后再对页面样式数据进行修改。

本发明实施例的技术方案，通过在预先将页面样式修改脚本添加到预渲染页面中，由此页面客户端读取到页面样式信息时，可以获取到与页面样式信息对应的页面样式数据；进而在读取到页面样式修改脚本时，可以执行页面样式修改脚本以对页面样式数据进行修改，由于页面样式修改脚本很小，其可以在整个预渲染页面读取完毕之前执行完毕，因此后续页面客户端进行页面渲染时，是根据修改后的页面样式数据进行，由此可以适配不同终端型号，达到了直接展示出与终端型号匹配的页面样式的待渲染页面的效果，具有较好的兼容性。

一种可选的技术方案，页面样式修改脚本在被执行时进行如下操作：确定与页面样式数据适配的第一终端型号，并且获取页面客户端所在的终端的第二终端型号；若第一终端型号和第二终端型号不同，则确定与第二终端型号适配的目标样式数据，并根据目标样式数据对页面样式数据进行修改，由此保证了后续能够渲染出与页面客户端所在的终端在页面样式上适配的待渲染页面。

实施例四

图5是本发明实施例四中提供的一种页面渲染方法的流程图。本实施例以上述各技术方案为基础进行优化。在本实施例中，可选的，上述页面渲染方法，还可以包括：在接收到页面预渲染指令时，获取与页面预渲染指令对应的路由地址，通过启动浏览器来模拟打开具有路由地址的待进行预渲染的预渲染页面，对待进行预渲染的预渲染页面进行预渲染；根据预渲染结果获取数据信息，并根据数据信息生成预渲染页面，将已生成的预渲染页面发送给页面服务端；相应的，获取与页面渲染指令对应的预渲染页面，可包括：从页面服务端中获取与页面渲染指令对应的预渲染页面。其中，与上述各实施例相同或相应的术语的解释在此不再赘述。

参见图5，本实施例的方法具体可以包括如下步骤：

S410、在接收到页面预渲染指令时，获取页面预渲染指令对应的路由地址，并通过启动浏览器来模拟打开具有路由地址的待进行预渲染的预渲染页面，对待进行预渲染的预渲染页面进行预渲染。

其中，页面预渲染指令可以是在打包过程中接收到的用于进行页面预渲染的指令；路由地址可以表示出需要进行预渲染的页面的地址，在实际应用中，可选的，其可以通过读取配置在页面客户端中的配置信息获取得到。当获取到路由地址后，可以通过启动设置在页面客户端内的浏览器来模拟打开具有路由地址的待进行预渲染的预渲染页面的过程，由此完成了待进行预渲染的预渲染页面的预渲染过程。在实际应用中，可选的，上述浏览器可以是无头浏览器(headless browser)，具体来说可以是chrome内核浏览器，其通过访问配置了预渲染的路由地址来匹配对应的路由脚本，然后基于路由脚本动态地预渲染出预渲染页面内的各种数据信息。

S420、根据预渲染结果获取数据信息，并根据数据信息生成预渲染页面，将已生成的预渲染页面发送给页面服务端。

其中，数据信息可以是待存储在预渲染页面中的信息，因此可以根据数据信息生成预渲染页面。在实际应用过程中，可选的，其可以是将数据信息保存在DOM节点中，并根据保存结果生成预渲染页面，示例性的，如图6所示。然后，将已生成的预渲染页面发送到页面服务端，以便后续可以从页面服务端中获取到该预渲染页面。

S430、在接收到页面渲染指令时，从页面服务端获取与页面渲染指令对应的预渲染页面，并读取预渲染页面，其中，预渲染页面内记载有目标资源文件信息。

S440、当读取到目标资源文件信息时，确定在页面客户端中是否缓存有与目标资源文件信息对应的目标资源文件，其中，目标资源文件是多个功能项目中的至少两个功能项目在运行时需要的资源文件。

S450、如果是，则从页面客户端中获取目标资源文件。

S460、根据目标资源文件向页面服务端进行数据请求，根据数据请求结果进行与页面渲染指令对应的待渲染页面的渲染。

本发明实施例的技术方案，获取与接收的页面预渲染指令对应的路由地址，由此可以通过启动浏览器来模拟打开具有该路由地址的待进行预渲染的预渲染页面以进行预渲染；然后，根据预渲染结果获取数据信息，根据数据信息生成预渲染页面，并将已生成的预渲染页面发送给页面服务端，由此后续可以从该页面服务端中获取相应的预渲染页面，达到了预渲染页面的有效生成的效果。

一种可选的技术方案，预渲染页面存储在页面服务端中与路由地址对应的第一文件夹下，预先设置的通用空白页面存储在页面服务端的第二文件夹下；从页面服务端获取与页面渲染指令对应的预渲染页面，可包括：将与页面渲染指令对应的页面请求发送给页面服务端，以使页面服务端确定是否存在与页面请求对应的预渲染页面，如果是，则确定页面请求对应的路由地址，并将存储在路由地址对应的第一文件夹下的预渲染页面返回给页面客户端，否则将存储在第二文件夹下的通用空白页面返回给页面客户端；接收页面服务端返回的预渲染页面。

其中，针对于每个功能项目，其可能包括至少两个需要进行预渲染的首屏页面。示例性的，以某理财售前项目为例，其对外暴露出理财产品列表页面和理财产品详情页面这两个入口(即路由地址)，即其余的功能项目可以从这两个入口中的任一入口跳转到理财售前项目中。当跳转入口不同时，理财售前项目展示出的首屏页面也并不相同，因此需要对理财产品列表页面和理财产品详情页面这两个首屏页面分别进行预渲染，并且将由此得到的预渲染页面分别存储在与各自的路由地址对应的第一文件夹下，由此在后续跳转时能够展示出相应的预渲染页面，即有效保证了在通过不同的路由地址跳转到同一功能项目时，可以获取到不同的预渲染页面。除此外，在实际应用中有可能出现未成功对某首屏页面进行预渲染的情况，因此可以预先准备可以适用于各功能项目的通用空白页面。而且，由于通用空白页面可以适配于各功能项目，为了避免其与各功能项目下的预渲染页面的混淆，可以将其单独存储到第二文件夹下。

在此基础上，页面请求可以是由页面客户端发送的与页面渲染指令对应的用于请求预渲染页面的请求，页面服务端可以根据接收到的页面请求确定是否存在相应的预渲染页面，如根据页面请求中的路由地址和预先配置的配置信息确定。如果存在，则可以将与路由地址对应的第一文件夹下的预渲染页面返回给页面客户端，由此达到了将与路由地址匹配的预渲染页面返回给页面客户端的效果；否则，可以将存在第二文件夹下的通用空白页面作为预渲染页面返回给页面客户端，由此在各种情况下，页面客户端均能成功获取到预渲染页面。

实施例五

图7为本发明实施例五提供的页面渲染装置的结构框图，该装置用于执行上述任意实施例所提供的页面渲染方法。该装置与上述各实施例的页面渲染方法属于同一个发明构思，在页面渲染装置的实施例中未详尽描述的细节内容，可以参考上述页面渲染方法的实施例。参见图7，该装置配置于页面客户端，该页面客户端包括多个功能项目，该装置具体可包括：预渲染页面读取模块510、目标资源文件确定模块520、目标资源文件获取模块530以及待渲染页面渲染模块540。

其中，预渲染页面读取模块510，用于在接收到页面渲染指令时，获取与页面渲染指令对应的预渲染页面，并读取预渲染页面，其中预渲染页面内记载有目标资源文件信息；

目标资源文件确定模块520，用于当读取到目标资源文件信息时，确定在页面客户端中是否缓存有与目标资源文件信息对应的目标资源文件，其中目标资源文件是多个功能项目中的至少两个功能项目在运行时需要的资源文件；

目标资源文件获取模块530，用于若是，则从页面客户端中获取目标资源文件；

待渲染页面渲染模块540，用于根据目标资源文件向页面服务端进行数据请求，并根据数据请求结果进行与页面渲染指令对应的待渲染页面的渲染。

在此基础上，可选的，各目标资源文件存储在资源服务端的同一资源存储区域中，上述页面渲染装置，还可以包括：

目标资源文件缓存模块，用于否则，从资源存储区域中获取目标资源文件，并将获取到的目标资源文件缓存到页面客户端中。

可选的，上述页面渲染装置，还可以包括：

首屏页面确定模块，用于页面客户端被启动时，确定页面客户端中各功能项目的需预渲染的首屏页面，其中预渲染页面属于首屏页面；

首屏页面缓存模块，用于如果页面客户端中未缓存有首屏页面，则从页面服务端中获取首屏页面，并将获取到的首屏页面缓存在页面客户端中；

相应的，预渲染页面读取模块510，可以包括：

第一预渲染页面获取单元，用于根据页面渲染指令确定出待获取的预渲染页面，并从页面客户端中获取预渲染页面。

可选的，在上述装置的基础上，该装置还可以包括：

版本号确定模块，用于如果页面客户端中缓存有首屏页面，则获取存储在页面服务端中的首屏页面的当前版本号、以及缓存在页面客户端中的首屏页面的历史版本号，并确定当前版本号和历史版本号是否相同；

首屏页面更新模块，用于如果否，则从页面服务端中获取首屏页面，基于获取到的首屏页面对缓存在页面客户端中的首屏页面进行更新。

可选的，预渲染页面内还记载有页面样式信息和页面样式修改脚本，上述页面渲染装置，还可以包括：

页面样式数据接收模块，用于读取到页面样式信息时，根据页面样式信息向页面服务端进行数据请求，接收页面服务端返回的页面样式数据；

页面样式数据修改模块，用于读取到页面样式修改脚本时，执行页面样式修改脚本以对页面样式数据进行修改；

待渲染页面再渲染模块，用于根据数据修改结果进行待渲染页面的渲染。

在此基础上，可选的，页面样式修改脚本通过如下单元实现页面样式数据的修改功能：

终端型号确定单元，用于确定与页面样式数据适配的第一终端型号，并且获取页面客户端所在的终端的第二终端型号；

页面样式数据修改单元，用于如果第一终端型号和第二终端型号不同，则确定与第二终端型号适配的目标样式数据，根据目标样式数据对页面样式数据进行修改。

可选的，上述页面渲染装置，还可以包括：

预渲染页面预渲染模块，用于接收到页面预渲染指令时，获取与页面预渲染指令对应的路由地址，并通过启动浏览器来模拟打开具有路由地址的待进行预渲染的预渲染页面，对待进行预渲染的预渲染页面进行预渲染；

预渲染页面发送模块，用于根据预渲染结果获取数据信息，根据数据信息生成预渲染页面，将已生成的预渲染页面发送给页面服务端；

相应的，预渲染页面读取模块510，可以包括：

第二预渲染页面获取单元，用于从页面服务端中获取与页面渲染指令对应的预渲染页面。

在此基础上，可选的，预渲染页面存储在页面服务端中与路由地址对应的第一文件夹下，预先设置的通用空白页面存储在页面服务端的第二文件夹下；第二预渲染页面获取单元，具体可以用于：

将与页面渲染指令对应的页面请求发送给页面服务端，以使该页面服务端确定是否存在与页面请求对应的预渲染页面，如果是，则确定页面请求对应的路由地址，并将存储在路由地址对应的第一文件夹下的预渲染页面返回给页面客户端，否则，将存储在第二文件夹下的通用空白页面作为预渲染页面返回给页面客户端；

接收页面服务端返回的预渲染页面。

本发明实施例五所提供的页面渲染装置，页面客户端通过预渲染页面读取模块获取与接收到的页面渲染指令对应的预渲染页面，对预渲染页面进行读取；通过目标资源文件确定模块读取到预渲染页面中的目标资源文件信息时，可以确定本地中是否缓存有与目标资源文件信息对应的目标资源文件，该目标资源文件可以是多个功能项目中至少两个功能项目在运行时需要的资源文件；通过目标资源文件获取模块若是，则可以从页面客户端中获取目标资源文件；进而，通过待渲染页面渲染模块根据目标资源文件向页面服务端进行数据请求，然后根据数据请求结果进行与页面渲染指令对应的待渲染页面的渲染。上述装置，在多微服务架构下，通过将目标资源文件从各功能项目中抽离出来，并将它们拉取到本地中以让各功能项目命中缓存进行应用的方式，可以让同一目标资源文件的单次拉取满足多个功能项目间的应用，由此无需从资源服务端重复获取该同一目标资源文件，减少了网络请求时间消耗，加快了目标资源文件的获取速度，进一步加快了与目标资源文件相关的数据的获取速度，最终可以在预渲染页面的基础上快速地渲染出对于用户而言的真实有效的数据(即将数据请求结果替换预渲染页面中的预设数据)，达到了缩短页面渲染时间的效果。

本发明实施例所提供的页面渲染装置可执行本发明任意实施例所提供的页面渲染方法，具备执行方法相应的功能模块和有益效果。

值得注意的是，上述页面渲染装置的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

实施例六

图8为本发明实施例六提供的一种终端的结构示意图，如图8所示，该终端包括存储器610、处理器620、输入装置630和输出装置640。终端中的处理器620的数量可以是一个或多个，图8中以一个处理器620为例；终端中的存储器610、处理器620、输入装置630和输出装置640可以通过总线或其它方式连接，图8中以通过总线650连接为例。

存储器610作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本发明实施例中的页面渲染方法对应的程序指令/模块(例如，页面渲染装置中的预渲染页面读取模块510、目标资源文件确定模块520、目标资源文件获取模块530和待渲染页面渲染模块540)。处理器620通过运行存储在存储器610中的软件程序、指令以及模块，从而执行终端的各种功能应用以及数据处理，即实现上述的页面渲染方法。

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

输入装置630可用于接收输入的数字或字符信息，以及产生与装置的用户设置以及功能控制有关的键信号输入。输出装置640可包括显示屏等显示设备。

实施例七

本发明实施例七提供一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行一种页面渲染方法，该方法应用于页面客户端，页面客户端包括多个功能项目，该方法包括：

在接收到页面渲染指令时，获取与页面渲染指令对应的预渲染页面，读取预渲染页面，其中，预渲染页面内记载有目标资源文件信息；

当读取到目标资源文件信息时，确定页面客户端中是否缓存有与目标资源文件信息对应的目标资源文件，其中，目标资源文件是多个功能项目中的至少两个功能项目在运行时需要的资源文件；

如果是，则从页面客户端中获取目标资源文件；

根据目标资源文件向页面服务端进行数据请求，并根据数据请求结果进行与页面渲染指令对应的待渲染页面的渲染。

当然，本发明实施例所提供的一种包含计算机可执行指令的存储介质，其计算机可执行指令不限于如上所述的方法操作，还可以执行本发明任意实施例所提供的页面渲染方法中的相关操作。

通过以上关于实施方式的描述，所属领域的技术人员可以清楚地了解到，本发明可借助软件及必需的通用硬件来实现，当然也可以通过硬件实现，但很多情况下前者是更佳的实施方式。依据这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如计算机的软盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(RandomAccess Memory,RAM)、闪存(FLASH)、硬盘或光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (11)

1.一种页面渲染方法，其特征在于，应用于页面客户端，所述页面客户端包括多个功能项目，所述方法包括：

在接收到页面渲染指令时，获取与所述页面渲染指令对应的预渲染页面，并读取所述预渲染页面，其中，所述预渲染页面内记载有目标资源文件信息；

当读取到所述目标资源文件信息时，确定所述页面客户端中是否缓存有与所述目标资源文件信息对应的目标资源文件，其中，所述目标资源文件是所述多个功能项目中的至少两个所述功能项目在运行时需要的资源文件；

如果是，则从所述页面客户端中获取所述目标资源文件；

根据所述目标资源文件向页面服务端进行数据请求，并根据数据请求结果进行与所述页面渲染指令对应的待渲染页面的渲染。

2.根据权利要求1所述的方法，其特征在于，各所述目标资源文件存储在资源服务端的同一资源存储区域中，所述方法还包括：

否则，从所述资源存储区域中获取所述目标资源文件，并将获取到的所述目标资源文件缓存到所述页面客户端中。

3.根据权利要求1所述的方法，其特征在于，还包括：

在所述页面客户端被启动时，确定所述页面客户端中各所述功能项目的需预渲染的首屏页面，其中所述预渲染页面属于所述首屏页面；

若所述页面客户端中未缓存有所述首屏页面，则从所述页面服务端中获取所述首屏页面，并将获取到的所述首屏页面缓存在所述页面客户端中；

所述获取与所述页面渲染指令对应的预渲染页面，包括：

根据所述页面渲染指令确定待获取的预渲染页面，并从所述页面客户端中获取所述预渲染页面。

4.根据权利要求3所述的方法，其特征在于，还包括：

如果所述页面客户端中缓存有所述首屏页面，则获取存储在所述页面服务端中的所述首屏页面的当前版本号、以及缓存在所述页面客户端中的所述首屏页面的历史版本号，并确定所述当前版本号和所述历史版本号是否相同；

如果否，则从所述页面服务端中获取所述首屏页面，并基于获取到的所述首屏页面对所述缓存在所述页面客户端中的所述首屏页面进行更新。

5.根据权利要求1所述的方法，其特征在于，所述预渲染页面内还记载有页面样式信息和页面样式修改脚本，所述方法还包括：

当读取到所述页面样式信息时，根据所述页面样式信息向所述页面服务端进行数据请求，接收所述页面服务端返回的页面样式数据；

当读取到所述页面样式修改脚本时，执行所述页面样式修改脚本以对所述页面样式数据进行修改；

根据数据修改结果进行所述待渲染页面的渲染。

6.根据权利要求5所述的方法，其特征在于，所述页面样式修改脚本在被执行时进行如下操作：

确定与所述页面样式数据适配的第一终端型号，并且获取所述页面客户端所在的终端的第二终端型号；

如果所述第一终端型号和所述第二终端型号不同，则确定与所述第二终端型号适配的目标样式数据，并根据所述目标样式数据对所述页面样式数据进行修改。

7.根据权利要求1所述的方法，其特征在于，还包括：

在接收到页面预渲染指令时，获取与所述页面预渲染指令对应的路由地址，并通过启动浏览器来模拟打开具有所述路由地址的待进行预渲染的所述预渲染页面，对所述待进行预渲染的所述预渲染页面进行预渲染；

根据预渲染结果获取数据信息，并根据所述数据信息生成所述预渲染页面，将已生成的所述预渲染页面发送给所述页面服务端；

所述获取与所述页面渲染指令对应的预渲染页面，包括：

从所述页面服务端中获取与所述页面渲染指令对应的预渲染页面。

8.根据权利要求7所述的方法，其特征在于，所述预渲染页面存储在所述页面服务端中与所述路由地址对应的第一文件夹下，预先设置的通用空白页面存储在所述页面服务端的第二文件夹下；

所述从所述页面服务端中获取与所述页面渲染指令对应的预渲染页面包括：

将与所述页面渲染指令对应的页面请求发送给所述页面服务端，以使所述页面服务端确定是否存在与所述页面请求对应的所述预渲染页面，如果是，则确定所述页面请求对应的所述路由地址，并将存储在所述路由地址对应的所述第一文件夹下的所述预渲染页面返回给所述页面客户端，否则，将存储在所述第二文件夹下的所述通用空白页面作为所述预渲染页面返回给所述页面客户端；

接收所述页面服务端返回的所述预渲染页面。

9.一种页面渲染装置，其特征在于，配置于页面客户端，所述页面客户端包括多个功能项目，所述装置包括：

预渲染页面读取模块，用于接收到页面渲染指令时，获取与所述页面渲染指令对应的预渲染页面，并读取所述预渲染页面，其中所述预渲染页面内记载有目标资源文件信息；

目标资源文件确定模块，用于读取到所述目标资源文件信息时，确定所述页面客户端中是否缓存有与所述目标资源文件信息对应的目标资源文件，其中，所述目标资源文件包括所述多个功能项目中的至少两个所述功能项目在运行时需要的资源文件；

目标资源文件获取模块，用于如果是，则从所述页面客户端中获取到所述目标资源文件；

待渲染页面渲染模块，用于根据所述目标资源文件向页面服务端进行数据请求，并根据数据请求结果进行与所述页面渲染指令对应的待渲染页面的渲染。

10.一种终端，其特征在于，包括：

一个或多个处理器；

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

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-8中任一所述的页面渲染方法。

11.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-8中任一所述的页面渲染方法。

Images