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

Abstract

本公开公开了一种小程序页面渲染方法、装置、电子设备及存储介质，涉及互联网技术领域，尤其涉及小程序领域。具体实现方案为：基于预先得到的小程序页面的首次绘制结果，对小程序页面进行原始增量渲染，得到小程序页面的原始增量渲染结果；基于小程序页面的首次绘制结果、小程序页面的原始增量渲染结果以及预先得到的小程序页面的初始增量渲染结果，对小程序页面进行渲染。本申请实施例可以大大加快小程序页面加载速度，提升页面性能，优化用户体验。

Description

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

技术领域

本公开涉及互联网技术领域，进一步涉及小程序技术，尤其涉及一种小程序页面渲染方法、装置、电子设备及存储介质。

背景技术

在小程序的开发模式中，开发者可以给应用程序(App)和页面(Page)注册固定的回调函数，小程序会按照既定的规则去触发运行开发者所注册的回调函数，由这些回调函数组成小程序的生命周期。小程序在App级别和Page级别都有固定的生命周期；其中，对于Page级别的生命周期，目前业界主要有：监听页面加载函数(onLoad)、监听页面显示函数(onShow)、监听页面初次渲染完成函数(onReady)、监听页面卸载(onUnload)。在小程序页面首次启动加载的时候，小程序框架会按照onLoad、onShow、onReady的顺序执行其中这三个生命周期的回调函数。

在首次加载页面时，往往需要在第一个生命周期函数中去发起网络请求等相关操作，来获取当前页面需要展现的数据，并调用小程序中渲染数据的setData这个API进行数据的渲染，最终将完整的内容展现在页面上。传统方式会在onLoad这个生命周期中发起网络请求，但是onLoad需要等页面的初始数据加载渲染好才能触发执行，也就是说，只有等渲染线程完成首次绘制并将绘制结果回传给逻辑线程后，逻辑线程才会触发执行onLoad，这样onLoad的触发时机就会比较晚，导致严重拖慢最终页面内容的渲染，影响用户体验。

发明内容

本申请提供了一种小程序页面渲染方法、装置、电子设备及存储介质，可以大大加快小程序页面加载速度，提升页面性能，优化用户体验。

根据本申请的第一方面，提供了一种小程序页面渲染方法，所述方法包括：

基于预先得到的小程序页面的首次绘制结果，对所述小程序页面进行原始增量渲染，得到所述小程序页面的原始增量渲染结果；

基于所述小程序页面的首次绘制结果、所述小程序页面的原始增量渲染结果以及预先得到的所述小程序页面的初始增量渲染结果，对所述小程序页面进行渲染。

根据本申请的第二方面，提供了一种小程序页面渲染装置，所述装置包括：增量绘制模块和渲染模块；其中，

所述增量绘制模块，用于基于预先得到的小程序页面的首次绘制结果，对所述小程序页面进行原始增量渲染，得到所述小程序页面的原始增量渲染结果；

所述渲染模块，用于基于所述小程序页面的首次绘制结果、所述小程序页面的原始增量渲染结果以及预先得到的所述小程序页面的初始增量渲染结果，对所述小程序页面进行渲染。

根据本申请的第三方面，提供了一种电子设备，包括：

一个或多个处理器；

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

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

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

根据本申请的第五方面，提供了一种计算机程序产品，当所述计算机程序产品被计算机设备执行时实现本申请任意实施例所述的小程序页面渲染方法。

根据本申请的技术解决了现有技术中只有等渲染线程完成首次绘制并将绘制结果回传给逻辑线程后，逻辑线程才会触发执行onLoad，这样onLoad的触发时机就会比较晚，导致严重拖慢最终页面内容的渲染，影响用户体验的技术问题，本申请提供的技术方案，可以大大加快小程序页面加载速度，提升页面性能，优化用户体验。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

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

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

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

图3是本申请实施例提供的生命周期的启动流程示意图；

图4是本申请实施例提供的小程序页面渲染效果的示意图；

