CN118277686A - 页面渲染方法、装置和电子设备 - Google Patents

Abstract

本说明书提出了一种页面渲染方法、装置和电子设备，其中，上述页面渲染方法中，获取用户在小程序所展示页面上的操作信息，然后根据上述操作信息和上述小程序的原有数据，生成上述小程序的新数据；对上述原有数据和上述新数据进行深度对比，获得对比结果；根据上述对比结果渲染页面，并展示渲染获得的页面；上述渲染获得的页面为执行上述操作信息后的结果页面；上述原有数据和上述新数据为不可变数据，并且上述原有数据和上述新数据的数据结构为树形结构，由于大多数情况下用户的操作只会改变树形结构的某个节点，其他没有变化的节点由于不可变数据的共享引用，在进行深度对比时可以直接跳过，因此降低了深度对比的时间复杂度。

Description

页面渲染方法、装置和电子设备

【技术领域】

本说明书涉及互联网技术领域，尤其涉及一种页面渲染方法、装置和电子设备。

【背景技术】

小程序的运行从架构上分为网页视图(webview)和worker两个部分。webview负责页面的渲染，worker则负责存储数据和执行业务逻辑。而webview和worker之间的通信是异步的，这意味着在调用setData时，数据并不会立即得到渲染，而是需要从worker异步传输到webview，其中，setData用于将数据从worker发送到webview，在调用setData之后，数据的变化会引起小程序页面的更新。

worker在传输数据时，需要先将待传输的数据序列化为字符串，然后再传输给webview，这意味着待传输数据的大小会影响小程序的性能。为了尽量减少传输量，应该尽量保证待传输数据是setData后发生变化的数据，所以需要将setData前后的数据做一次对比(diff)，将发生变化的数据传输到webview。但是diff也需消耗性能，因此需要提供一种降低diff消耗，提高小程序性能的方案。

【发明内容】

本说明书实施例提供了一种页面渲染方法、装置和电子设备，以实现在将setData前后的数据进行对比(diff)时，降低diff的性能消耗，提高小程序的性能。

第一方面，本说明书实施例提供一种页面渲染方法，包括：

获取用户在小程序所展示页面上的操作信息；

根据所述操作信息和所述小程序的原有数据，生成所述小程序的新数据；其中，所述小程序的原有数据和新数据为不可变数据，并且所述原有数据和所述新数据的数据结构为树形结构；

对所述原有数据和所述新数据进行深度对比，获得对比结果；

根据所述对比结果渲染页面，并展示渲染获得的页面；所述渲染获得的页面为执行所述操作信息后的结果页面。

上述页面渲染方法中，上述原有数据和上述新数据为不可变数据，并且上述原有数据和上述新数据的数据结构为树形结构，由于大多数情况下用户的操作只会改变树形结构的某个节点，其他没有变化的节点由于不可变数据的共享引用，在进行深度对比时可以直接跳过，因此降低了深度对比的时间复杂度，实现了在将setData前后的数据进行对比(diff)时，降低diff的性能消耗，提高了小程序的性能。

其中一种可能的实现方式中，所述获取用户在小程序所展示页面上的操作信息之前，还包括：

将所述小程序的原有数据转换为不可变数据。

其中一种可能的实现方式中，所述对所述原有数据和所述新数据进行深度对比，获得对比结果包括：

遍历所述小程序的原有数据；

在所述小程序的新数据中，查找当前遍历的原有数据中第一关键字对应的值；

如果未查找到，则将预先建立的数据对象中与所述第一关键字对应路径的值设置为所述第一关键字对应的值；其中，所述数据对象用于存储所述原有数据与所述新数据的对比结果。

其中一种可能的实现方式中，所述方法还包括：

在将所述小程序的原有数据遍历完成之后，遍历所述小程序的新数据；

如果当前遍历的新数据中第二关键字对应的值与所述原有数据中所述第二关键字对应的值不相等，则将所述数据对象中所述第二关键字对应路径的值设置为当前遍历的新数据中第二关键字对应的值；

