页面渲染方法、装置和电子设备制造方法及图纸

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

【技术实现步骤摘要】
页面渲染方法、装置和电子设备
本说明书涉及互联网
，尤其涉及一种页面渲染方法、装置和电子设备。
技术介绍
小程序的运行从架构上分为网页视图(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的实现本文档来自技高网...

【技术保护点】
1.一种页面渲染方法，其特征在于，包括：/n获取用户在小程序所展示页面上的操作信息；/n根据所述操作信息和所述小程序的原有数据，生成所述小程序的新数据；其中，所述小程序的原有数据和新数据为不可变数据，并且所述原有数据和所述新数据的数据结构为树形结构；/n对所述原有数据和所述新数据进行深度对比，获得对比结果；/n根据所述对比结果渲染页面，并展示渲染获得的页面；所述渲染获得的页面为执行所述操作信息后的结果页面。/n

【技术特征摘要】
1.一种页面渲染方法，其特征在于，包括：
获取用户在小程序所展示页面上的操作信息；
根据所述操作信息和所述小程序的原有数据，生成所述小程序的新数据；其中，所述小程序的原有数据和新数据为不可变数据，并且所述原有数据和所述新数据的数据结构为树形结构；
对所述原有数据和所述新数据进行深度对比，获得对比结果；
根据所述对比结果渲染页面，并展示渲染获得的页面；所述渲染获得的页面为执行所述操作信息后的结果页面。


2.根据权利要求1所述的方法，其特征在于，所述获取用户在小程序所展示页面上的操作信息之前，还包括：
将所述小程序的原有数据转换为不可变数据。


3.根据权利要求2所述的方法，其特征在于，所述对所述原有数据和所述新数据进行深度对比，获得对比结果包括：
遍历所述小程序的原有数据；
在所述小程序的新数据中，查找当前遍历的原有数据中第一关键字对应的值；
如果未查找到，则将预先建立的数据对象中与所述第一关键字对应路径的值设置为所述第一关键字对应的值；其中，所述数据对象用于存储所述原有数据与所述新数据的对比结果。


4.根据权利要求3所述的方法，其特征在于，还包括：
在将所述小程序的原有数据遍历完成之后，遍历所述小程序的新数据；
如果当前遍历的新数据中第二关键字对应的值与所述原有数据中所述第二关键字对应的值不相等，则将所述数据对象中所述第二关键字对应路径的值设置为当前遍历的新数据中第二关键字对应的值；
在将所述小程序的新数据遍历完成之后，如果所述数据对象不是空对象，则所述数据对象的值为所述原有数据与所述新数据的对比结果。


5.根据权利要求3或4所述的方法，其特征在于，所述遍历所述小程序的原有数据之前，还包括：
新建数据对象，所述数据对象的初始值为空，所述数据对象用于存储所述原有数据与所述新数据的对比结果。


6.一种页面渲染装置，其特征在于，包括：
获取模块，用于获取用户在小程序所展示页面上的操作信息；
生成模块，用于根据所述获取模块获取的操作信息和所述小程序的原有数据，生成所述小程序的新数据；其中，所述小程序的原有数据和新数据为不可变数据，并且所述原有数据和所述新数据的数据结构为树形结构；
对比模块，用于对所述原有数据和...

【专利技术属性】
技术研发人员：陈建，
申请(专利权)人：支付宝杭州信息技术有限公司，
类型：发明
国别省市：浙江;33