页面视图的加载方法、装置、存储介质和电子设备

摘要

本公开涉及一种页面视图的加载方法、装置、存储介质和电子设备，该方法包括：在根据第一页面数据生成目标页面的第一页面视图，并展示第一页面视图之后，获取第一页面数据，根据第一页面数据进行渲染，以生成缓存页面视图，根据缓存页面视图，获取缓存数据，缓存数据包括：缓存图像和缓存交互数据，响应于针对目标页面的触发指令，在显示屏上展示缓存图像，并获取第二页面数据，在根据第二页面数据生成目标页面的第二页面视图之前，根据缓存交互数据，执行接收到的交互指令。本公开通过使生成第一页面视图与生成缓存页面视图异步执行，确保生成准确的缓存图像，并能够在确保目标页面的展示速度的同时，实现用户与缓存图像之间的交互。

权利要求

1.一种页面视图的加载方法，其特征在于，所述方法包括：在根据第一页面数据生成目标页面的第一页面视图，并在终端设备的显示屏上展示所述第一页面视图之后，获取所述第一页面数据；

根据所述第一页面数据进行渲染，以生成缓存页面视图；

根据所述缓存页面视图，获取缓存数据，所述缓存数据包括：缓存图像和缓存交互数据，所述缓存图像为所述缓存页面视图所展示出的图像，所述缓存交互数据用于指示所述缓存页面视图能够执行的交互操作；

响应于针对所述目标页面的触发指令，在所述显示屏上展示所述缓存图像，并获取第二页面数据；

在根据所述第二页面数据生成所述目标页面的第二页面视图之前，根据所述缓存交互数据，执行接收到的交互指令。

2.根据权利要求1所述的方法，其特征在于，所述根据所述缓存页面视图，获取缓存数据，包括：对所述缓存页面视图进行截图，以得到所述缓存图像；

根据所述缓存页面视图对应的视图树，确定所述缓存交互数据。

3.根据权利要求2所述的方法，其特征在于，在所述对所述缓存页面视图进行截图，以得到所述缓存图像之前，所述根据所述缓存页面视图，获取缓存数据，还包括：若所述视图树中存在动态视图元素，控制所述动态视图元素静态展示，所述动态视图元素为动态图像或视频。

4.根据权利要求2所述的方法，其特征在于，所述视图树包括至少一个视图元素，所述根据所述缓存页面视图对应的视图树，确定所述缓存交互数据，包括：遍历所述视图树，以获取每个所述视图元素的属性信息，所述属性信息包括：该视图元素的位置；

获取所述视图树中的交互视图元素，所述交互视图元素包括交互逻辑；

将所述交互视图元素的属性信息作为所述缓存交互数据。

5.根据权利要求4所述的方法，其特征在于，所述根据所述缓存交互数据，执行接收到的交互指令，包括：获取所述交互指令在所述缓存图像上的第一位置；

确定所述缓存交互数据中，所述第一位置对应的目标交互视图元素，所述目标交互视图元素的属性信息与所述第一位置匹配；

根据所述目标交互视图元素执行所述交互指令。

6.根据权利要求4所述的方法，其特征在于，所述交互视图元素的属性信息还包括：该交互视图元素的深度，用于表征该交互视图元素对应的交互操作的优先级；所述根据所述缓存交互数据，执行接收到的交互指令，包括：获取所述交互指令在所述缓存图像上的第一位置；

确定所述缓存交互数据中，所述第一位置对应的目标交互视图元素，所述目标交互视图元素的位置与所述第一位置匹配，且所述目标交互视图元素的深度满足预设条件；

根据所述目标交互视图元素执行所述交互指令。

7.根据权利要求1-6中任一项所述的方法，其特征在于，所述方法还包括：在根据所述第二页面数据生成所述第二页面视图之后，在所述显示屏上展示所述第二页面视图。

8.一种页面视图的加载装置，其特征在于，所述装置包括：获取模块，被配置成用于在根据第一页面数据生成目标页面的第一页面视图，并在终端设备的显示屏上展示所述第一页面视图之后，获取所述第一页面数据；

渲染模块，被配置成用于根据所述第一页面数据进行渲染，以生成缓存页面视图；

所述获取模块，还被配置成用于根据所述缓存页面视图，获取缓存数据，所述缓存数据包括：缓存图像和缓存交互数据，所述缓存图像为所述缓存页面视图所展示出的图像，所述缓存交互数据用于指示所述缓存页面视图能够执行的交互操作；

处理模块，被配置成用于响应于针对所述目标页面的触发指令，在所述显示屏上展示所述缓存图像，并获取第二页面数据；

执行模块，被配置成用于在根据所述第二页面数据生成所述目标页面的第二页面视图之前，根据所述缓存交互数据，执行接收到的交互指令。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1-7中任一项所述方法的步骤。

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

存储器，其上存储有计算机程序；

处理器，用于执行所述存储器中的所述计算机程序，以实现权利要求1-7中任一项所述方法的步骤。

说明书

页面视图的加载方法、装置、存储介质和电子设备

技术领域