图5是本申请实施例提供的小程序页面渲染装置的结构示意图；

图6是用来实现本申请实施例的小程序页面加载方法的电子设备的框图。

具体实施方式

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

实施例一

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

S101、基于预先得到的小程序页面的首次绘制结果，对小程序页面进行原始增量渲染，得到小程序页面的原始增量渲染结果。

在本步骤中，电子设备可以基于预先得到的小程序页面的首次绘制结果，对小程序页面进行原始增量渲染，得到小程序页面的原始增量渲染结果。具体地，电子设备可以基于预先得到的小程序页面的首次绘制结果，先生成触发对小程序页面进行原始增量渲染的消息；然后基于触发对小程序页面进行原始增量渲染的消息，对小程序页面进行原始增量绘制渲染，得到小程序页面的原始增量渲染结果。

在本申请的具体实施例中，电子设备在基于预先得到的小程序页面的首次绘制结果，对小程序页面进行原始增量渲染，得到小程序页面的原始增量渲染结果之前，还可以预先得到小程序页面的首次绘制结果。具体地，电子设备可以响应于用户打开小程序页面的指令，分别加载小程序页面的逻辑代码和页面样式文件，得到小程序页面的逻辑代码的加载结果和小程页面的页面样式文件的加载结果；然后在小程序页面的逻辑代码的加载结果中提取用于渲染小程序页面的初始数据；再基于小程序页面的页面样式文件的加载结果和用于渲染小程序页面的初始数据，对小程序页面进行首次绘制，得到小程序页面的首次绘制结果。

小程序的底层框架是双线程架构，该双线程架构包括：逻辑线程和渲染线程；其中，逻辑线程用来执行小程序开发者编写的代码；渲染线程用来渲染展示用户可见的内容。小程序在启动后，小程序的底层框架会按照规则去触发小程序页面的生命周期，该生命周期中包含开发者编写的代码。在本申请的具体实施例中，电子设备可以响应于用户打开小程序页面的指令，通过渲染线程对小程序页面进行首次绘制，得到小程序页面的首次绘制结果。具体地，电子设备可以先通过逻辑线程和渲染线程分别加载小程序页面的逻辑代码和页面样式文件，得到小程序页面的逻辑代码的加载结果和小程页面的页面样式文件的加载结果；然后通过逻辑线程在小程序页面的逻辑代码的加载结果中提取用于渲染小程序页面的初始数据；并通过逻辑线程将用于渲染小程序页面的初始数据发送至渲染线程；再基于小程序页面的页面样式文件的加载结果和用于渲染小程序页面的初始数据，通过渲染线程对小程序页面进行首次绘制，得到小程序页面的首次绘制结果。

S102、基于小程序页面的首次绘制结果、小程序页面的原始增量渲染结果以及预先得到的小程序页面的初始增量渲染结果，对小程序页面进行渲染。

在本步骤中，电子设备可以基于小程序页面的首次绘制结果、小程序页面的原始增量渲染结果以及预先得到的小程序页面的初始增量渲染结果，对小程序页面进行渲染。具体地，本申请将原本在onLoad中执行的代码可以划分为两部分，即保留在onLoad中的代码和在onInit中预先执行的代码；其中，在onInit中预先执行的代码是不依赖于首次绘制结果即可执行的，而保留在onLoad中的代码是要依赖于首次绘制结果才可以执行的。所以本申请可以将不依赖于首次绘制结果的代码预先执行，这样就不必将依赖于首次绘制结果的代码和不依赖于首次绘制结果的代码全部放在onLoad中执行，所以相比于现有技术本申请可以明显地缩短页面渲染时间，提高加载效率。