在将所述小程序的新数据遍历完成之后，如果所述数据对象不是空对象，则所述数据对象的值为所述原有数据与所述新数据的对比结果。

其中一种可能的实现方式中，所述遍历所述小程序的原有数据之前，还包括：

新建数据对象，所述数据对象的初始值为空，所述数据对象用于存储所述原有数据与所述新数据的对比结果。

第二方面，本说明书实施例提供一种页面渲染装置，包括：

获取模块，用于获取用户在小程序所展示页面上的操作信息；

生成模块，用于根据所述获取模块获取的操作信息和所述小程序的原有数据，生成所述小程序的新数据；其中，所述小程序的原有数据和新数据为不可变数据，并且所述原有数据和所述新数据的数据结构为树形结构；

对比模块，用于对所述原有数据和所述新数据进行深度对比，获得对比结果；

渲染模块，用于根据所述对比结果渲染页面，并展示渲染获得的页面；所述渲染获得的页面为执行所述操作信息后的结果页面。

其中一种可能的实现方式中，所述装置还包括：

转换模块，用于在所述获取模块获取用户在小程序所展示页面上的操作信息之前，将所述小程序的原有数据转换为不可变数据。

其中一种可能的实现方式中，所述对比模块包括：

遍历子模块，用于遍历所述小程序的原有数据；

查找子模块，用于在所述小程序的新数据中，查找当前遍历的原有数据中第一关键字对应的值；

设置子模块，用于当所述查找子模块在所述小程序的新数据中未查找到当前遍历的原有数据中第一关键字对应的值时，将预先建立的数据对象中与所述第一关键字对应路径的值设置为所述第一关键字对应的值；其中，所述数据对象用于存储所述原有数据与所述新数据的对比结果。

其中一种可能的实现方式中，所述遍历子模块，还用于在将所述小程序的原有数据遍历完成之后，遍历所述小程序的新数据；

所述设置子模块，还用于在当前遍历的新数据中第二关键字对应的值与所述原有数据中所述第二关键字对应的值不相等时，将所述数据对象中所述第二关键字对应路径的值设置为当前遍历的新数据中第二关键字对应的值；

在所述遍历子模块将所述小程序的新数据遍历完成之后，如果所述数据对象不是空对象，则所述数据对象的值为所述原有数据与所述新数据的对比结果。

其中一种可能的实现方式中，所述对比模块还包括：

新建子模块，用于在所述遍历子模块遍历所述小程序的原有数据之前，新建数据对象，所述数据对象的初始值为空，所述数据对象用于存储所述原有数据与所述新数据的对比结果。

第三方面，本说明书实施例提供一种电子设备，包括：

至少一个处理器；以及

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

所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行第一方面提供的方法。

第四方面，本说明书实施例提供一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行第一方面提供的方法。

应当理解的是，本说明书的第二～第四方面与本说明书的第一方面的技术方案一致，各方面及对应的可行实施方式所取得的有益效果相似，不再赘述。

【附图说明】

为了更清楚地说明本说明书实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本说明书的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1为本说明书页面渲染方法一个实施例的流程图；

图2为本说明书页面渲染方法另一个实施例的流程图；

图3为本说明书页面渲染方法中生成小程序的新数据一个实施例的示意图；

图4为本说明书页面渲染方法中flatDeepDiff的实现流程一个实施例的示意图；

图5为本说明书页面渲染装置一个实施例的结构示意图；

图6为本说明书页面渲染装置另一个实施例的结构示意图；

图7为本说明书电子设备一个实施例的结构示意图。

【具体实施方式】

为了更好的理解本说明书的技术方案，下面结合附图对本说明书实施例进行详细描述。

应当明确，所描述的实施例仅仅是本说明书一部分实施例，而不是全部的实施例。基于本说明书中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本说明书保护的范围。

在本说明书实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本说明书。在本说明书实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。