[0001] 本公开涉及图像处理技术领域，具体地，涉及一种页面视图的加载方法、装置、存储介质和电子设备。

背景技术

[0002] 随着终端技术的不断发展，终端设备被广泛应用于人们生活的各个方面。在用户使用终端设备上的App（英文：Application，中文：应用程序）的过程中，为了提高用户的使用体验，通常会对App页面的展示进行优化。目前，主要是通过在生成目标页面的页面视图之前，先渲染一个缓存页面视图进行展示，以提高目标页面的展示速度，降低用户的等待时间。然后在生成目标页面的页面视图之后，用页面视图替换缓存页面视图，从而完成目标页面的最终展示。

[0003] 相关技术中，通常是采用预设的兜底占位图像（例如，灰色占位图像）作为缓存页面视图，或通过预先缓存的上次生成目标页面的页面视图的页面数据，来渲染缓存页面视图。采用兜底占位图像作为缓存页面视图，用户只能看到固定的兜底占位图像，无法获得有效信息，并且用户无法与缓存页面视图进行交互。而通过缓存的页面数据来渲染缓存页面视图，虽然能够实现用户与缓存页面视图之间的交互，但在缓存的数据量较大时会引发低效的I/O（英文：Input/Output，中文：输入/输出）操作，且对缓存的页面数据渲染前需要重新测量、布局，增加了主线程的负荷，降低了目标页面的展示速度。

发明内容

[0004] 为了解决相关技术中存在的问题，本公开提供了一种页面视图的加载方法、装置、存储介质和电子设备。

[0005] 为了实现上述目的，根据本公开实施例的第一方面，提供一种页面视图的加载方法，所述方法包括：

[0006] 在根据第一页面数据生成目标页面的第一页面视图，并在终端设备的显示屏上展示所述第一页面视图之后，获取所述第一页面数据；

[0007] 根据所述第一页面数据进行渲染，以生成缓存页面视图；

[0008] 根据所述缓存页面视图，获取缓存数据，所述缓存数据包括：缓存图像和缓存交互数据，所述缓存图像为所述缓存页面视图所展示出的图像，所述缓存交互数据用于指示所述缓存页面视图能够执行的交互操作；

[0009] 响应于针对所述目标页面的触发指令，在所述显示屏上展示所述缓存图像，并获取第二页面数据；

[0010] 在根据所述第二页面数据生成所述目标页面的第二页面视图之前，根据所述缓存交互数据，执行接收到的交互指令。

[0011] 可选地，所述根据所述缓存页面视图，获取缓存数据，包括：

[0012] 对所述缓存页面视图进行截图，以得到所述缓存图像；

[0013] 根据所述缓存页面视图对应的视图树，确定所述缓存交互数据。

[0014] 可选地，在所述对所述缓存页面视图进行截图，以得到所述缓存图像之前，所述根据所述缓存页面视图，获取缓存数据，还包括：

[0015] 若所述视图树中存在动态视图元素，控制所述动态视图元素静态展示，所述动态视图元素为动态图像或视频。

[0016] 可选地，所述视图树包括至少一个视图元素，所述根据所述缓存页面视图对应的视图树，确定所述缓存交互数据，包括：

[0017] 遍历所述视图树，以获取每个所述视图元素的属性信息，所述属性信息包括：该视图元素的位置；

[0018] 获取所述视图树中的交互视图元素，所述交互视图元素包括交互逻辑；

[0019] 将所述交互视图元素的属性信息作为所述缓存交互数据。

[0020] 可选地，所述根据所述缓存交互数据，执行接收到的交互指令，包括：

[0021] 获取所述交互指令在所述缓存图像上的第一位置；

[0022] 确定所述缓存交互数据中，所述第一位置对应的目标交互视图元素，所述目标交互视图元素的属性信息与所述第一位置匹配；

[0023] 根据所述目标交互视图元素执行所述交互指令。

[0024] 可选地，所述属性信息还包括：该视图元素的深度，所述根据所述缓存交互数据，执行接收到的交互指令，包括：

[0025] 获取所述交互指令在所述缓存图像上的第一位置；

[0026] 确定所述缓存交互数据中，所述第一位置对应的目标交互视图元素，所述目标交互视图元素的位置与所述第一位置匹配，且所述目标交互视图元素的深度满足预设条件；

[0027] 根据所述目标交互视图元素执行所述交互指令。

[0028] 可选地，所述方法还包括：

[0029] 在根据所述第二页面数据生成所述第二页面视图之后，在所述显示屏上展示所述第二页面视图。

[0030] 根据本公开实施例的第二方面，提供一种页面视图的加载装置，所述装置包括：

[0031] 获取模块，被配置成用于在根据第一页面数据生成目标页面的第一页面视图，并在终端设备的显示屏上展示所述第一页面视图之后，获取所述第一页面数据；

[0032] 渲染模块，被配置成用于根据所述第一页面数据进行渲染，以生成缓存页面视图；