本申请实施例提出的小程序页面渲染方法，先基于预先得到的小程序页面的首次绘制结果，对小程序页面进行原始增量渲染，得到小程序页面的原始增量渲染结果；然后基于小程序页面的首次绘制结果、小程序页面的原始增量渲染结果以及预先得到的小程序页面的初始增量渲染结果，对小程序页面进行渲染。也就是说，本申请可以预先得到小程序页面的初始增量渲染结果，然后基于小程序页面的首次绘制结果、小程序页面的原始增量渲染结果以及小程序页面的初始增量渲染结果，对小程序页面进行渲染。本申请在现有的由onLoad、onShow、onReady和onUnload所组成的生命周期中增加了一个函数onInit，通过onInit可以将onLoad中的一部分代码预先执行，而不必将依赖于首次绘制结果的代码和不依赖于首次绘制结果的代码全部放在onLoad中执行。而在现有的小程序页面渲染方法中，将依赖于首次绘制结果的代码和不依赖于首次绘制结果的代码全部放在onLoad中执行。因为本申请采用了通过onInit预先执行不依赖于首次绘制结果的代码的技术手段，克服了现有技术中只有等渲染线程完成首次绘制并将绘制结果回传给逻辑线程后，逻辑线程才会触发执行onLoad，这样onLoad的触发时机就会比较晚，导致严重拖慢最终页面内容的渲染，影响用户体验的技术问题，本申请提供的技术方案，可以大大加快小程序页面加载速度，提升页面性能，优化用户体验；并且，本申请实施例的技术方案实现简单方便、便于普及，适用范围更广。

实施例二

图2是本申请实施例提供的小程序页面渲染方法的第二流程示意图。基于上述技术方案进一步优化与扩展，并可以与上述各个可选实施方式进行结合。如图2所示，小程序页面渲染方法可以包括以下步骤：

S201、响应于用户打开小程序页面的指令，分别加载小程序页面的逻辑代码和页面样式文件，得到小程序页面的逻辑代码的加载结果和小程页面的页面样式文件的加载结果。

在本步骤中，电子设备响应于用户打开小程序页面的指令，分别加载小程序页面的逻辑代码和页面样式文件，得到小程序页面的逻辑代码的加载结果和小程页面的页面样式文件的加载结果。具体地，电子设备可以响应于用户打开小程序页面的指令，通过逻辑线程和渲染线程分别加载小程序页面的逻辑代码和页面样式文件，得到小程序页面的逻辑代码的加载结果和小程页面的页面样式文件的加载结果。小程序页面的页面样式文件至少可以包括：加载页面的模板和样式文件；即用户点击小程序后，电子设备可以通过逻辑线程加载小程序页面的逻辑代码，得到小程序页面的逻辑代码的加载结果；通过渲染线程加载小程序页面的模板和样式文件，得到小程序页面的模板和样式文件的加载结果。

S202、在小程序页面的逻辑代码的加载结果中提取用于渲染小程序页面的初始数据。

在本步骤中，电子设备可以在小程序页面的逻辑代码的加载结果中提取用于渲染小程序页面的初始数据。具体地，电子设备可以通过逻辑线程在小程序页面的逻辑代码的加载结果中提取用于渲染小程序页面的初始数据；并通过逻辑线程将用于渲染小程序页面的初始数据发送至渲染线程。进一步地，电子设备可以在onInit的代码中提取用于渲染小程序页面的初始数据(initData)；并通过逻辑线程将初始数据(initData)发送至渲染线程。

S203、基于小程序页面的页面样式文件的加载结果和用于渲染小程序页面的初始数据，对小程序页面进行首次绘制，得到小程序页面的首次绘制结果。

在本步骤中，电子设备可以基于小程序页面的页面样式文件的加载结果和用于渲染小程序页面的初始数据，对小程序页面进行首次绘制，得到小程序页面的首次绘制结果。具体地，电子设备可以基于小程序页面的页面样式文件的加载结果和用于渲染小程序页面的初始数据，通过渲染线程对小程序页面进行首次绘制，得到小程序页面的首次绘制结果。具体地，电子设备通过渲染线程接收到逻辑线程发送的initData后，通过渲染线程对小程序页面进行首次绘制，得到小程序页面的首次绘制结果。由于onInit时机非常靠前，从onInit生命周期期间中发出setData到渲染线程，渲染线程可能还没有完成首次绘制，这样就会存在setData顺序混乱的问题。因此setData中的数据和回调函数必须一一对应，严格保证执行顺序。

