页面数据处理方法、装置、存储介质及电子设备与流程

本申请实施例涉及计算机，尤其涉及页面数据处理方法、装置、存储介质及电子设备。

背景技术：

1、在渲染应用程序对应的页面的场景中，可以基于应用程序直接渲染页面中的组件，这种渲染方式为基于原生应用渲染，也可以基于某些非应用原生的组件渲染，这种渲染方式为基于页面组件渲染，比如，可以使用webview来渲染页面中的组件。基于原生应用渲染的渲染方式比基于页面组件渲染的渲染方式速度快，为了优化基于页面组件渲染情况下用户的视觉体验，可以在显示基于页面组件的渲染结果之前，为用户显示骨架屏，待基于页面组件的渲染结束后，再使用渲染结果取代骨架屏。但是，相关技术中，骨架屏在生成时存在生成速度慢的问题，并且还存在生成的骨架屏与最终的渲染结果差异大的问题，也降低了用户的视觉体验。

技术实现思路

1、为了提升骨架屏图片生成速度，降低骨架屏生成对于页面编辑结果提交的影响，以及优化用户的视觉体验，本申请实施例提供页面数据处理方法、装置、存储介质及电子设备。

2、一方面，本申请实施例提供了一种页面数据处理方法，所述方法包括：

3、获取页面编辑数据；

4、响应于所述页面编辑数据中包括第一页面数据的情况，对所述第一页面数据进行渲染，根据渲染结果生成第一图片，所述第一页面数据包括基于页面组件渲染的页面数据，所述第一图片为表征所述第一页面数据中的组件的分布以及形状的骨架屏图片；

5、根据所述第一图片和所述页面编辑数据，生成页面渲染数据，所述页面渲染数据用于对所述页面编辑数据中的组件进行渲染。

6、另一方面，本申请实施例提供了一种页面数据处理方法，所述方法包括：

7、获取页面渲染数据；

8、响应于所述页面渲染数据中包括第一页面数据的情况，在所述页面渲染数据中提取第一图片，所述第一页面数据包括基于页面组件渲染的页面数据，所述第一图片为表征所述第一页面数据中的组件的分布以及形状的骨架屏图片；所述第一图片根据对所述第一页面数据的渲染结果生成；

9、显示所述第一图片；

10、渲染所述第一页面数据，得到第二图片；

11、显示所述第二图片。

12、另一方面，本申请实施例提供一种页面数据处理装置，所述装置包括：

13、编辑数据获取模块，用于获取页面编辑数据；

14、第一图片生成模块，用于响应于所述页面编辑数据中包括第一页面数据的情况，对所述第一页面数据进行渲染，根据渲染结果生成第一图片，所述第一页面数据包括基于页面组件渲染的页面数据，所述第一图片为表征所述第一页面数据中的组件的分布以及形状的骨架屏图片；

15、页面渲染数据生成模块，用于根据所述第一图片和所述页面编辑数据，生成页面渲染数据，所述页面渲染数据用于对所述页面编辑数据中的组件进行渲染。

16、另一方面，本申请实施例提供一种页面数据处理装置，所述装置包括：

17、页面渲染数据获取模块，用于获取页面渲染数据；

18、第一图片提取模块，用于响应于所述页面渲染数据中包括第一页面数据的情况，在所述页面渲染数据中提取第一图片，所述第一页面数据包括基于页面组件渲染的页面数据，所述第一图片为表征所述第一页面数据中的组件的分布以及形状的骨架屏图片；所述第一图片根据对所述第一页面数据的渲染结果生成；

19、第一图片显示模块，用于显示所述第一图片；

20、第二图片渲染模块，用于渲染所述第一页面数据，得到第二图片；

21、第二图片显示模块，用于显示所述第二图片。

22、另一方面，本申请实施例提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一条指令或至少一段程序，所述至少一条指令或至少一段程序由处理器加载并执行以实现上述的一种页面数据处理方法。

23、另一方面，本申请实施例提供了一种电子设备，包括至少一个处理器，以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述至少一个处理器通过执行所述存储器存储的指令实现上述的一种页面数据处理方法。

24、另一方面，本申请实施例提供了一种计算机程序产品，包括计算机程序或指令，该计算机程序或指令被处理器执行时实现上述的一种页面数据处理方法。

25、本申请实施例提供一种页面数据处理方法、装置、存储介质及电子设备。通过神经网络可以自动识别出需要基于页面组件渲染的组件的类型以及分布，从而快速得到骨架屏图片，提升骨架屏图片的生成速度，即使是在页面编辑结果对应的文档流较大的情况下，也不阻碍页面编辑结果的提交。并且，骨架屏图片与页面的最终渲染结果高度相似，从而优化了用户的视觉体验。在实际的使用场景中，本申请实施例可以有效解决骨架屏生成速度慢、渲染效果差的问题，优化用户体验，消除了大部分用户感受到的白屏时间。

技术特征：

1.一种页面数据处理方法，其特征在于，所述方法包括：

2.根据权利要求1所述的方法，其特征在于，所述根据渲染结果生成第一图片，包括：

3.根据权利要求2所述的方法，其特征在于，所述根据每一目标的类别信息和所述每一目标的位置信息，生成所述每一目标对应的占位元素，包括：

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

5.根据权利要求1所述的方法，其特征在于，所述获取页面编辑数据，包括：

6.一种页面数据处理方法，其特征在于，所述方法包括：

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

8.根据权利要求6或7所述的方法，其特征在于，所述显示所述第二图片，包括：

9.一种页面数据处理装置，其特征在于，所述装置包括：

10.一种页面数据处理装置，其特征在于，所述装置包括：

11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有至少一条指令或至少一段程序，所述至少一条指令或至少一段程序由处理器加载并执行以实现如权利要求1至5中任一项所述的一种页面数据处理方法，或权利要求6至8中任一项所述的一种页面数据处理方法。

12.一种电子设备，其特征在于，包括至少一个处理器，以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述至少一个处理器通过执行所述存储器存储的指令实现如权利要求1至5中任一项所述的一种页面数据处理方法，或权利要求6至8中任一项所述的一种页面数据处理方法。

13.一种计算机程序产品，包括计算机程序或指令，其特征在于，该计算机程序或指令被处理器执行时实现如权利要求1至5中任一项所述的一种页面数据处理方法，或权利要求6至8中任一项所述的一种页面数据处理方法。

技术总结
本申请实施例公开了页面数据处理方法、装置、存储介质及电子设备，上述方法包括获取页面编辑数据；响应于上述页面编辑数据中包括第一页面数据的情况，对上述第一页面数据进行渲染，根据渲染结果生成第一图片，上述第一页面数据包括基于页面组件渲染的页面数据，上述第一图片为表征上述第一页面数据中的组件的分布以及形状的骨架屏图片；根据上述第一图片和上述页面编辑数据，生成页面渲染数据，上述页面渲染数据用于对上述页面编辑数据中的组件进行渲染。本申请实施例可以有效解决骨架屏生成速度慢、渲染效果差的问题。骨架屏图片与页面渲染结果高度相似，从而优化视觉体验，可以应用于广告显示尤其是落地广告显示场景，显著提升广告显示效果。

技术研发人员：黄泓玮,邓德胜
受保护的技术使用者：腾讯科技（深圳）有限公司
技术研发日：
技术公布日：2024/1/12