[0033] 所述获取模块，还被配置成用于根据所述缓存页面视图，获取缓存数据，所述缓存数据包括：缓存图像和缓存交互数据，所述缓存图像为所述缓存页面视图所展示出的图像，所述缓存交互数据用于指示所述缓存页面视图能够执行的交互操作；

[0034] 处理模块，被配置成用于响应于针对所述目标页面的触发指令，在所述显示屏上展示所述缓存图像，并获取第二页面数据；

[0035] 执行模块，被配置成用于在根据所述第二页面数据生成所述目标页面的第二页面视图之前，根据所述缓存交互数据，执行接收到的交互指令。

[0036] 可选地，所述获取模块包括：

[0037] 截图子模块，被配置成用于对所述缓存页面视图进行截图，以得到所述缓存图像；

[0038] 第一确定子模块，被配置成用于根据所述缓存页面视图对应的视图树，确定所述缓存交互数据。

[0039] 可选地，所述获取模块还包括：

[0040] 控制子模块，被配置成用于在所述对所述缓存页面视图进行截图，以得到所述缓存图像之前，若所述视图树中存在动态视图元素，控制所述动态视图元素静态展示，所述动态视图元素为动态图像或视频。

[0041] 可选地，所述视图树包括至少一个视图元素，所述第一确定子模块被配置成用于：

[0042] 遍历所述视图树，以获取每个所述视图元素的属性信息，所述属性信息包括：该视图元素的位置；

[0043] 获取所述视图树中的交互视图元素，所述交互视图元素包括交互逻辑；

[0044] 将所述交互视图元素的属性信息作为所述缓存交互数据。

[0045] 可选地，所述执行模块包括：

[0046] 获取子模块，被配置成用于获取所述交互指令在所述缓存图像上的第一位置；

[0047] 第二确定子模块，被配置成用于确定所述缓存交互数据中，所述第一位置对应的目标交互视图元素，所述目标交互视图元素的属性信息与所述第一位置匹配；

[0048] 执行子模块，被配置成用于根据所述目标交互视图元素执行所述交互指令。

[0049] 可选地，所述属性信息还包括：该视图元素的深度，所述执行模块包括：

[0050] 获取子模块，被配置成用于获取所述交互指令在所述缓存图像上的第一位置；

[0051] 第二确定子模块，被配置成用于确定所述缓存交互数据中，所述第一位置对应的目标交互视图元素，所述目标交互视图元素的位置与所述第一位置匹配，且所述目标交互视图元素的深度满足预设条件；

[0052] 执行子模块，被配置成用于根据所述目标交互视图元素执行所述交互指令。

[0053] 可选地，所述装置还包括：

[0054] 展示模块，被配置成用于在根据所述第二页面数据生成所述第二页面视图之后，在所述显示屏上展示所述第二页面视图。

[0055] 根据本公开实施例的第三方面，提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现以上第一方面所述方法的步骤。

[0056] 根据本公开实施例的第四方面，提供一种电子设备，包括：

[0057] 存储器，其上存储有计算机程序；

[0058] 处理器，用于执行所述存储器中的所述计算机程序，以实现以上第一方面所述方法的步骤。

[0059] 通过上述技术方案，本公开首先在根据第一页面数据生成目标页面的第一页面视图，并在终端设备的显示屏上展示第一页面视图之后，获取第一页面数据，并根据第一页面数据进行渲染，以生成缓存页面视图，然后根据缓存页面视图，获取缓存数据，其中，缓存数据包括：缓存图像和缓存交互数据，缓存图像为缓存页面视图所展示出的图像，缓存交互数据用于指示缓存页面视图能够执行的交互操作，之后响应于针对目标页面的触发指令，在显示屏上展示缓存图像，并获取第二页面数据，最后在根据第二页面数据生成目标页面的第二页面视图之前，根据缓存交互数据，执行接收到的交互指令。本公开通过在根据第一页面数据生成第一页面视图之后，再获取一份第一页面数据来生成缓存页面视图，使生成第一页面视图与生成缓存页面视图异步执行，从而使根据缓存页面视图获取的缓存图像不受交互指令影响，确保生成准确的缓存图像，然后在接收到触发指令时，直接展示缓存图像，并根据缓存交互数据，执行接收到的交互指令，能够在确保目标页面的展示速度的同时，实现用户与缓存图像之间的交互。

[0060] 本公开的其他特征和优点将在随后的具体实施方式部分予以详细说明。

附图说明

[0061] 附图是用来提供对本公开的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本公开，但并不构成对本公开的限制。在附图中：

[0062] 图1是根据一示例性实施例示出的一种页面视图的加载方法的流程图；

[0063] 图2是根据图1所示实施例示出的一种步骤103的流程图；

[0064] 图3是根据图1所示实施例示出的另一种步骤103的流程图；

[0065] 图4是根据图1所示实施例示出的一种步骤105的流程图；

[0066] 图5是根据一示例性实施例示出的另一种页面视图的加载方法的流程图；

[0067] 图6是根据一示例性实施例示出的一种页面视图的加载装置的框图；

[0068] 图7是根据图6所示实施例示出的一种获取模块的框图；