worker在将数据传输给webview时，需要将setData前后的数据做一次对比(diff)，将发生变化的数据传输到webview。现有相关技术中提供了两种对setData前后的数据进行diff的方案，分别为“_.isEqual”方案和deepDiff方案。其中，“_.isEqual”方案可用于对两个对象进行深度对比，但该方案只能对比树形结构的两个对象，时间复杂度较高，并且该方案在对两个对象对比后，无法生成两个对象不同的部分；而deepDiff方案可以生成对比后两个对象的不同部分，时间复杂度和“_.isEqual”方案相当，但deepDiff方案得到的对比结果不适用于小程序setData。因此上述两个方案都有明显缺陷不适用于小程序setData的diff。

本说明书实施例提供一种页面渲染方法，可以适用于小程序setData的diff，并且可以降低diff的性能消耗，提高小程序的性能。

图1为本说明书页面渲染方法一个实施例的流程图，如图1所示，上述页面渲染方法可以包括：

步骤102，获取用户在小程序所展示页面上的操作信息。

其中，上述操作信息可以包括用户对小程序所展示页面上的点击和/或输入信息等操作，例如：用户在“充值”页面上，对手机号码输入框的点击操作，以及在进行点击操作之后，在输入框中输入手机号码的操作。以上仅是操作信息的两种示例，本实施例对上述操作信息的形式不作限定。

步骤104，根据上述操作信息和上述小程序的原有数据，生成上述小程序的新数据；其中，上述小程序的原有数据和新数据为不可变数据，并且上述原有数据和上述新数据的数据结构为树形结构。

步骤106，对上述原有数据和上述新数据进行深度对比，获得对比结果。

步骤108，根据上述对比结果渲染页面，并展示渲染获得的页面；上述渲染获得的页面为执行上述操作信息后的结果页面。

具体地，获取上述操作信息之后，worker可以根据上述操作信息和上述小程序的原有数据，生成上述小程序的新数据，然后对上述原有数据和上述新数据进行深度对比，获得对比结果，然后，worker将上述对比结果传输给webview，这样，webview就可以根据上述对比结果渲染页面，并展示渲染获得的页面。

上述页面渲染方法中，上述原有数据和上述新数据为不可变数据，并且上述原有数据和上述新数据的数据结构为树形结构，由于大多数情况下用户的操作只会改变树形结构的某个节点，其他没有变化的节点由于不可变数据的共享引用，在进行深度对比时可以直接跳过，因此降低了深度对比的时间复杂度，实现了在将setData前后的数据进行对比(diff)时，降低diff的性能消耗，提高了小程序的性能。

图2为本说明书页面渲染方法另一个实施例的流程图，如图2所示，本说明书图1所示实施例中，步骤102之前，还可以包括：

步骤202，将上述小程序的原有数据转换为不可变数据。

这样，步骤106可以包括：

步骤204，遍历小程序的原有数据。

步骤206，在上述小程序的新数据中，查找当前遍历的原有数据中第一关键字(key)对应的值(value)。

步骤208，如果未查找到，则将预先建立的数据对象中与上述第一关键字对应路径(path)的值设置为上述第一关键字对应的值；其中，上述数据对象用于存储上述原有数据与上述新数据的对比结果。

进一步地，步骤208之后，还可以包括：

步骤210，在将上述小程序的原有数据遍历完成之后，遍历上述小程序的新数据。

步骤212，如果当前遍历的新数据中第二关键字对应的值与上述原有数据中第二关键字对应的值不相等，则将上述数据对象中第二关键字对应路径的值设置为当前遍历的新数据中第二关键字对应的值。

步骤214，在将上述小程序的新数据遍历完成之后，如果上述数据对象不是空对象，则上述数据对象的值为上述原有数据与上述新数据的对比结果。

进一步地，步骤204之前，还可以包括：

步骤216，新建数据对象，上述数据对象的初始值为空，上述数据对象用于存储小程序的原有数据与新数据的对比结果。