setData是小程序的API，第一个参数可以传入数据，第二个参数可以传入回调函数，表示本次setData渲染完成后回调函数会立即执行。由于要严格保证setData的执行顺序，所以本申请需要对setData引起增量渲染的机制进行优化。具体优化方式是在渲染线程中设置缓存队列，缓存队列是一个先进先出的数据结构，渲染线程在接收到所有的setData会先判断页面的渲染状态；如果首次渲染完成则会向缓存队列发送消息，缓存队列会将缓存的setData信息按序排出并执行，达到有序的增量绘制渲染。需要说明的是，本申请提出的Page级别的生命周期可以包括：onInit、onLoad、onShow、onReady、onUnload；逻辑线程针对上述每一个函数分别会向渲染线程发送一个setData消息，渲染线程接收到每一个setData消息后分别对小程序页面进行增量绘制渲染。具体地，逻辑线程针对上述每一个函数分别会先获取数据，然后将获取到的数据封装在setData消息中，再将发送至渲染线程。例如，逻辑线程针对onInit会向onInit对应的服务器发起网络请求，然后onInit对应的服务器会向逻辑线程返回onInit的数据；逻辑线程针对onLoad会向onLoad对应的服务器发起网络请求，然后onLoad对应的服务器会向逻辑线程返回onLoad的数据。

在本申请的具体实施例中，将原本在onLoad中执行的代码可以划分为两部分，即保留在onLoad中的代码和在onInit中预先执行的代码；其中，在onInit中预先执行的代码是不依赖于首次绘制结果即可执行的，而保留在onLoad中的代码是要依赖于首次绘制结果才可以执行的。所以本申请可以将不依赖于首次绘制结果的代码预先执行，这样就不必将依赖于首次绘制结果的代码和不依赖于首次绘制结果的代码全部放在onLoad中执行。也就是说，因为onInit执行时并没有收到渲染线程完成首次绘制的信息，所以在onInit生命周期中执行代码，相比onLoad会存在一些限制，主要的限制是不能调用任何依赖视图内容的API，这些API包括且不限于：搜索具体组件内的某个子组件(selectComponent)、搜索具体组件内的所有子组件(selectAllComponents)、创建视图查询对象(createSelectorQuery)、获取页面上某个地图组件的上下文对象(createMapContext)、获取页面上某个相机组件的上下文对象(createCameraContext)、获取页面上某个画布组件的上下文对象(createCanvasContext)。

在本申请的具体实施例中，电子设备在通过逻辑线程在小程序页面的逻辑代码的加载结果中提取用于渲染小程序页面的初始数据之后，还可以通过逻辑线程生成触发对小程序页面进行初始增量渲染的消息；并通过逻辑线程将触发对小程序页面进行初始增量渲染的消息发送至渲染线程，使得渲染线程基于触发对小程序页面进行初始增量渲染的消息对小程序页面进行初始增量绘制渲染，得到监听页面初始函数对应的初始增量渲染结果。具体地，电子设备在通过逻辑线程生成触发对小程序页面进行初始增量渲染的消息时，可以先在服务器中获取生成触发对小程序页面进行初始增量渲染的消息的数据；然后基于触发对小程序页面进行初始增量渲染的消息的数据，生成触发对小程序页面进行初始增量渲染的消息。进一步地，电子设备可以先通过逻辑线程触发执行监听页面初始函数，得到监听页面初始函数的执行结果；然后基于监听页面初始函数的执行结果，在监听页面初始函数对应的服务器中获取生成触发对小程序页面进行初始增量渲染的消息的数据；再将生成触发对小程序页面进行初始增量渲染的消息的数据以及预先确定的监听页面初始函数对应的回调函数封装为生成触发对小程序页面进行初始增量渲染的消息。