[0069] 图8是根据图6所示实施例示出的另一种获取模块的框图；

[0070] 图9是根据图6所示实施例示出的一种执行模块的框图；

[0071] 图10是根据一示例性实施例示出的另一种页面视图的加载装置的框图；

[0072] 图11是根据一示例性实施例示出的一种电子设备的框图。

具体实施方式

[0073] 以下结合附图对本公开的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本公开，并不用于限制本公开。

[0074] 在介绍本公开提供的页面视图的加载方法、装置、存储介质和电子设备之前，首先对本公开各个实施例所涉及应用场景进行介绍，该应用场景可以是对目标页面的页面视图进行加载的场景。在该场景下，当用户通过终端设备打开目标页面时，终端设备可以向服务器发送数据请求，以获取服务器发送的目标页面的页面数据，并根据目标页面的页面数据，来生成目标页面的页面视图。其中，目标页面可以是APP页面，也可以是网页页面，还可以是表单页面，本公开对此不作具体限定。该终端例如可以是智能手机、平板电脑、智能手表、智能手环、PDA（英文：Personal Digital Assistant，中文：个人数字助理）等移动终端，也可以是台式计算机等固定终端。该服务器可以包括但不限于：实体服务器，服务器集群或云端服务器等。

[0075] 图1是根据一示例性实施例示出的一种页面视图的加载方法的流程图。如图1所示，该方法可以包括以下步骤：

[0076] 步骤101，在根据第一页面数据生成目标页面的第一页面视图，并在终端设备的显示屏上展示第一页面视图之后，获取第一页面数据。

[0077] 步骤102，根据第一页面数据进行渲染，以生成缓存页面视图。

[0078] 举例来说，对目标页面进行展示的过程，实际上是对目标页面的页面视图进行加载的过程。当用户在第一时刻通过终端设备打开目标页面时，会向终端设备发送针对目标页面的触发指令。终端设备在接收到触发指令后，可以获取服务器发送的目标页面的第一页面数据，之后可以通过终端设备的操作系统的主线程对第一页面数据进行渲染，以生成目标页面的第一页面视图，并在终端设备的显示屏上展示第一页面视图。其中，终端设备的操作系统例如可以是：Android（中文：安卓）、iOS（英文：iPhone Operation System）和Windows操作系统等。在终端设备的显示屏上展示第一页面视图之后，可以通过终端设备的操作系统的异步线程再获取一份第一页面数据（即通过异步线程复制一份第一页面数据），并通过异步线程对获取到的第一页面数据进行渲染，以生成缓存页面视图。

[0079] 步骤103，根据缓存页面视图，获取缓存数据。其中，缓存数据包括：缓存图像和缓存交互数据，缓存图像为缓存页面视图所展示出的图像，缓存交互数据用于指示缓存页面视图能够执行的交互操作。

[0080] 具体的，缓存页面视图可以对应至少一个视图元素，视图元素为在缓存页面视图上显示的元素。视图元素可以是文本元素、图像元素和交互视图元素，文本元素用于表征缓存页面视图中的文本，图像元素用于表征缓存页面视图中的图像，交互视图元素用于表征缓存页面视图中能够执行的交互操作，交互操作例如可以是点击操作、曝光操作。在生成缓存页面视图之后，首先可以通过异步线程对缓存页面视图进行截图，以得到缓存页面视图所展示出的缓存图像，以及缓存图像的图像信息，其中，图像信息可以包括缓存图像的高度和宽度。同时，若缓存页面视图为能够执行交互操作的视图（即缓存页面视图包括交互视图元素），可以获取用于指示缓存页面视图能够执行的交互操作的缓存交互数据。然后可以将缓存图像和缓存交互数据作为缓存数据，存储在终端设备本地。

[0081] 其中，缓存交互数据可以包括缓存页面视图对应的每个交互视图元素的位置和深度。每个交互视图元素的位置可以理解为该交互视图元素在缓存页面视图上对应的区域的位置，例如，当交互视图元素在缓存页面视图上对应的区域为矩形时，可以将该矩形的四个顶点在缓存页面视图上的坐标作为该交互视图元素的位置。以采用四坐标的形式来表示交互视图元素的位置为例，交互视图元素的位置可以为（0，0，480，728）。每个交互视图元素的深度可以理解为该交互视图元素所表征的交互操作的优先级，深度越深，交互操作的优先级越高。

[0082] 步骤104，响应于针对目标页面的触发指令，在显示屏上展示缓存图像，并获取第二页面数据。

[0083] 在本步骤中，当用户在第二时刻再次通过终端设备打开目标页面时，终端设备会再次接收到用户发送的针对目标页面的触发指令，其中第二时刻为第一时刻之后的时刻。此时，由于终端设备中存储有包括缓存图像和缓存交互数据的缓存数据，终端设备可以响应于针对目标页面的触发指令，从存储缓存图像的缓存图像地址读取缓存图像，同时按照图像信息直接在显示屏上展示缓存图像，并获取服务器发送的目标页面的第二页面数据。
其中，可以通过异步线程展示缓存图像，通过主线程来获取第二页面数据。