在具体实现时，可以将小程序的原有数据通过immer包装，从而将上述小程序的原有数据转换为不可变数据。其中immer是一个麻省理工学院(Massachusetts Institute ofTechnology；以下简称：MIT)开源协议的npm包，npm是JavaScript的包管理工具，通过npm可以安装、共享或分发代码。

其中，immer是一种不可变数据解决方案，当然本实施例并不仅限于此，也可以采用其他不可变数据解决方案，本实施例对所采用的不可变数据解决方案不作限定，本说明书以下实施例的描述中以immer为例进行说明。

图3为本说明书页面渲染方法中生成小程序的新数据一个实施例的示意图，如图3所示，在将小程序的原有数据(prevData)通过immer包装之后，当用户在小程序所展示页面上进行操作之后，上述小程序的数据发生变化(state.a＝2)，生成新数据nextData。

然后可以采用flatDeepDiff对前后数据prevData和nextData进行深度对比，具体地，对于基础类型，可以直接对比prevData和nextData的值是否相等，对于引用类型，由于immer内部共用同一份数据，所以如果引用类型没有被用户操作，将不会变化，还是使用同一份引用，所以整个diff性能很高和浅对比一个量级。

图4为本说明书页面渲染方法中flatDeepDiff的实现流程一个实施例的示意图，如图4所示，在具体实现时，flatDeepDiff的流程可以包括：

步骤1，新建数据对象flatdiff，flatdiff的默认值为空，用于存储小程序setData所需的对比数据；

步骤2，遍历prevData，如果prevData中的第一key对应的value在nextData中不存在，则将flatdiff中第一key对应path的值设置为value；

步骤3，在将prevData遍历完之后，遍历nextData，如果nextData中第二key对应的value1与prevData中第二key对应的value2不相等，则将flatdiff中第二key对应path的值设置为value1；

步骤4，在将nextData3遍历完之后，检查flatdiff是否为空对象，如果是，则说明prevData与nextData完全一致，如果flatdiff不是空对象，则返回prevData与nextData的对比结果。

本实施例对比了几种常见的diff方案的性能，最终的结果是：shallowEqual>flatDeepDiff+immer>_.isEquals>Object.equals>flatDeepDiff>JSON.stringify。可以看出flatDeepDiff+immer的性能和shallowEqual是一个量级，在保证了flatDeepDiff的高性能后，将小程序setData的性能消耗降到最低。

本实施例中，flatDeepDiff虽然也深度对比两个树形结构对象，但大多数情况下，用户的操作只会改变树形结构的某个节点，其他没有变化的节点由于immer共享引用，flatDeepDiff在对比的时候直接跳过，所以时间复杂度较低。并且在diff的同时生成可用于小程序setData的flatDiff结构，方便小程序优化。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

图5为本说明书页面渲染装置一个实施例的结构示意图，如图5所示，上述页面渲染装置可以包括：获取模块51、生成模块52、对比模块53和渲染模块54；

获取模块51，用于获取用户在小程序所展示页面上的操作信息；

生成模块52，用于根据获取模块51获取的操作信息和上述小程序的原有数据，生成上述小程序的新数据；其中，上述小程序的原有数据和新数据为不可变数据，并且上述原有数据和上述新数据的数据结构为树形结构；

对比模块53，用于对上述原有数据和上述新数据进行深度对比，获得对比结果；

渲染模块54，用于根据上述对比结果渲染页面，并展示渲染获得的页面；上述渲染获得的页面为执行上述操作信息后的结果页面。

图5所示实施例提供的页面渲染装置可用于执行本说明书图1所示方法实施例的技术方案，其实现原理和技术效果可以进一步参考方法实施例中的相关描述。

图6为本说明书页面渲染装置另一个实施例的结构示意图，与图5所示的页面渲染装置相比，图6所示的页面渲染装置还可以包括：转换模块55；

转换模块55，用于在获取模块51获取用户在小程序所展示页面上的操作信息之前，将上述小程序的原有数据转换为不可变数据。

本实施例中，对比模块53可以包括：遍历子模块531、查找子模块532和设置子模块533；

遍历子模块531，用于遍历上述小程序的原有数据；

