页面渲染中的数据处理方法、装置及电子设备与流程

本技术涉及计算机，具体涉及一种页面渲染中的数据处理方法、页面渲染中的数据生成方法、页面展示方法、装置、电子设备及计算机可读存储介质。

背景技术：

1、传统的应用页面渲染方式，往往需等待页面所需数据获取完成后，再进行页面渲染并展示给用户，页面渲染效率较低，影响使用体验。为解决这一问题，流式渲染方式应运而生，但该方式主要适配浏览器环境，对于非浏览器宿主容器（如小程序、应用等）往往难以有效适配。

技术实现思路

1、本技术提供了一种页面渲染中的数据处理方法、页面渲染中的数据生成方法、页面展示方法、装置、电子设备及计算机可读存储介质，能够在非浏览器宿主容器中实现页面的流式渲染，从而提升页面加载时的加载效率。具体方案如下：

2、第一方面，本技术实施例提供了一种页面渲染中的数据处理方法，所述方法包括：

3、响应于接收到针对非浏览器宿主容器中的目标页面的页面访问操作，获取所述目标页面的结构化数据；所述结构化数据中包括同步组件的组件内容数据和异步组件的骨架屏数据，所述同步组件和所述异步组件为与所述目标页面相关联的组件；根据所述结构化数据，获得初始页面；所述初始页面中展示有基于所述同步组件的组件内容数据渲染得到的所述同步组件对应的第一真实页面元素和基于所述异步组件的骨架屏数据渲染得到的所述异步组件对应的占位页面元素，所述第一真实页面元素为具有实际展示内容的页面元素，所述占位页面元素为具有预设的占位展示内容的页面元素；响应于接收到所述异步组件的组件内容数据，根据所述异步组件的组件内容数据获得所述异步组件对应的具有实际展示内容的第二真实页面元素，并将所述占位页面元素替换为所述第二真实页面元素，得到所述目标页面。

4、第二方面，本技术实施例提供了一种页面渲染中的数据生成方法，所述方法包括：响应于接收到客户端发送的基于针对非浏览器宿主容器中的目标页面的页面访问操作所生成的页面访问请求，获取与所述目标页面相关联的同步组件对应的html字符串流格式的组件内容数据；根据所述同步组件对应的html字符串流格式的组件内容数据，获得所述目标页面的组件树；在所述组件树中渲染有同步组件，并针对未获取到组件内容数据的异步组件生成有骨架屏html片段；根据所述组件树生成所述目标页面的结构化数据；将所述结构化数据返回至所述客户端。

5、第三方面，本技术实施例提供了一种页面展示方法，所述方法包括：响应于接收到针对非浏览器宿主容器中的目标页面的页面访问操作，展示初始页面；所述初始页面中展示有第一真实页面元素和占位页面元素，所述第一真实页面元素为具有实际展示内容的页面元素，所述占位页面元素为具有预设的占位展示内容的页面元素；响应于接收到所述占位页面元素对应的组件内容数据，展示所述目标页面；所述目标页面中展示有所述同步组件对应的第一真实页面元素和所述异步组件对应的第二真实页面元素，所述第二真实页面元素为基于所述异步组件的组件内容数据渲染得到的具有实际展示内容的页面元素。

6、第四方面，本技术实施例提供了一种页面渲染中的数据处理装置，所述装置包括：第一获取单元，用于响应于接收到针对非浏览器宿主容器中的目标页面的页面访问操作，获取所述目标页面的结构化数据；所述结构化数据中包括同步组件的组件内容数据和异步组件的骨架屏数据，所述同步组件和所述异步组件为与所述目标页面相关联的组件；第一获得单元，用于根据所述结构化数据，获得初始页面；所述初始页面中展示有基于所述同步组件的组件内容数据渲染得到的所述同步组件对应的第一真实页面元素和基于所述异步组件的骨架屏数据渲染得到的所述异步组件对应的占位页面元素，所述第一真实页面元素为具有实际展示内容的页面元素，所述占位页面元素为具有预设的占位展示内容的页面元素；替换单元，用于响应于接收到所述异步组件的组件内容数据，根据所述异步组件的组件内容数据获得所述异步组件对应的具有实际展示内容的第二真实页面元素，并将所述占位页面元素替换为所述第二真实页面元素，得到所述目标页面。

7、第五方面，本技术实施例提供了另一种页面渲染中的数据生成装置，所述装置包括：第二获取单元，用于响应于接收到客户端发送的基于针对非浏览器宿主容器中的目标页面的页面访问操作所生成的页面访问请求，获取与所述目标页面相关联的同步组件对应的html字符串流格式的组件内容数据；第二获得单元，用于根据所述同步组件对应的html字符串流格式的组件内容数据，获得所述目标页面的组件树；在所述组件树中，渲染有已获取到组件内容数据的同步组件，并针对未获取到组件内容数据的异步组件生成有骨架屏html片段；生成单元，用于根据所述组件树生成所述目标页面的结构化数据；发送单元，用于将所述目标页面的结构化数据发送至所述客户端。