[0084] 需要说明的是，第一页面数据和第二页面数据可以相同，也可以不同。如果第一页面数据和第二页面数据相同，表示第二时刻的目标页面，相比于第一时刻的目标页面没有改变。如果第一页面数据和第二页面数据不相同，表示第二时刻的目标页面，相比于第一时刻的目标页面发生了改变。在显示屏上展示缓存图像，实际上展示的是缓存页面视图的截图，而不是固定的兜底占位图像，目标页面的展示效果好，用户能够获取到有效的信息。并且，不需要通过对缓存的页面数据进行加载来展示，而是直接在显示屏上展示缓存图像，提高了目标页面的展示速度。进一步的，直接在显示屏上展示缓存图像，只需要加载缓存图像，能够避免由于缓存的页面数据与图像数据的加载地址不同、加载速度不同导致图像出现视觉闪动的情况。

[0085] 步骤105，在根据第二页面数据生成目标页面的第二页面视图之前，根据缓存交互数据，执行接收到的交互指令。

[0086] 示例地，在主线程根据第二页面数据生成目标页面的第二页面视图之前，若终端设备接收到用户发出的交互指令，异步线程可以根据缓存交互数据，执行接收到的交互指令。执行交互指令的方式可以是：首先获取用户发出的交互指令在缓存图像上的位置，并根据交互指令在缓存图像上的位置，利用预设规则，确定缓存交互数据中是否存在，与交互指令在缓存图像上的位置对应的交互视图元素。若存在，根据该交互视图元素，执行接收到的交互指令。其中，预设规则例如可以是：从缓存交互数据包括的多个交互视图元素的位置中，获取与交互指令在缓存图像上的位置相匹配，且深度最深的交互视图元素。进一步的，主线程在根据第二页面数据生成第二页面视图之后，可以在显示屏上展示第二页面视图，即用第二页面视图来替换显示屏上展示的缓存图像。在显示屏上展示第二页面视图之后，可以将第二页面数据作为第一页面数据，重复执行步骤101至步骤103的步骤，以更新缓存数据。

[0087] 需要说明的是，通过异步线程生成缓存页面视图的过程是在操作系统的后台异步执行的，即通过主线程生成第一页面视图与通过异步线程生成缓存页面视图是异步执行的，并且缓存页面视图并不在显示屏上展示。同时，为了避免发生跨线程数据同步的问题，需要隔离主线程的第一页面数据和异步线程的第一页面数据。相比于将生成第一页面视图与生成缓存页面视图均由主线程来完成，通过将生成第一页面视图与生成缓存页面视图异步执行，可以避免由于主线程因响应交互指令而导致无法对缓存页面视图进行截图的问题，提高了截图的成功率。

[0088] 综上所述，本公开首先在根据第一页面数据生成目标页面的第一页面视图，并在终端设备的显示屏上展示第一页面视图之后，获取第一页面数据，并根据第一页面数据进行渲染，以生成缓存页面视图，然后根据缓存页面视图，获取缓存数据，其中，缓存数据包括：缓存图像和缓存交互数据，缓存图像为缓存页面视图所展示出的图像，缓存交互数据用于指示缓存页面视图能够执行的交互操作，之后响应于针对目标页面的触发指令，在显示屏上展示缓存图像，并获取第二页面数据，最后在根据第二页面数据生成目标页面的第二页面视图之前，根据缓存交互数据，执行接收到的交互指令。本公开通过在根据第一页面数据生成第一页面视图之后，再获取一份第一页面数据来生成缓存页面视图，使生成第一页面视图与生成缓存页面视图异步执行，从而使根据缓存页面视图获取的缓存图像不受交互指令影响，确保生成准确的缓存图像，然后在接收到触发指令时，直接展示缓存图像，并根据缓存交互数据，执行接收到的交互指令，能够在确保目标页面的展示速度的同时，实现用户与缓存图像之间的交互。

[0089] 图2是根据图1所示实施例示出的一种步骤103的流程图。如图2所示，步骤103可以包括以下步骤：

[0090] 步骤1031，对缓存页面视图进行截图，以得到缓存图像。

[0091] 举例来说，在生成缓存页面视图之后，异步线程可以对缓存页面视图进行截图，以得到缓存图像。之后异步线程可以将缓存图像存储到预设的图像缓存地址，并获取缓存图像的图像信息，其中，图像信息可以包括缓存图像的高度和宽度。

[0092] 步骤1032，根据缓存页面视图对应的视图树，确定缓存交互数据。

[0093] 示例地，缓存页面视图可以对应一个视图树，该视图树包括至少一个视图元素。异步线程首先可以遍历视图树，以获取每个视图元素的属性信息，属性信息包括：该视图元素的位置。其次，异步线程可以获取视图树中的交互视图元素，交互视图元素包括交互逻辑。例如，可以由异步线程通过API（英文：Application Programming Interface，中文：应用程序接口），来获取包括交互逻辑的交互视图元素，交互逻辑可以包括交互类型（例如可以是点击、埋点上报）和交互属性（例如可以是跳转链接）。最后异步线程可以将交互视图元素的属性信息作为缓存交互数据。