在本申请的具体实施例中，若接收到触发对小程序页面进行初始增量渲染的消息时未得到小程序页面的首次绘制结果，则电子设备可以将触发对小程序页面进行初始增量渲染的消息发送至缓存队列中，然后基于缓存队列对小程序页面进行初始增量绘制渲染，得到小程序页面的初始增量渲染结果；若接收到触发对小程序页面进行初始增量渲染的消息时已得到小程序页面的首次绘制结果，则电子设备可以直接基于触发对小程序页面进行初始增量渲染的消息对小程序页面进行初始增量绘制渲染，得到小程序页面的初始增量渲染结果。具体地，若通过渲染线程接收到触发对小程序页面进行初始增量渲染的消息时未得到小程序页面的首次绘制结果，则电子设备可以将触发对小程序页面进行初始增量渲染的消息发送至渲染线程的缓存队列中，使得渲染线程基于缓存队列对小程序页面进行初始增量绘制渲染，得到小程序页面的初始增量渲染结果；若通过渲染线程接收到触发对小程序页面进行初始增量渲染的消息时已得到小程序页面的首次绘制结果，则电子设备可以将触发对小程序页面进行初始增量渲染的消息直接发送至渲染线程，使得渲染线程基于触发对小程序页面进行初始增量渲染的消息对小程序页面进行初始增量绘制渲染，得到小程序页面的初始增量渲染结果。

S204、基于预先得到的小程序页面的首次绘制结果，对小程序页面进行原始增量渲染，得到小程序页面的原始增量渲染结果。

在本步骤中，电子设备可以基于预先得到的小程序页面的首次绘制结果，对小程序页面进行原始增量渲染，得到小程序页面的原始增量渲染结果。具体地，电子设备可以基于预先得到的小程序页面的首次绘制结果，先生成触发对小程序页面进行原始增量渲染的消息；然后基于触发对小程序页面进行原始增量渲染的消息，对小程序页面进行原始增量绘制渲染，得到小程序页面的原始增量渲染结果。

S205、基于小程序页面的首次绘制结果、小程序页面的原始增量渲染结果以及预先得到的小程序页面的初始增量渲染结果，对小程序页面进行渲染。

图3是本申请实施例提供的生命周期的启动流程示意图。如图3所示，电子设备可以响应于用户打开小程序页面的指令，通过逻辑线程和渲染线程分别加载小程序页面的逻辑代码和页面样式文件，得到小程序页面的逻辑代码的加载结果和小程页面的页面样式文件的加载结果；然后通过逻辑线程在小程序页面的逻辑代码的加载结果中提取用于渲染小程序页面的初始数据(initData)；并通过逻辑线程将用于渲染小程序页面的初始数据(initData)发送至渲染线程；基于小程序页面的页面样式文件的加载结果和用于渲染小程序页面的初始数据(initData)，通过渲染线程对小程序页面进行首次绘制，得到小程序页面的首次绘制结果；再通过渲染线程将小程序页面的首次绘制结果发送至逻辑线程；逻辑线程基于小程序页面的首次绘制结果触发执行onLoad。本申请在现有的生命周期中增加一个监听页面初始函数(onInit)，即Page级别的生命周期包括：onInit、onLoad、onShow、onReady、onUnload；逻辑线程针对上述每一个函数分别会向渲染线程发送一个setData消息，渲染线程接收到每一个setData消息后分别对小程序页面进行增量绘制渲染。例如，逻辑线程针对onInit向渲染线程发送一个onInit对应的setData消息，渲染线程在接收到onInit对应的setData消息后，基于onInit对应的setData消息进行增量绘制渲染；再例如，逻辑线程针对onLoad向渲染线程发送一个onLoad对应的setData消息，渲染线程在接收到onLoad对应的setData消息后，基于onLoad对应的setData消息进行增量绘制渲染。