查找子模块532，用于在上述小程序的新数据中，查找当前遍历的原有数据中第一关键字对应的值；

设置子模块533，用于当查找子模块532在上述小程序的新数据中未查找到当前遍历的原有数据中第一关键字对应的值时，将预先建立的数据对象中与上述第一关键字对应路径的值设置为上述第一关键字对应的值；其中，上述数据对象用于存储上述原有数据与上述新数据的对比结果。

进一步地，遍历子模块531，还用于在将上述小程序的原有数据遍历完成之后，遍历上述小程序的新数据；

设置子模块533，还用于在当前遍历的新数据中第二关键字对应的值与上述原有数据中第二关键字对应的值不相等时，将上述数据对象中第二关键字对应路径的值设置为当前遍历的新数据中第二关键字对应的值；

在遍历子模块531将上述小程序的新数据遍历完成之后，如果上述数据对象不是空对象，则上述数据对象的值为原有数据与新数据的对比结果。

进一步地，对比模块53还可以包括：

新建子模块534，用于在遍历子模块531遍历上述小程序的原有数据之前，新建数据对象，上述数据对象的初始值为空，上述数据对象用于存储上述原有数据与上述新数据的对比结果。

图6所示实施例提供的页面渲染装置可用于执行本申请图1～图2所示方法实施例的技术方案，其实现原理和技术效果可以进一步参考方法实施例中的相关描述。

图7为本说明书电子设备一个实施例的结构示意图，如图7所示，上述电子设备可以包括至少一个处理器；以及与上述处理器通信连接的至少一个存储器，其中：存储器存储有可被处理器执行的程序指令，上述处理器调用上述程序指令能够执行本说明书图1～图2所示实施例提供的页面渲染方法。

其中，上述电子设备可以为智能手机、智能手表、可穿戴智能设备、平板电脑或车载设备等智能设备，本实施例对上述电子设备的具体形态不作限定。

图7示出了适于用来实现本说明书实施方式的示例性电子设备的框图。图7显示的电子设备仅仅是一个示例，不应对本说明书实施例的功能和使用范围带来任何限制。

如图7所示，电子设备以通用计算设备的形式表现。电子设备的组件可以包括但不限于：一个或者多个处理器410，存储器430，连接不同系统组件(包括存储器430和处理单元410)的通信总线440。

通信总线440表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(Industry StandardArchitecture；以下简称：ISA)总线，微通道体系结构(Micro Channel Architecture；以下简称：MAC)总线，增强型ISA总线、视频电子标准协会(Video Electronics StandardsAssociation；以下简称：VESA)局域总线以及外围组件互连(Peripheral ComponentInterconnection；以下简称：PCI)总线。

电子设备典型地包括多种计算机系统可读介质。这些介质可以是任何能够被电子设备访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

存储器430可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(Random Access Memory；以下简称：RAM)和/或高速缓存存储器。电子设备可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。存储器430可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本说明书各实施例的功能。

具有一组(至少一个)程序模块的程序/实用工具，可以存储在存储器430中，这样的程序模块包括——但不限于——操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块通常执行本说明书所描述的实施例中的功能和/或方法。

处理器410通过运行存储在存储器430中的程序，从而执行各种功能应用以及数据处理，例如实现本说明书图1～图2所示实施例提供的页面渲染方法。

本说明书实施例提供一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行本说明书图1～图2所示实施例提供的页面渲染方法。

上述非暂态计算机可读存储介质可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(Read Only Memory；以下简称：ROM)、可擦式可编程只读存储器(Erasable ProgrammableRead Only Memory；以下简称：EPROM)或闪存、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括——但不限于——电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于——无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本说明书操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LocalArea Network；以下简称：LAN)或广域网(Wide Area Network；以下简称：WAN)连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本说明书的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。在本说明书的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现定制逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本说明书的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本说明书的实施例所属技术领域的技术人员所理解。

取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。