[0094] 其中，获取每个视图元素的属性信息的方式可以是：利用DFS（英文：Depth-First-Search，中文：深度优先遍历算法）遍历整个视图树，在遍历过程中逐步生成每个视图元素的深度。之后可以将视图树的根节点对应的视图元素的深度标记为0，并将视图树的根节点的子节点对应的视图元素的深度标记为1，依次递增。再以根节点为原点建立坐标系，计算每个视图元素在该坐标系中的位置，并将该视图元素在该坐标系中的位置作为该视图元素的属性信息。

[0095] 举例来说，缓存交互数据的数据格式可以如下所示：

[0096] {

[0097] imagePath：“/ data / user / 0 / com.xxx.xxx / xxxx”,

[0098] width:480,

[0099] height:728,

[0100] CacheEvents:[

[0101] {

[0102] type:“click”, //点击行为

[0103] positition：[0,0,480,728],

[0104] url:“xxxx” //跳转落地页

[0105] },

[0106] {

[0107] type:“click”,

[0108] positition：[400,648,440,688],

[0109] url:“xxxx” //弹出负反馈

[0110] },

[0111] {

[0112] type:“exposure”,//曝光行为

[0113] positition：[0,0,480,728],

[0114] report:{

[0115] xxx //数据上报内容

[0116] }

[0117] },

[0118] ],

[0119] }

[0120] 上述数据结构中的参数的说明如表1所示。

[0121] 表1

[0122]

[0123] 图3是根据图1所示实施例示出的另一种步骤103的流程图。如图3所示，在步骤1031之前，步骤103还可以包括以下步骤：

[0124] 步骤1033，若视图树中存在动态视图元素，控制动态视图元素静态展示，动态视图元素为动态图像或视频。

[0125] 举例来说，若视图树中存在动态视图元素（即缓存页面视图中包括动态视图元素时），异步线程在对缓存页面视图进行截图时难以把控截图的时机，容易出现截取的图像不完整的情况，这会影响对缓存页面视图进行截图的质量。为了提高对缓存页面视图进行截图的质量，可以在视图树中存在动态视图元素时，控制动态视图元素静态展示。其中，动态视图元素可以为动态图像，动态图像例如可以为GIF（英文：Graphics Interchange Format，中文：图形交换格式）图，动态视图元素也可以为视频（例如动画）。举个例子，当动态视图元素为动画时，异步线程可以在对缓存页面视图渲染时，禁止动态视图元素的动画效果，并获取动态视图元素的第一帧画面进行展示。

[0126] 图4是根据图1所示实施例示出的一种步骤105的流程图。如图4所示，步骤105可以包括以下步骤：

[0127] 步骤1051，获取交互指令在缓存图像上的第一位置。

[0128] 步骤1052，确定缓存交互数据中，第一位置对应的目标交互视图元素，目标交互视图元素的属性信息与第一位置匹配。

[0129] 步骤1053，根据目标交互视图元素执行交互指令。

[0130] 在一种场景下，若终端设备接收到用户发出的交互指令，异步线程首先可以获取交互指令在缓存图像上的第一位置。例如，当用户在显示屏上的某个位置进行点击操作时（即交互指令为点击操作），异步线程可以将该位置作为第一位置。之后异步线程可以进一步确定缓存交互数据中，是否存在属性信息与第一位置匹配的交互视图元素。若存在，将该交互视图元素作为与第一位置对应的目标交互视图元素。最后根据目标交互视图元素执行交互指令。其中，确定是否存在属性信息与第一位置匹配的交互视图元素的方式可以是：遍历缓存交互数据中各个交互视图元素的属性信息，将第一位置与各个交互视图元素的属性信息包括的视图元素的位置进行比较，若第一位置位于某一交互视图元素的位置对应的区域内，则确定该交互视图元素的属性信息与第一位置匹配。

[0131] 可选地，属性信息还可以包括：该视图元素的深度，步骤105可以包括以下步骤：

[0132] 步骤A），获取交互指令在缓存图像上的第一位置。

[0133] 步骤B），确定缓存交互数据中，第一位置对应的目标交互视图元素，目标交互视图元素的位置与第一位置匹配，且目标交互视图元素的深度满足预设条件。

[0134] 步骤C），根据目标交互视图元素执行交互指令。

[0135] 在另一种场景下，在对视图树进行遍历的过程中，还可以将每个视图元素的深度作为该视图元素的属性信息，并按照每个视图元素的深度从深到浅的顺序，依次对每个视图元素进行排列。若终端设备接收到用户发出的交互指令，异步线程首先可以获取交互指令在缓存图像上的第一位置。之后异步线程可以将缓存交互数据中，交互视图元素的位置与第一位置匹配，且交互视图元素的深度满足预设条件的交互视图元素作为第一位置对应的目标交互视图元素。可以理解为，位置与第一位置匹配的交互视图元素可以有多个，那么可以将这多个交互视图元素中深度最深的交互视图元素作为目标交互视图元素。例如，可以对排序后的视图树进行遍历，找到位置与第一位置匹配的第一个交互视图元素作为目标交互视图元素。最后根据目标交互视图元素执行交互指令。