图4是本申请实施例提供的小程序页面渲染效果的示意图。如图4所示，使用本申请提出的技术方案，在生命周期onInit中去请求页面的数据，会大大加快页面的加载速度，提升页面的性能表现。现阶段在三个小程序产品上使用了该生命周期，分别是：百度知道、百度百科和宝宝知道，效果非常明显；百度知道可以得到210ms的收益；百度知道可以得到100ms的收益；宝宝知道可以得到150ms的收益。

本申请实施例提出的小程序页面渲染方法，先基于预先得到的小程序页面的首次绘制结果，对小程序页面进行原始增量渲染，得到小程序页面的原始增量渲染结果；然后基于小程序页面的首次绘制结果、小程序页面的原始增量渲染结果以及预先得到的小程序页面的初始增量渲染结果，对小程序页面进行渲染。也就是说，本申请可以预先得到小程序页面的初始增量渲染结果，然后基于小程序页面的首次绘制结果、小程序页面的原始增量渲染结果以及小程序页面的初始增量渲染结果，对小程序页面进行渲染。本申请在现有的由onLoad、onShow、onReady和onUnload所组成的生命周期中增加了一个函数onInit，通过onInit可以将onLoad中的一部分代码预先执行，而不必将依赖于首次绘制结果的代码和不依赖于首次绘制结果的代码全部放在onLoad中执行。而在现有的小程序页面渲染方法中，将依赖于首次绘制结果的代码和不依赖于首次绘制结果的代码全部放在onLoad中执行。因为本申请采用了通过onInit预先执行不依赖于首次绘制结果的代码的技术手段，克服了现有技术中只有等渲染线程完成首次绘制并将绘制结果回传给逻辑线程后，逻辑线程才会触发执行onLoad，这样onLoad的触发时机就会比较晚，导致严重拖慢最终页面内容的渲染，影响用户体验的技术问题，本申请提供的技术方案，可以大大加快小程序页面加载速度，提升页面性能，优化用户体验；并且，本申请实施例的技术方案实现简单方便、便于普及，适用范围更广。

实施例三

图5是本申请实施例提供的小程序页面渲染装置的结构示意图。如图5所示，所述装置500包括：增量绘制模块501和渲染模块502；其中，

所述增量绘制模块501，用于基于预先得到的小程序页面的首次绘制结果，对所述小程序页面进行原始增量渲染，得到所述小程序页面的原始增量渲染结果；

所述渲染模块502，用于基于所述小程序页面的首次绘制结果、所述小程序页面的原始增量渲染结果以及预先得到的所述小程序页面的初始增量渲染结果，对所述小程序页面进行渲染。

进一步的，所述增量绘制模块501，具体用于基于预先得到的小程序页面的首次绘制结果，生成触发对所述小程序页面进行原始增量渲染的消息；基于所述触发对所述小程序页面进行原始增量渲染的消息，对所述小程序页面进行原始增量绘制渲染，得到所述小程序页面的原始增量渲染结果。

进一步的，所述装置还包括：首次绘制模块503(图中未示出)，用于响应于用户打开所述小程序页面的指令，分别加载所述小程序页面的逻辑代码和页面样式文件，得到所述小程序页面的逻辑代码的加载结果和所述小程页面的页面样式文件的加载结果；在所述小程序页面的逻辑代码的加载结果中提取用于渲染所述小程序页面的初始数据；基于所述小程序页面的页面样式文件的加载结果和所述用于渲染所述小程序页面的初始数据，对所述小程序页面进行首次绘制，得到所述小程序页面的首次绘制结果。

进一步的，所述增量绘制模块501，还用于生成触发对所述小程序页面进行初始增量渲染的消息；基于所述触发对所述小程序页面进行初始增量渲染的消息，对所述小程序页面进行初始增量绘制渲染，得到所述小程序页面的初始增量渲染结果。

进一步的，所述增量绘制模块501，具体用于在服务器中获取生成所述触发对所述小程序页面进行初始增量渲染的消息的数据；基于所述触发对所述小程序页面进行初始增量渲染的消息的数据，生成所述触发对所述小程序页面进行初始增量渲染的消息。