需要说明的是，本说明书实施例中所涉及的终端可以包括但不限于个人计算机(Personal Computer；以下简称：PC)、个人数字助理(Personal Digital Assistant；以下简称：PDA)、无线手持设备、平板电脑(Tablet Computer)、手机、MP3播放器、MP4播放器等。

在本说明书所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

另外，在本说明书各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

上述以软件功能单元的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中，包括若干指令用以使得一台计算机装置(可以是个人计算机，服务器，或者网络装置等)或处理器(Processor)执行本说明书各个实施例所述方法的部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory；以下简称：ROM)、随机存取存储器(Random Access Memory；以下简称：RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅为本说明书的较佳实施例而已，并不用以限制本说明书，凡在本说明书的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本说明书保护的范围之内。

Claims (12)

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

获取用户在小程序所展示页面上的操作信息，执行所述操作信息用于从所述展示页面跳转至结果页面；

根据所述操作信息和所述小程序的原有数据，生成所述小程序的新数据；其中，所述原有数据和所述新数据为不可变数据；

对所述原有数据和所述新数据进行对比，获得对比结果；其中，在所述对比的过程中跳过没有变化的节点；

根据所述对比结果渲染所述结果页面，并展示渲染获得的所述结果页面。

2.根据权利要求1所述的方法，其特征在于，所述获取用户在小程序所展示页面上的操作信息之前，还包括：

将所述小程序的原有数据转换为不可变数据。

3.根据权利要求2所述的方法，其特征在于，所述对所述原有数据和所述新数据进行对比，获得对比结果包括：

遍历所述小程序的原有数据；

在所述小程序的新数据中，查找当前遍历的原有数据中第一关键字对应的值；

如果未查找到，则将预先建立的数据对象中与所述第一关键字对应路径的值设置为所述第一关键字对应的值；其中，所述数据对象用于存储所述原有数据与所述新数据的对比结果。

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

在将所述小程序的原有数据遍历完成之后，遍历所述小程序的新数据；

如果当前遍历的新数据中第二关键字对应的值与所述原有数据中所述第二关键字对应的值不相等，则将所述数据对象中所述第二关键字对应路径的值设置为当前遍历的新数据中第二关键字对应的值；

在将所述小程序的新数据遍历完成之后，如果所述数据对象不是空对象，则所述数据对象的值为所述原有数据与所述新数据的对比结果。

5.根据权利要求3或4所述的方法，其特征在于，所述遍历所述小程序的原有数据之前，还包括：

新建数据对象，所述数据对象的初始值为空，所述数据对象用于存储所述原有数据与所述新数据的对比结果。

6.根据权利要求1所述的方法，其特征在于，所述原有数据和所述新数据的数据结构为树形结构。

7.根据权利要求6所述的方法，其特征在于，所述对所述原有数据和所述新数据进行对比，包括：

在所述数据类型为基础类型的情况下，直接对比所述原有数据和所述新数据的值；

在所述数据类型为引用类型的情况下，跳过引用相同的节点，仅对引用不同的节点进行比对。

8.根据权利要求1-4和6-7中任一项所述的方法，其特征在于，所述对比结果采用flatDiff结构。

9.根据权利要求8所述的方法，其特征在于，所述flatDiff结构为key-value结构。

10.一种页面渲染装置，其特征在于，包括：

获取模块，用于获取用户在小程序所展示页面上的操作信息，执行所述操作信息用于从所述展示页面跳转至结果页面；

生成模块，用于根据所述获取模块获取的操作信息和所述小程序的原有数据，生成所述小程序的新数据；其中，所述原有数据和所述新数据为不可变数据；

对比模块，用于对所述原有数据和所述新数据进行对比，获得对比结果；其中，在所述对比的过程中跳过没有变化的节点；

渲染模块，用于根据所述对比结果渲染所述结果页面，并展示渲染获得的所述结果页面。

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

至少一个处理器；以及

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

所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行如权利要求1至9任一所述的方法。

12.一种非暂态计算机可读存储介质，其特征在于，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行如权利要求1至9任一所述的方法。