[0136] 图5是根据一示例性实施例示出的另一种页面视图的加载方法的流程图。如图5所示，该方法还可以包括以下步骤：

[0137] 步骤106，在根据第二页面数据生成第二页面视图之后，在显示屏上展示第二页面视图。

[0138] 示例地，异步线程在显示屏上展示缓存图像后，用户可以先通过缓存图像来查看目标页面。同时，主线程可以继续根据第二页面数据来生成第二页面视图，并在生成第二页面视图之后，在显示屏上展示第二页面视图，即用第二页面视图来替换显示屏上展示的缓存图像。

[0139] 综上所述，本公开首先在根据第一页面数据生成目标页面的第一页面视图，并在终端设备的显示屏上展示第一页面视图之后，获取第一页面数据，并根据第一页面数据进行渲染，以生成缓存页面视图，然后根据缓存页面视图，获取缓存数据，其中，缓存数据包括：缓存图像和缓存交互数据，缓存图像为缓存页面视图所展示出的图像，缓存交互数据用于指示缓存页面视图能够执行的交互操作，之后响应于针对目标页面的触发指令，在显示屏上展示缓存图像，并获取第二页面数据，最后在根据第二页面数据生成目标页面的第二页面视图之前，根据缓存交互数据，执行接收到的交互指令。本公开通过在根据第一页面数据生成第一页面视图之后，再获取一份第一页面数据来生成缓存页面视图，使生成第一页面视图与生成缓存页面视图异步执行，从而使根据缓存页面视图获取的缓存图像不受交互指令影响，确保生成准确的缓存图像，然后在接收到触发指令时，直接展示缓存图像，并根据缓存交互数据，执行接收到的交互指令，能够在确保目标页面的展示速度的同时，实现用户与缓存图像之间的交互。

[0140] 图6是根据一示例性实施例示出的一种页面视图的加载装置的框图。如图6所示，该装置200包括：

[0141] 获取模块201，被配置成用于在根据第一页面数据生成目标页面的第一页面视图，并在终端设备的显示屏上展示第一页面视图之后，获取第一页面数据。

[0142] 渲染模块202，被配置成用于根据第一页面数据进行渲染，以生成缓存页面视图。

[0143] 获取模块201，还被配置成用于根据缓存页面视图，获取缓存数据，缓存数据包括：缓存图像和缓存交互数据，缓存图像为缓存页面视图所展示出的图像，缓存交互数据用于指示缓存页面视图能够执行的交互操作。

[0144] 处理模块203，被配置成用于响应于针对目标页面的触发指令，在显示屏上展示缓存图像，并获取第二页面数据。

[0145] 执行模块204，被配置成用于在根据第二页面数据生成目标页面的第二页面视图之前，根据缓存交互数据，执行接收到的交互指令。

[0146] 图7是根据图6所示实施例示出的一种获取模块的框图。如图7所示，获取模块201包括：

[0147] 截图子模块2011，被配置成用于对缓存页面视图进行截图，以得到缓存图像。

[0148] 第一确定子模块2012，被配置成用于根据缓存页面视图对应的视图树，确定缓存交互数据。

[0149] 图8是根据图6所示实施例示出的另一种获取模块的框图。如图8所示，获取模块201还包括：

[0150] 控制子模块2013，被配置成用于在对缓存页面视图进行截图，以得到缓存图像之前，若视图树中存在动态视图元素，控制动态视图元素静态展示，动态视图元素为动态图像或视频。

[0151] 可选地，视图树包括至少一个视图元素，第一确定子模块2012被配置成用于：

[0152] 遍历视图树，以获取每个视图元素的属性信息，属性信息包括：该视图元素的位置。

[0153] 获取视图树中的交互视图元素，交互视图元素包括交互逻辑。

[0154] 将交互视图元素的属性信息作为缓存交互数据。

[0155] 图9是根据图6所示实施例示出的一种执行模块的框图。如图9所示，执行模块204包括：

[0156] 获取子模块2041，被配置成用于获取交互指令在缓存图像上的第一位置。

[0157] 第二确定子模块2042，被配置成用于确定缓存交互数据中，第一位置对应的目标交互视图元素，目标交互视图元素的属性信息与第一位置匹配。

[0158] 执行子模块2043，被配置成用于根据目标交互视图元素执行交互指令。

[0159] 可选地，属性信息还包括：该视图元素的深度，执行模块204包括：

[0160] 获取子模块2041，被配置成用于获取交互指令在缓存图像上的第一位置。

[0161] 第二确定子模块2042，被配置成用于确定缓存交互数据中，第一位置对应的目标交互视图元素，目标交互视图元素的位置与第一位置匹配，且目标交互视图元素的深度满足预设条件。

[0162] 执行子模块2043，被配置成用于根据目标交互视图元素执行交互指令。

[0163] 图10是根据一示例性实施例示出的另一种页面视图的加载装置的框图。如图10所示，该装置200还包括：