进一步的，所述增量绘制模块501，具体用于若接收到所述触发对所述小程序页面进行初始增量渲染的消息时未得到所述小程序页面的首次绘制结果，则将所述触发对所述小程序页面进行初始增量渲染的消息发送至缓存队列中，基于所述缓存队列对所述小程序页面进行初始增量绘制渲染，得到所述小程序页面的初始增量渲染结果；若接收到所述触发对所述小程序页面进行初始增量渲染的消息时已得到所述小程序页面的首次绘制结果，则直接基于所述触发对所述小程序页面进行初始增量渲染的消息对所述小程序页面进行初始增量绘制渲染，得到所述小程序页面的初始增量渲染结果。

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

实施例四

根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

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

如图6所示，设备600包括计算单元601，其可以根据存储在只读存储器(ROM)602中的计算机程序或者从存储单元608加载到随机访问存储器(RAM)603中的计算机程序，来执行各种适当的动作和处理。在RAM 603中，还可存储设备600操作所需的各种程序和数据。计算单元601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。

设备600中的多个部件连接至I/O接口605，包括：输入单元606，例如键盘、鼠标等；输出单元607，例如各种类型的显示器、扬声器等；存储单元608，例如磁盘、光盘等；以及通信单元609，例如网卡、调制解调器、无线通信收发机等。通信单元609允许设备600通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元601可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元601的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元601执行上文所描述的各个方法和处理，例如小程序页面渲染方法。例如，在一些实施例中，小程序页面渲染方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元608。在一些实施例中，计算机程序的部分或者全部可以经由ROM 602和/或通信单元609而被载入和/或安装到设备600上。当计算机程序加载到RAM 603并由计算单元601执行时，可以执行上文描述的小程序页面渲染方法的一个或多个步骤。备选地，在其他实施例中，计算单元601可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行小程序页面渲染方法。

