一种页面生成以及页面显示方法、装置与流程

1.本说明书涉及计算机技术领域，尤其涉及一种页面生成以及页面显示方法、装置。


背景技术：

2.目前，终端设备在对页面进行访问时，需要向服务器发送请求，然后服务器返回对应的页面文件，再由终端设备解析页面文件从而得到所加载出的页面，因此，在输入访问请求之后，用户需要等待一段时间才能够得到所加载出的页面。
3.而调查和实践表明，在等待页面加载的过程中，用户对于所要访问的页面的兴趣会降低，并且对页面访问的体验也会变差。
4.在现有技术中，可以通过在加载页面时向用户展示如图1所示的进度条来向用户展示页面加载的进度，但根据进度条，用户仅能够感知到等待页面加载所需要的大概时间，用户往往不会因此为正在加载的页面提供更多的耐心。


技术实现要素：

5.本说明书提供一种页面生成以及页面显示方法、装置，以部分的解决现有技术存在的上述问题。
6.本说明书采用下述技术方案：
7.本说明书提供了一种页面生成方法，包括：
8.确定第一页面，并获取所述第一页面的页面结构树；
9.根据所述页面结构树生成所述第一页面的渲染树；遍历所述页面结构树，以获得所述第一页面中所包含的组件；
10.针对第一页面中所包含的每个组件，根据该组件在所述渲染树上的映射，判断该组件是否为指定组件；
11.根据各指定组件的渲染数据，为所述第一页面生成对应的第二页面，所述第二页面用于在第一页面加载完成前替代所述第一页面展示给用户。
12.可选地，所述第一页面为通过flutter所构建的页面；
13.遍历所述页面结构树，获得所述第一页面中所包含的组件，具体包括：
14.遍历所述页面结构树，根据所述页面结构树中所包含的节点与第一页面的组件配置树中所包含的节点之间的对应关系，确定由所述组件配置树中的节点所定义出的组件。
15.可选地，根据该组件在所述渲染树上的映射，判断该组件是否为指定组件，具体包括：
16.当所述渲染树包含该组件所对应的节点时，和/或，当根据所述渲染树所渲染出的该组件位于指定区域时，将该组件作为指定组件，其中，所述指定区域为边界与所述第一页面的边界之间具有指定偏移距离的区域。
17.可选地，根据该组件在所述渲染树上的映射，判断该组件是否为指定组件，具体包括：
18.确定第三页面，并将所确定出的第三页面中所包含的组件作为对照组件；
19.针对对应有渲染树上所包含的节点的每个组件，判断该组件是否为对照组件，若否，将该组件作为指定组件。
20.可选地，确定第三页面，具体包括：
21.确定各页面中包含的跳转链接，并将包含跳转至所述第一页面的跳转链接的各页面均作为第三页面；
22.为所述第一页面生成对应的第二页面，具体包括：
23.针对每个第三页面，确定根据该第三页面中所包含的对照组件所确定出的各指定组件的渲染数据，并根据所确定出的渲染数据为所述第一页面生成对应于该第三页面的第二页面。
24.可选地，根据各指定组件的渲染数据，为所述第一页面生成对应的第二页面，具体包括：
25.针对所确定出的每个指定组件，以该指定组件的渲染数据构建该指定组件对应的占位元素，其中，所述渲染数据至少包括该指定组件的尺寸以及在第一页面中的位置；
26.生成由所确定出的各占位元素所构成的第二页面。
27.可选地，以该指定组件的渲染数据构建该指定组件对应的占位元素，具体包括：
28.确定指定组件中所包含的目标的渲染数据；
29.以该指定组件中所包含的目标的渲染数据构建该指定组件对应的占位元素。
30.本说明书提供了一种页面显示方法，当监控到用户所输入的对于第一页面的访问请求时，包括：
31.将用户所述输入的访问请求发送给目标平台；确定所述第一页面对应的第二页面，其中，所述第二页面根据上述任一所述的页面生成方法生成；
32.获取第二页面的页面文件，并对所述第二页面的页面文件进行解析，以向用户展示所述第二页面；
33.响应于所接收到的第一页面的页面文件，对所述第一页面的页面文件进行解析，并以所述第一页面替代所述第二页面展示给用户，其中，所述第一页面的页面文件是所述目标平台根据所述访问请求返回的。
34.本说明书提供了一种页面生成装置，包括：
35.结构模块，用于确定第一页面，并获取所述第一页面的页面结构树；
36.组件渲染模块，用于根据所述页面结构树生成所述第一页面的渲染树；遍历所述页面结构树，获得所述第一页面中所包含的组件；
37.组件指定模块，用于针对第一页面中所包含的每个组件，根据该组件在所述渲染树上的映射，判断该组件是否为指定组件；
38.页面生成模块，用于根据各指定组件的渲染数据，为所述第一页面生成对应的第二页面，所述第二页面用于在第一页面加载完成前替代所述第一页面展示给用户。
39.本说明书提供了一种页面显示装置，包括：
40.请求响应模块，当监控到用户所输入的对于第一页面的访问请求时，用于将用户所述输入的访问请求发送给目标平台；确定所述第一页面对应的第二页面，其中，所述第二页面根据上述任一所述的页面生成方法生成；
41.页面展示模块，用于获取第二页面的页面文件，并对所述第二页面的页面文件进行解析，以向用户展示所述第二页面；
42.页面替代模块，用于响应于所接收到的第一页面的页面文件，对所述第一页面的页面文件进行解析，并以所述第一页面替代所述第二页面展示给用户，其中，所述第一页面的页面文件是所述目标平台根据所述访问请求返回的。
43.本说明书提供了一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述页面生成或页面显示方法。
44.本说明书提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述页面生成或页面显示方法。
45.本说明书采用的上述至少一个技术方案能够达到以下有益效果：
46.在本说明书提供的页面生成或页面显示方法中，通过从第一页面中选择可视化的组件，并确定与可视化的组件具有相似轮廓的占位元素，来生成由各占位元素所构建的第二页面，并在第一页面加载完成之前展示给用户，使用户在视觉上能够感知到第一页面的加载过程，从而提高用户在等待第一页面加载时的耐心。
附图说明
47.此处所说明的附图用来提供对本说明书的进一步理解，构成本说明书的一部分，本说明书的示意性实施例及其说明用于解释本说明书，并不构成对本说明书的不当限定。在附图中：
48.图1为本说明书中一种进度条显示方法的示意图；
49.图2为本说明书提供的一种页面显示方法的流程示意图；
50.图3a为本说明书提供的一种第一页面的示意图；
51.图3b为本说明书提供的一种第二页面的示意图；
52.图4为本说明书提供的一种页面生成方法的流程示意图；
53.图5a为本说明书提供的一种组件配置树的结构示意图；
54.图5b为本说明书提供的一种页面结构树的结构示意图；
55.图5c为本说明书提供的一种渲染树的结构示意图；
56.图6a为本说明书提供的一种组件示意图；
57.图6b为本说明书提欧的一种占位元素示意图；
58.图7为本说明书提供的一种页面生成装置的示意图；
59.图8为本说明书提供的一种页面显示装置的示意图；
60.图9为本说明书提供的电子设备的结构示意图。
具体实施方式
61.因此，可以预先为请求访问的页面生成骨架屏，骨架屏中包含与请求访问的页面中的组件具有相似轮廓的占位元素，此时，当用户输入对页面的访问请求时，一方面可以根据访问请求向页面的服务器发送请求信息，并等待服务器对于该请求所返回的页面文件，另一方面，还可以用户请求访问的页面的骨架屏文件进行解析，并得到解析后的骨架屏，将
骨架屏展示给用户，直到用户接收到服务器所返回的页面文件时，解析页面文件并用所解析出的第一页面来替代骨架屏。
62.由于骨架屏的页面文件通常较小，返回速度快，甚至可以将骨架屏的页面文件存储在终端本地，因此骨架屏的加载速度较快，当用户请求访问页面时，可以快速加载出骨架屏，再在请求访问的页面加载完成时替代骨架屏，在用户视角来看，即在输入访问请求时便加载了页面，随后渐进式地加载出了页面中信息，从而增加用户在等待过程中的耐心。
63.本说明书实施例中提供一种页面生成和页面显示方法，通过从第一页面中选择可视化的组件，并确定与可视化的组件具有相似轮廓的占位元素，来生成由各占位元素所构建的第二页面，并在第一页面加载完成之前展示给用户，使用户在视觉上能够感知到第一页面的加载过程，从而提高用户在等待第一页面加载时的耐心。
64.为使本说明书的目的、技术方案和优点更加清楚，下面将结合本说明书具体实施例及相应的附图对本说明书技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本说明书一部分实施例，而不是全部的实施例。基于本说明书中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本说明书保护的范围。
65.以下结合附图，详细说明本说明书各实施例提供的技术方案。
66.图2为本说明书所提供的一种页面显示方法的流程示意图，本说明书实施例中，当监控到用户所输入的对于第一页面的访问请求时，执行以下步骤s200
‑
步骤s204：
67.s200：将用户所述输入的访问请求发送给目标平台；确定所述第一页面对应的第二页面。
68.本说明书实施例中，用户使用终端设备(以下简称终端)访问页面。其中用户所访问的第一页面为目标平台所提供的页面，所述第一页面可以为应用(application，app)中的页面，也可以为浏览器中的页面。本说明书中所述终端可以包括但不限于计算机、手机、平板电脑、笔记本电脑等，具有页面访问功能即可以是本说明书中所称的终端。
69.提供第一页面的目标平台可以为服务器或终端，本说明书实施例中，以所述目标平台为服务器为例进行说明。
70.终端可以监控用户通过终端所进行的输入，在监控到用户输入对于第一页面的访问请求时，终端可以将所接收到的访问请求发送给目标平台，并确定第一页面对应的第二页面，所述第二页面为预先为第一页面生成的骨架屏，所述第二页面根据本说明书实施例中任一所述的页面生成方法生成，本说明书在此处不对如何生成第一页面的骨架屏进行赘述。
71.s202：获取第二页面的页面文件，并对所述第二页面的页面文件进行解析，以向用户展示所述第二页面。
72.本说明书实施例中，终端加载第二页面的时长短于加载第一页面的时长。
73.具体的，所述第二页面可以为服务器提供的页面，第二页面的页面文件存储在服务器中，此时第二页面的页面文件的数据可以少于第一页面的页面文件中的数据。提供第二页面的服务器可以为目标平台，也可以为另一服务器，简洁起见，以下以提供第二页面的服务器即为目标平台为例进行说明。
74.终端可以根据所接收到的对于第一页面的访问请求，向目标平台发送对于第二页面的访问请求，目标平台则可以根据所接收到的对于第二页面的访问请求向终端返回第二
页面的页面文件，终端响应于所接收到的第二页面的页面文件，可以根据所述第二页面的页面文件向用户展示所述第二页面。当然，第二页面也可以由能够与终端进行通信的另一终端所提供的页面，即第二页面的页面文件存储于另一终端中，此时也可以通过上述任一方式向用户展示第二页面，本说明书对此不作限制。
75.当然，也可以在生成第二页面之后，将第二页面的页面文件存储在所述终端本地，以使所述终端可以根据所确定出的第二页面获取到存储在终端本地的所述第二页面的页面文件，并通过对所述页面文件进行解析从而向用户展示第二页面，在此情形下，由于无需通过通信传输第二页面的页面文件，因此可以不对所述第二页面的页面文件中所包含的数据多少进行限制，当然，由于第二页面为骨架屏，相较于第一页面所包含的内容较少，第二页面的页面文件中的数据通常来说少于第一页面的页面文件中的数据。
76.本说明书实施例中，通过解析页面文件，终端可以访问对应的页面，所述页面文件可以为任一格式的文件，例如可以为javascript对象简谱(javascript object notation，json)格式的文件、可扩展标记语言(extensible markup language，xml)格式的文件，以及超文本标记语言(hypertext mark
‑
up language，html)格式的文件等等。
77.s204：响应于所接收到的第一页面的页面文件，对所述第一页面的页面文件进行解析，并以所述第一页面替代所述第二页面展示给用户，其中，所述第一页面的页面文件是所述目标平台根据所述访问请求返回的。
78.目标平台根据所接收到的对第一页面的访问请求，将第一页面的页面文件返回给终端，终端对第一页面的页面文件进行解析，并以第一页面替代第二页面展示给用户。
79.图3a为本说明书实施例示例出的一种第一页面的示意图，图3a中至少包含承载有图中以阴影部分示出的图像信息的组件，以及承载有图中以若干个x表示的文本信息的组件，图3b为本说明书实施例示例出的一种对应于图3a所示的第一页面的第二页面的示意图。其中，第二页面中的灰色色块为占位元素，可以看出占位元素与所对应的组件具有相同或大致相同的大小和位置，因此，基于如图2所示的页面显示方法，可以在第一页面加载完成之前先向用户展示第二页面，并在第一页面加载完成之后以第一页面替代第二页面，通过第二页面的过渡使用户在视觉上能够感知到第一页面的加载过程，从而提高用户在等待第一页面加载时的耐心。
80.与上述图2所提供的页面显示方法相对应，本说明书实施例提供了如图4所示的一种页面生成方法，用于预先为第一页面生成对应的第二页面，所述页面生成方法包括以下步骤：
81.s400：确定第一页面，并获取所述第一页面的页面结构树。
82.s402：根据所述页面结构树生成所述第一页面的渲染树；遍历所述页面结构树，获得所述第一页面中所包含的组件；
83.本说明书实施例中，所述页面生成方法的执行主体可以为终端或服务器，当所述页面生成方法的执行主体为终端时，可为向用户展示第一页面的终端也可以为其他任一终端，当所述页面生成方法的执行主体为服务器时，可以为目标平台或其他任一服务器，本说明书对此不作限制。
84.在获得第一页面的页面文件后，需要将页面文件中数据以页面的形式呈现出来。而对第一页面的加载过程可以分为，解析第一页面的页面文件，并获得第一页面中的可视
化的组件，并构建渲染树来对组件进行绘制，得到第一页面并由终端展示给用户。
85.通常来说，典型的组件有按钮(button)、文本字段(text field)、进度条(progress bar)、键盘(keyboard)、图像、文字等。而页面中的组件的属性和内容是通过标签或者节点来定义的，比如在xml格式的页面文件中可以通过<textview>、<imgview>、<buttonview>等节点来规定页面所包含的组件，组件和节点之间具有一一对应的关系。因此，可以认为对第一页面的页面文件进行解析所获得的是第一页面的页面结构树，其中页面结构树包括若干个节点，每个节点对应有第一页面中所包括的一个组件，在解析出页面结构树后，则可以根据所述页面结构树生成渲染树。
86.本说明书一实施例中，所述第一页面可以为采用任一现有的页面构建方式所构建出的页面，第一页面的构建方式与所生成的第一页面的页面文件相对应，本说明书实施例中所述页面结构树为与页面文件相适应的页面操作接口，例如可以为文档对象模型(document object model，dom)，当然，当所述第一页面为通过flutter所构建的页面时，所述页面结构树也可以为元素(element)树。
87.通常来说，第一页面的页面结构树的节点包括对应于可视化的组件的节点(以下简称可视化组件节点)，以及包含用于描述除可视化的组件以外的其他信息的节点(以下简称非可视化组件节点)，例如用于定义组件的属性的节点，而在渲染的过程中，则仅需要对可视化的组件进行渲染，因此，根据页面结构树所构建的渲染树中所包含的节点与页面结构树中所包含的可视化组件节点之间具有一一对应的关系。
88.根据页面结构树的类型不同，可以采用不同的方式获得第一页面中所包含的组件。当所述页面结构树为dom树时，可以遍历dom树的每个节点，并获取每个组件节点所规定的组件。而当所述页面结构树为element树时，则可以遍历element树上的element节点，并根据各element节点与第一页面的组件配置树中所包含的节点之间的对应关系，将第一页面的组件配置树中的节点所定义的组件作为所述第一页面中所包含的组件，此时，所述组件配置树为组件(widget)树，所述组件配置树中的节点即为widget节点。本说明书实施例以下以所述第一页面为通过flutter所构建的页面，所述页面结构树为元素(element)树为例进行说明。
89.图5a
‑
5c分别示出了本说明书实施例中所述的组件配置树、页面结构树以及渲染树的结构示意图，其中，组件配置树中包含节点a1
‑
a4，页面结构树中包含节点b1
‑
b4，渲染树中包含节点c1、c3、c4。本说明书实施例中，组件配置树中的各节点与页面结构树中的各节点之间具有一一对应的关系，其中，a1与b1、a2与b2、a3与b3、a4与b4以及a5与b5之间分别具有对应关系，而可以看出，组件2不作为被渲染在第一页面上的可视化的组件，因此，渲染树中不包含对应于组件2的节点。
90.组件配置树中的节点中包含用于定义组件的配置信息，例如a1中包含用于定义组件1的配置信息，而页面结构树中的节点则在包含组件的配置信息的基础之上，还包含组件的上下文信息，也即组件的环境信息，可以认为组件配置树中的节点包含组件自身的配置信息，而页面结构树的节点中包含组件的实例化信息，渲染树则包含所要渲染的可视化的组件的实际渲染数据。
91.具体到本说明书实施例，针对组件配置树中的每个节点，该节点中可以包含该节点的父节点的数据，以该节点的父节点所定义的组件作为该节点所定义的组件的容器，该
节点中包含该节点所定义的节点相对于所在容器的位置偏移。而该节点所对应的在页面结构树中的节点则可以包括该节点所定义的组件相对所述组件所在容器的尺寸。而当该节点所定义的组件对应有渲染树中的节点时，由于所述渲染树中包括对第一页面进行显示的屏幕的屏幕尺寸，而根据各组件与容器之间的相对尺寸，以及第一页面与屏幕之间的相对尺寸才能确定出各组件的实际尺寸，因此，所述渲染树中包含各组件在第一页面中的实际尺寸。
92.s404：针对第一页面中所包含的每个组件，根据该组件在所述渲染树上的映射，判断该组件是否为指定组件。
93.通过终端的渲染，用户能够感知到第一页面中所包含的可视化的组件，因此，本说明书所提供的页面生成方法，在生成用于在第一页面加载完成前，作为过渡页面展示给用户的第二页面时，所构建出的第二页面可以包括若干对应于可视化的组件的占位元素，其中，每个占位元素与所对应的可视化的组件可以具有相似的轮廓。
94.因此，本说明书实施例中，可以针对每个组件，根据该组件在渲染树上的映射，判断在加载第一页面时，该组件是否作为可视化的组件被渲染在终端上，并将所确定出的可视化的组件作为指定组件。
95.本说明书一实施例中，所述渲染树可以为渲染(render)树，所述render树包括若干节点，其中，render中的每个节点对应有一个可视化的组件，即render中不包含非可视化的组件所对应的节点，因此，可以针对每个组件，根据该组件在render上是否对应有render节点来判断该组件是否为指定组件，将在render上对应有render节点的组件作为指定组件。
96.此外，由于组件自身的widget节点包括组件的配置信息，例如组件所承载的文本内容或图像内容，因此，还可以根据组件自身的widget节点来判断组件是否为指定组件，当组件承载需要渲染的内容时，可以将组件作为指定组件。
97.可以认为根据上述任一方式无法将该组件作为指定组件时，该组件即为非指定组件。
98.更近一步的，由于通常可以认为用户对于页面的主要区域所投入的注意力更高，因此，为了减少所生成的第二页面的页面文件的数据量，以使第二页面能够更快地被加载出来，还可仅将位于第一页面中的指定区域的组件作为指定组件。
99.具体的，第一页面中的每个可视化的组件对应有渲染树上中所包含的节点，渲染树上的节点用于对该节点所对应的可视化的组件进行绘制渲染。渲染树中包含展示第一页面的终端屏幕的尺寸，还包括各可视化的组件的渲染数据，所述渲染数据至少包括可视化组件的尺寸以及在第一页面中的位置，因此，可以根据各组件在渲染树上的映射来确定各组件位于第一页面中的位置，从而判断组件是否位于第一页面中的指定区域。
100.其中，所述指定区域可以为第一页面中心的区域，当然，还可以采用诸如目标检测算法等方式对所渲染出的第一页面的区域进行检测，并将所检测出的目标所在的区域作为指定区域，本说明书对于如何设定指定区域不作限制。其中，可以认为仅当组件所占据的区域全部位于指定区域内时，所述组件为指定组件，也可以认为组件所占据的区域中的至少部分区域位于指定区域内时，所述组件为指定组件，本说明书对此不作限制。
101.s406：根据各指定组件的渲染数据，为所述第一页面生成对应的第二页面，所述第
二页面用于在第一页面加载完成前替代所述第一页面展示给用户。
102.在通过上述任一所述方式确定出各指定组件之后，可以根据指定组件的渲染数据，为所述第一页面生成对应的第二页面，以使终端在第一页面加载完成之前向用户展示作为过渡的第二页面。
103.具体的，可以针对每个指定组件，根据该指定组件的渲染数据，构建与该指定组件具有相似轮廓和相似位置的占位元素，作为该指定组件对应的占位元素，并生成由各指定组件对应的占位元素所构成的第二页面。
104.本说明书一实施例中，可以采用如图3b所示的灰色色块作为占位元素，当然，本说明书实施例并不限制以诸如占位文本、占位图像等占位符作为占位元素的方式。可以看出，在图3a所示的第一页面中，包含有位于中上方的承载有图像信息的指定组件，和位于页面下方的承载有文本信息的指定组件，根据二者的渲染数据所确定出的如图3b所示的两个占位元素分别与所对应的指定组件具有相似轮廓和相似位置。
105.更近一步的，本说明书实施例中，所确定出每个占位元素与该占位元素对应的指定组件尺寸相同，并且该占位元素在第二页面中的位置与该占位元素对应的指定组件在第一页面中的位置相同，该占位元素的形状也可以与该占位元素所对应的指定组件的形状相同，例如当该占位元素所对应的指定组件为指定圆角的圆角矩形形状时，该占位元素的形状也可以为指定圆角的圆角矩形。
106.本说明书一实施例中，可以将组件中所承载的信息作为组件的目标，本说明书实施例中并不限制目标的数据类型，例如可以为图像、文本框、文本行等。
107.基于图3a所示，承载有图像信息的指定组件，该指定组件中目标所占据的区域与该指定组件本身所占据的区域相同，而对于承载有文本信息的指定组件，该指定组件中目标所占据的区域则仅为指定组件本身所占据的区域中的一部分，而由于用户通常对于承载有某种信息的目标持有较高的关注程度，因此，本说明书一实施例中，可以根据指定组件中目标的渲染数据来为指定组件确定出对应的占位元素。
108.具体的，可以根据指定组件中的目标的形状，以及指定组件中的目标相对于指定组件本身的位置以及尺寸来确定占位元素，本说明书一实施例中，可以直接确定出与指定组件中所包含的目标具有相同形状、位置和尺寸的占位元素，例如图3a中，可以确定出承载有文本信息的指定组件中的文本的顶端相对于包含该文本的指定组件的顶端的距离，并确定出承载有文本信息的指定组件中的文本的左端相对于包含该文本的指定组件的左端的距离，并根据文本信息的高度和宽度，以及每一行的行高构建出如图3b中所示的占位元素。
109.图6a示出了一种目标为图像的组件示意图，其中各作为目标的图像以阴影示出，图6b则为根据图6a所构建的占位元素，其中，该占位元素中由若干灰色色块组成。根据每个图6a中示出的组件中的每个目标的渲染数据，例如每个目标与该组件之间的相对大小和相对位置，可以确定出图6b所示的占位元素。
110.而当指定组件承载有文本信息时，类似的，可以根据每个作为目标的文本框和文本行的渲染信息来构建占位元素，此外，在通过上述方式确定出指定组件中文本信息所占据的区域之后，即确定出组件的高度和宽度之后，还可以根据预设的每一行的行高确定出所渲染出的文本信息的行数。具体的，可以直接根据组件中文本信息所占据的区域的高度除以预设的每一行的行高，得到所渲染出的文本信息的行数，当然，还可以预设有每两个文
本行之间的间隔高度，此时，各文本行的行高以及各文本行之间的间隔高度为组件中文本信息所占据的区域的高度。可以看出，可以采用各种方式确定文本信息的布局，本说明书在此不作赘述。
111.通过上述任一方式确定出各指定组件对应的占位元素之后，则可以生成由各占位元素所构成的第二页面，所述生成第二页面的页面文件可以存储在服务器中，也可以存储在终端本地，用于在第一页面加载完成前解析第二页面的页面文件，并显示第二页面以替代第一页面展示给用户。
112.基于如上述图4所述的方法，通过从第一页面中选择可视化的组件，并确定与可视化的组件具有相似轮廓的占位元素，来生成由各占位元素所构建的第二页面，并在第一页面加载完成之前展示给用户，使用户在视觉上能够感知到第一页面的加载过程，从而提高用户在等待第一页面加载时的耐心。
113.而不难理解的，当除第一页面以外的其他第三页面中包含与第一页面中相同的组件时，可以在确定占位元素时可以不考虑同时位于第三页面中的组件。例如，第三页面为自定义页面，与第三页面中的组件相同的组件为用户自定义的组件，而在加载第一页面后在对应位置对自定义组件进行定义，此时，则无需根据与第三页面相同的组件确定占位元素。再例如，用户响应于用户对于第一页面的访问请求，终端通常并不会重新加载第一页面中的所有组件，而对于当跳转至第一页面之前所访问的上级页面中所包含的某一组件与第一页面中所包含的组件为相同组件时，该组件通常不会被重新加载，而是被保留在页面上。如图3a所示，第一页面顶部的搜索框和底部的交互控件通常也会同时存在于上级页面中，当第三页面为该上级页面时，在确定占位元素时可以不考虑访问第一页面时不重新加载的组件，而是仅将访问第一页面时需要重新加载的组件作为指定组件。
114.具体的，当确定占位元素时不考虑同时位于第三页面中的组件时，可以针对每个组件，根据上述任一方式，通过该组件在所述渲染树上的映射，判断该组件是否为匹配组件；确定第三页面，并将所确定出的第三页面中所包含的组件作为对照组件；若该组件为匹配组件，判断该组件是否为对照组件；若该组件为非对照组件，则将该组件作为指定组件，并根据所确定出的各指定组件通过上述任一方式生成由占位元素所构成的第二页面。
115.本说明书一实施例中，当第三页面为包含跳转至第一页面的跳转链接的页面时，由于可以由若干跳转路径跳转至第一页面，因此，可以确定出若干个第三页面。此时，可以针对每个第三页面，通过上述任一方式生成由占位元素所构成的第二页面，并将所生成的第二页面作为由该第三页面跳转至第一页面时，第一页面所对应的第二页面。
116.以上为本说明书的一个或多个实施例提供的页面生成以及页面显示方法，基于同样的思路，本说明书还提供了相应的装置，如图7、图8所示。
117.图7为本说明书提供的一种页面生成装置示意图，包括：
118.结构模块700，用于确定第一页面，并获取所述第一页面的页面结构树；
119.组件渲染模块702，用于根据所述页面结构树生成所述第一页面的渲染树；遍历所述页面结构树，以获得所述第一页面中所包含的组件；
120.组件指定模块704，用于针对第一页面中所包含的每个组件，根据该组件在所述渲染树上的映射，判断该组件是否为指定组件；
121.页面生成模块706，用于根据各指定组件的渲染数据，为所述第一页面生成对应的
第二页面，所述第二页面用于在第一页面加载完成前替代所述第一页面展示给用户。
122.可选地，所述第一页面为通过flutter所构建的页面；所述组件渲染模块702具体用于，遍历所述页面结构树，根据所述页面结构树中所包含的节点与第一页面的组件配置树中所包含的节点之间的对应关系，确定由所述组件配置树中的节点所定义出的组件。
123.可选地，所述组件渲染模块702具体用于，当所述渲染树包含该组件所对应的节点时，和/或，当根据所述渲染树所渲染出的该组件位于指定区域时，将该组件作为指定组件，其中，所述指定区域为边界与所述第一页面的边界之间具有指定偏移距离的区域。
124.可选地，所述组件指定模块704具体用于，确定第三页面，并将所确定出的第三页面中所包含的组件作为对照组件；针对对应有渲染树上所包含的节点的每个组件，判断该组件是否为对照组件，若否，将该组件作为指定组件。
125.可选地，所述组件指定模块704具体用于，确定各页面中包含的跳转链接，并将包含跳转至所述第一页面的跳转链接的各页面均作为第三页面；所述页面生成模块706具体用于，针对每个第三页面，确定根据该第三页面中所包含的对照组件所确定出的各指定组件的渲染数据，并根据所确定出的渲染数据为所述第一页面生成对应于该第三页面的第二页面。
126.可选地，所述页面生成模块706具体用于，针对所确定出的每个指定组件，以该指定组件的渲染数据构建该指定组件对应的占位元素，其中，所述渲染数据至少包括该指定组件的尺寸以及在第一页面中的位置；生成由所确定出的各占位元素所构成的第二页面。
127.可选地，所述页面生成模块706具体用于，确定指定组件中所包含的目标的渲染数据；以该指定组件中所包含的目标的渲染数据构建该指定组件对应的占位元素。
128.图8为本说明书提供的一种页面显示装置示意图，包括：
129.请求响应模块800，当监控到用户所输入的对于第一页面的访问请求时，用于将用户所述输入的访问请求发送给目标平台；确定所述第一页面对应的第二页面，其中，所述第二页面根据上述任一所述的方法生成；
130.页面展示模块802，用于获取第二页面的页面文件，并对所述第二页面的页面文件进行解析，以向用户展示所述第二页面；
131.页面替代模块804，用于响应于所接收到的第一页面的页面文件，对所述第一页面的页面文件进行解析，并以所述第一页面替代所述第二页面展示给用户，其中，所述第一页面的页面文件是所述目标平台根据所述访问请求返回的。
132.本说明书还提供了一种计算机可读存储介质，该存储介质存储有计算机程序，计算机程序可用于执行上述页面生成以及页面显示方法。
133.本说明书还提供了图9所示的电子设备的结构示意图。如图9所示，在硬件层面，该电子设备包括处理器、内部总线、内存以及非易失性存储器，当然还可能包括其他业务所需要的硬件。处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，以实现上述页面生成或页面显示方法。
134.当然，除了软件实现方式之外，本说明书并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。
135.在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，
对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(programmable logic device,pld)(例如现场可编程门阵列(field programmable gate array，fpga))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片pld上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(hardware description language，hdl)，而hdl也并非仅有一种，而是有许多种，如abel(advanced boolean expression language)、ahdl(altera hardware description language)、confluence、cupl(cornell university programming language)、hdcal、jhdl(java hardware description language)、lava、lola、myhdl、palasm、rhdl(ruby hardware description language)等，目前最普遍使用的是vhdl(very
‑
high
‑
speed integrated circuit hardware description language)与verilog。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。
136.控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(application specific integrated circuit，asic)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：arc 625d、atmel at91sam、microchip pic18f26k20以及silicone labs c8051f320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。
137.上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。
138.为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本说明书时可以把各单元的功能在同一个或多个软件和/或硬件中实现。
139.本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机
可用存储介质(包括但不限于磁盘存储器、cd
‑
rom、光学存储器等)上实施的计算机程序产品的形式。
140.本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
141.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
142.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
143.在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
144.内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)。内存是计算机可读介质的示例。
145.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd
‑
rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
146.还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
147.本领域技术人员应明白，本说明书的实施例可提供为方法、系统或计算机程序产品。因此，本说明书可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本说明书可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd
‑
rom、光学存储器等)上实施的计算机程序产品的形式。
148.本说明书可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本说明书，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
149.本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
150.以上所述仅为本说明书的实施例而已，并不用于限制本说明书。对于本领域技术人员来说，本说明书可以有各种更改和变化。凡在本说明书的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本说明书的权利要求范围之内。