[0164] 展示模块205，被配置成用于在根据第二页面数据生成第二页面视图之后，在显示屏上展示第二页面视图。

[0165] 关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

[0166] 综上所述，本公开首先在根据第一页面数据生成目标页面的第一页面视图，并在终端设备的显示屏上展示第一页面视图之后，获取第一页面数据，并根据第一页面数据进行渲染，以生成缓存页面视图，然后根据缓存页面视图，获取缓存数据，其中，缓存数据包括：缓存图像和缓存交互数据，缓存图像为缓存页面视图所展示出的图像，缓存交互数据用于指示缓存页面视图能够执行的交互操作，之后响应于针对目标页面的触发指令，在显示屏上展示缓存图像，并获取第二页面数据，最后在根据第二页面数据生成目标页面的第二页面视图之前，根据缓存交互数据，执行接收到的交互指令。本公开通过在根据第一页面数据生成第一页面视图之后，再获取一份第一页面数据来生成缓存页面视图，使生成第一页面视图与生成缓存页面视图异步执行，从而使根据缓存页面视图获取的缓存图像不受交互指令影响，确保生成准确的缓存图像，然后在接收到触发指令时，直接展示缓存图像，并根据缓存交互数据，执行接收到的交互指令，能够在确保目标页面的展示速度的同时，实现用户与缓存图像之间的交互。

[0167] 图11是根据一示例性实施例示出的一种电子设备700的框图。如图11所示，该电子设备700可以包括：处理器701，存储器702。该电子设备700还可以包括多媒体组件703，输入/输出（I/O）接口704，以及通信组件705中的一者或多者。

[0168] 其中，处理器701用于控制该电子设备700的整体操作，以完成上述的页面视图的加载方法中的全部或部分步骤。存储器702用于存储各种类型的数据以支持在该电子设备700的操作，这些数据例如可以包括用于在该电子设备700上操作的任何应用程序或方法的指令，以及应用程序相关的数据，例如联系人数据、收发的消息、图像、音频、视频等等。该存储器702可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如静态随机存取存储器（Static Random Access Memory，简称SRAM），电可擦除可编程只读存储器（Electrically Erasable Programmable Read-Only Memory，简称EEPROM），可擦除可编程只读存储器（Erasable Programmable Read-Only Memory，简称EPROM），可编程只读存储器（Programmable Read-Only Memory，简称PROM），只读存储器（Read-Only Memory，简称ROM），磁存储器，快闪存储器，磁盘或光盘。多媒体组件703可以包括屏幕和音频组件。其中屏幕例如可以是触摸屏，音频组件用于输出和/或输入音频信号。例如，音频组件可以包括一个麦克风，麦克风用于接收外部音频信号。所接收的音频信号可以被进一步存储在存储器702或通过通信组件705发送。音频组件还包括至少一个扬声器，用于输出音频信号。I/O接口704为处理器701和其他接口模块之间提供接口，上述其他接口模块可以是键盘，鼠标，按钮等。这些按钮可以是虚拟按钮或者实体按钮。通信组件705用于该电子设备700与其他设备之间进行有线或无线通信。无线通信，例如Wi-Fi，蓝牙，近场通信（Near Field Communication，简称NFC），2G、3G、4G、NB-IOT、eMTC、或其他5G等等，或它们中的一种或几种的组合，在此不做限定。因此相应的该通信组件705可以包括：Wi-Fi模块，蓝牙模块，NFC模块等等。

[0169] 在一示例性实施例中，电子设备700可以被一个或多个应用专用集成电路（Application Specific Integrated Circuit，简称ASIC）、数字信号处理器（Digital Signal Processor，简称DSP）、数字信号处理设备（Digital Signal Processing Device，简称DSPD）、可编程逻辑器件（Programmable Logic Device，简称PLD）、现场可编程门阵列（Field Programmable Gate Array，简称FPGA）、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述的页面视图的加载方法。

[0170] 在另一示例性实施例中，还提供了一种包括程序指令的计算机可读存储介质，该程序指令被处理器执行时实现上述的页面视图的加载方法的步骤。例如，该计算机可读存储介质可以为上述包括程序指令的存储器702，上述程序指令可由电子设备700的处理器701执行以完成上述的页面视图的加载方法。

[0171] 在另一示例性实施例中，还提供一种计算机程序产品，该计算机程序产品包含能够由可编程的装置执行的计算机程序，该计算机程序具有当由该可编程的装置执行时用于执行上述的页面视图的加载方法的代码部分。

[0172] 以上结合附图详细描述了本公开的优选实施方式，但是，本公开并不限于上述实施方式中的具体细节，在本公开的技术构思范围内，可以对本公开的技术方案进行多种简单变型，这些简单变型均属于本公开的保护范围。

[0173] 另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合，为了避免不必要的重复，本公开对各种可能的组合方式不再另行说明。

[0174] 此外，本公开的各种不同的实施方式之间也可以进行任意组合，只要其不违背本公开的思想，其同样应当视为本公开所公开的内容。