本文中以上描述的***和技术的各种实施方式可以在数字电子电路***、集成电路***、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上***的***(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程***上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储***、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储***、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行***、装置或设备使用或与指令执行***、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体***、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

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

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

计算机***可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与VPS服务中，存在的管理难度大，业务扩展性弱的缺陷。

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

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

Claims (12)

1.一种小程序页面渲染方法，所述方法包括：

响应于用户打开小程序页面的指令，分别加载所述小程序页面的逻辑代码和页面样式文件，得到所述小程序页面的逻辑代码的加载结果和所述小程页面的页面样式文件的加载结果；在所述小程序页面的逻辑代码的加载结果中提取用于渲染所述小程序页面的初始数据；基于所述小程序页面的页面样式文件的加载结果和所述用于渲染所述小程序页面的初始数据，对所述小程序页面进行首次绘制，得到所述小程序页面的首次绘制结果；

基于预先得到的小程序页面的首次绘制结果，对所述小程序页面进行原始增量渲染，得到所述小程序页面的原始增量渲染结果；

基于所述小程序页面的首次绘制结果、所述小程序页面的原始增量渲染结果以及预先得到的所述小程序页面的初始增量渲染结果，对所述小程序页面进行渲染。

2.根据权利要求1所述的方法，所述基于预先得到的小程序页面的首次绘制结果，对所述小程序页面进行原始增量渲染，得到所述小程序页面的原始增量渲染结果，包括：

基于预先得到的小程序页面的首次绘制结果，生成触发对所述小程序页面进行原始增量渲染的消息；基于所述触发对所述小程序页面进行原始增量渲染的消息，对所述小程序页面进行原始增量绘制渲染，得到所述小程序页面的原始增量渲染结果。

3.根据权利要求1所述的方法，在所述小程序页面的逻辑代码的加载结果中提取用于渲染所述小程序页面的初始数据之后，所述方法还包括：

生成触发对所述小程序页面进行初始增量渲染的消息；基于所述触发对所述小程序页面进行初始增量渲染的消息，对所述小程序页面进行初始增量绘制渲染，得到所述小程序页面的初始增量渲染结果。

4.根据权利要求3所述的方法，所述生成触发对所述小程序页面进行初始增量渲染的消息，包括：

在服务器中获取生成所述触发对所述小程序页面进行初始增量渲染的消息的数据；

基于所述触发对所述小程序页面进行初始增量渲染的消息的数据，生成所述触发对所述小程序页面进行初始增量渲染的消息。

5.根据权利要求3所述的方法，所述对所述小程序页面进行初始增量绘制渲染，得到所述小程序页面的初始增量渲染结果，包括：

若接收到所述触发对所述小程序页面进行初始增量渲染的消息时未得到所述小程序页面的首次绘制结果，则将所述触发对所述小程序页面进行初始增量渲染的消息发送至缓存队列中，基于所述缓存队列对所述小程序页面进行初始增量绘制渲染，得到所述小程序页面的初始增量渲染结果；

若接收到所述触发对所述小程序页面进行初始增量渲染的消息时已得到所述小程序页面的首次绘制结果，则直接基于所述触发对所述小程序页面进行初始增量渲染的消息对所述小程序页面进行初始增量绘制渲染，得到所述小程序页面的初始增量渲染结果。

6.一种小程序页面渲染装置，所述装置包括：首次绘制模块、增量绘制模块和渲染模块；其中，

所述首次绘制模块，用于响应于用户打开小程序页面的指令，分别加载所述小程序页面的逻辑代码和页面样式文件，得到所述小程序页面的逻辑代码的加载结果和所述小程页面的页面样式文件的加载结果；在所述小程序页面的逻辑代码的加载结果中提取用于渲染所述小程序页面的初始数据；基于所述小程序页面的页面样式文件的加载结果和所述用于渲染所述小程序页面的初始数据，对所述小程序页面进行首次绘制，得到所述小程序页面的首次绘制结果；

所述增量绘制模块，用于基于预先得到的小程序页面的首次绘制结果，对所述小程序页面进行原始增量渲染，得到所述小程序页面的原始增量渲染结果；

所述渲染模块，用于基于所述小程序页面的首次绘制结果、所述小程序页面的原始增量渲染结果以及预先得到的所述小程序页面的初始增量渲染结果，对所述小程序页面进行渲染。

7.根据权利要求6所述的装置，所述增量绘制模块，具体用于基于预先得到的小程序页面的首次绘制结果，生成触发对所述小程序页面进行原始增量渲染的消息；基于所述触发对所述小程序页面进行原始增量渲染的消息，对所述小程序页面进行原始增量绘制渲染，得到所述小程序页面的原始增量渲染结果。

8.根据权利要求6所述的装置，所述增量绘制模块，还用于生成触发对所述小程序页面进行初始增量渲染的消息；基于所述触发对所述小程序页面进行初始增量渲染的消息，对所述小程序页面进行初始增量绘制渲染，得到所述小程序页面的初始增量渲染结果。

9.根据权利要求8所述的装置，所述增量绘制模块，具体用于在服务器中获取生成所述触发对所述小程序页面进行初始增量渲染的消息的数据；基于所述触发对所述小程序页面进行初始增量渲染的消息的数据，生成所述触发对所述小程序页面进行初始增量渲染的消息。

10.根据权利要求8所述的装置，所述增量绘制模块，具体用于若接收到所述触发对所述小程序页面进行初始增量渲染的消息时未得到所述小程序页面的首次绘制结果，则将所述触发对所述小程序页面进行初始增量渲染的消息发送至缓存队列中，基于所述缓存队列对所述小程序页面进行初始增量绘制渲染，得到所述小程序页面的初始增量渲染结果；若接收到所述触发对所述小程序页面进行初始增量渲染的消息时已得到所述小程序页面的首次绘制结果，则直接基于所述触发对所述小程序页面进行初始增量渲染的消息对所述小程序页面进行初始增量绘制渲染，得到所述小程序页面的初始增量渲染结果。

11. 一种电子设备，包括：

至少一个处理器；以及

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

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

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

Images