8、第六方面，本技术实施例提供了一种页面展示装置，所述装置包括：第一展示单元，用于响应于接收到针对非浏览器宿主容器中的目标页面的页面访问操作，展示初始页面；所述初始页面中展示有第一真实页面元素和占位页面元素，所述第一真实页面元素为所述目标页面中的部分页面元素，所述第一真实页面元素为具有实际展示内容的页面元素，所述占位页面元素为具有预设的占位展示内容的页面元素；第二展示单元，用于响应于接收到所述占位页面元素对应的组件内容数据，展示所述目标页面；所述目标页面中展示有所述同步组件对应的第一真实页面元素和所述异步组件对应的第二真实页面元素，所述第二真实页面元素为基于所述异步组件的组件内容数据渲染得到的具有实际展示内容的页面元素。

9、第七方面，本技术还提供了一种电子设备，包括：处理器；以及存储器，用于存储数据处理程序，该电子设备通电并通过所述处理器运行该程序后，执行如第一方面或者第二方面或者第三方面所述的方法。

10、第八方面，本技术实施例还提供了一种计算机可读存储介质，存储有数据处理程序，该程序被处理器运行，执行如第一方面或者第二方面或者第三方面所述的方法。

11、与现有技术相比，本技术具有以下优点：

12、本技术提供的页面渲染中的数据处理方法，包括以下步骤：响应于接收到针对非浏览器宿主容器中的目标页面的页面访问操作，获取所述目标页面的结构化数据；所述结构化数据中包括同步组件的组件内容数据和异步组件的骨架屏数据，所述同步组件和所述异步组件为与所述目标页面相关联的组件；根据所述结构化数据，获得初始页面；所述初始页面中展示有基于所述同步组件的组件内容数据渲染得到的所述同步组件对应的第一真实页面元素和基于所述异步组件的骨架屏数据渲染得到的所述异步组件对应的占位页面元素，所述第一真实页面元素为具有实际展示内容的页面元素，所述占位页面元素为具有预设的占位展示内容的页面元素；响应于接收到所述异步组件的组件内容数据，根据所述异步组件的组件内容数据获得所述异步组件对应的具有实际展示内容的第二真实页面元素，并将所述占位页面元素替换为所述第二真实页面元素，得到所述目标页面。

13、可见，本技术提供的页面渲染中的数据处理方法，在接收到针对非浏览器宿主容器中的目标页面的页面访问操作时，能够分两步接收数据。第一步、在所述异步组件的组件内容数据还未加载完成时预先获取所述目标页面的结构化数据，该结构化数据中包括同步组件的组件内容数据和异步组件的骨架屏数据。由于同步组件的组件内容数据在其对应的父组件被渲染时已经被加载，因此可以在较短的时间内获取到同步组件的组件内容数据。而异步组件的组件内容数据通常是在渲染时动态加载，需要一定的加载时间。本技术实施例中无需耗费时间等待异步组件的组件内容数据的加载，而是在较短的时间内获取到包括同步组件的组件内容数据和异步组件的骨架屏数据的结构化数据，并基于该结构化数据获得初始页面。这样，即可在较短的时间内实现非浏览器宿主容器中页面的快速展示，从而提升页面加载时的加载效率，提升用户体验。并且，所述初始页面中已经展示有基于所述同步组件的组件内容数据渲染得到的所述同步组件对应的第一真实页面元素和基于所述异步组件的骨架屏数据渲染得到的所述异步组件对应的占位页面元素。所述第一真实页面元素为所述目标页面中的部分页面元素，并且具有实际的展示内容，这样，基于所展示的所述第一真实页面元素，用户能够获取到所述目标页面中的部分信息，基于所展示的所述占位页面元素，用户能够了解到所述目标页面的页面布局。第二步、在所述异步组件的组件内容数据加载完成后获取所述异步组件的组件内容数据，并基于所述异步组件的组件内容数据来将原本展示有占位展示内容的所述占位页面元素替换为展示有实际展示内容的页面元素。这样，需要等待一定时间来加载的异步组件的内容能够逐渐填充至初始页面中，从而得到具有完整展示内容的所述目标页面。因此，本技术实施例提供的页面渲染中的数据处理方法，能够在非浏览器宿主容器中实现页面的流式渲染，提升页面加载时的加载效率，从而提升用户体验。