CN110489682A

CN110489682A - 一种页面加载方法和装置

Info

Publication number: CN110489682A
Application number: CN201910610610.6A
Authority: CN
Inventors: 田贝; 杨腾飞
Original assignee: Beijing Sankuai Online Technology Co Ltd
Current assignee: Beijing Sankuai Online Technology Co Ltd
Priority date: 2019-07-08
Filing date: 2019-07-08
Publication date: 2019-11-22
Anticipated expiration: 2039-07-08
Also published as: CN110489682B

Abstract

本申请实施例公开了一种页面加载方法和装置，方法包括：获取目标页面中区域块的视图元素的相关信息并保存到本地；其中，所述目标页面是已加载成功的页面；所述相关信息包括图片的位置信息，不包括图片的内容信息；所述相关信息包括第一元素的位置信息以及所述第一元素的内容信息，所述第一元素是与图片类型不同的视图元素；在页面加载过程中，根据所述保存的相关信息生成与所述区域块对应的占位图，并在页面展示所述占位图。通过在页面加载过程中展示生成的占位图，提高了加载速度，并满足了用户提前获知页面内容的心理预期，改善了用户体验。

Description

一种页面加载方法和装置

技术领域

本申请涉及互联网技术领域，具体涉及一种页面加载方法和装置。

背景技术

受网络等因素影响，当用户请求页面时，页面的区域块是分块加载的，这就需要对未加载部分进行处理以改善用户体验。

有一种技术方案是在页面加载成功之前，在页面上展示预置的灰色图片来占位，以提示用户页面正在加载，由于灰色图片的视觉冲击力强，而且灰色图片未携带任何业务信息，因此难以满足用户获知页面内容的心理预期。

还有一种技术方案是在页面加载过程中展示缓存的历史页面数据以满足用户提前获知页面内容的预期，但这种方式很容易误导用户使其错误地以为请求页面已经加载成功，并且展示历史页面数据在渲染时仍需要重新测量和布局，加载速度较慢。

发明内容

有鉴于此，本申请实施例提供了一种页面加载方法和装置，通过在页面加载过程中展示生成的占位图，避免了请求的页面加载时重新测量和布局，提高了加载速度，又由于占位图携带一定业务信息，满足了用户提前获知页面内容的心理预期。

根据本申请的第一个方面，提供了一种页面加载方法，该方法包括：

获取目标页面中区域块的视图元素的相关信息并保存到本地；其中，所述目标页面是已加载成功的页面；

所述相关信息包括图片的位置信息，不包括图片的内容信息；

所述相关信息包括第一元素的位置信息以及所述第一元素的内容信息，所述第一元素是与图片类型不同的视图元素；

在页面加载过程中，根据所述保存的相关信息生成与所述区域块对应的占位图，并在页面展示所述占位图。

根据本申请的另一个方面，提供了一种页面加载装置，包括获取单元和加载单元；

所述获取单元，用于获取目标页面中区域块的视图元素的相关信息并保存到本地；其中，所述目标页面是已加载成功的页面；

所述加载单元，用于在页面加载过程中，根据所述保存的相关信息生成与所述区域块对应的占位图，并在页面展示所述占位图。

根据本申请的第三个方面，提供了一种电子设备，所述电子设备包括：处理器以及存储器；存储器存储有可在处理器上运行的计算机程序的；所述处理器，用于在执行所述计算机程序时实现本申请一个方面所述的方法。

根据本申请的第四个方面，提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现本申请一个方面所述方法的步骤。

有益效果：应用本申请实施例的页面加载方法和装置，通过获取目标页面中区域块的视图元素的相关信息并保存到本地，在页面加载过程中根据相关信息生成占位图，并展示占位图，由于目标页面是已加载成功的页面并且占位图中不包括图片内容信息，所以本实施例生成的占位图中，图片只有样式而没有内容，第一元素则按照目标页面中原样式展示，这样占位图既携带了业务信息又与历史页面数据不完全相同，避免了完整展示历史页面容易误导用户的问题，从而以一种半可用状态满足了页面加载过程中用户的心理预期，改善了用户体验。另外，本实施例中利用占位图进行占位，省略了页面加载过程中的重新测量和布局的步骤，提高了加载速度。最后，本实施例的技术方案通用性强，对业务侵入性极低，方便大规模推广应用。

附图说明

图1是本申请一个实施例的页面加载方法的流程图；

图2是本申请一个实施例的目标页面中区域块的示意图；

图3是对图2中区域块的视图元素相关信息进行提取的示意图；

图4是本申请一个实施例生成的占位图的示意图；

图5是本申请一个实施例的页面加载装置的框图；

图6是本申请一个实施例的电子设备的结构示意图；

图7是本申请一个实施例的计算机可读存储介质的结构示意图。

具体实施方式

为使本申请实施例的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请实施例作进一步详细的说明。显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请实施例保护的范围。

本申请实施例的技术构思是对页面加载成功前页面展示内容进行改进，区分页面中的图片和第一元素(第一元素是与图片类型不同的视图元素，如文本)，对于图片，仅显示结构样式不显示内容，而对于文本等第一元素，则按照缓存的页面数据原样加载展示，这样避免了在用户请求的页面未成功加载前展示纯灰色图片给用户造成的视觉冲击，改善了用户体验；而且通过原样展示文本等第一元素，携带了页面中的业务数据，满足了用户提前获知页面内容的需要，又提高了加载速度。

图1是本申请一个实施例的页面加载方法的流程图，参见图1，本实施例的页面加载方法包括下列步骤：

步骤S101，获取目标页面中区域块的视图元素的相关信息并保存到本地；

其中，所述目标页面是已加载成功的页面；

步骤S102，在页面加载过程中，根据所述保存的相关信息生成与所述区域块对应的占位图，并在页面展示所述占位图。

由图1所示可知，本实施例的页面加载方法，通过获取目标页面中区域块的视图元素的相关信息并保存到本地，在页面加载过程中，根据保存的相关信息生成与区域块对应的占位图并在页面展示生成的占位图，由于这里对已加载成功的页面中的图片和第一元素进行了区分，从已加载成功页面中获取图片的位置信息，不包括图片的内容信息，获取第一元素的位置信息以及内容信息，所以根据相关信息生成的占位图中在图片对应的位置上只有图片样式而没有内容，在第一元素对应的位置上既第一元素的样式又有第一元素的内容，避免了展示占位图时未携带业务数据不能满足用户需要的问题，优化了用户体验。并且利用占位图进行占位，省略了页面加载时的测量和布局步骤，提高了加载速度。

可以理解，由于页面，比如外卖应用、团购应用、打车应用等移动终端APP的首页或信息流列表展示页中往往包括多个区域块，各区域块的结构、内容不同，因而应用本实施例的页面加载方法生成的占位图也不同。

一次页面加载过程中，本实施例的页面加载方法，通过提取缓存的目标页面(即已经加载成功的页面)中区域块的视图元数据(即，视图元素的相关信息)，基于提取的视图元数据生成占位图，在用户请求的页面加载成功之前渲染占位图、展示，并在用户请求的页面加载成功之后用加载成功的页面数据替换占位图，以此避免了页面加载时重新测量和布局，提高了加载速度，并满足了用户提前获知页面内容的心理预期。

视图元数据记录了页面区域块中视图元素的关键信息，包含文本内容、文本字体、文本格式(粗细、换行、省略号)、图片位置等。视图元数据用于动态生成与区域块对应的占位图，以在区域块的页面数据加载成功之前展示生成的占位图。

具体而言，本实施例的页面加载方法分为三个主要步骤，分别是(一)获取目标页面区域块的视图元数据；(二)渲染展示占位图；(三)利用加载成功的页面数据替换占位图。下面分别进行说明。

一个实施例中，在用户请求的页面数据加载成功并且渲染结束后，启动视图元数据提取步骤。步骤(一)获取区域块的视图元数据，即获取目标页面中区域块的视图元素的相关信息，包括：通过接口调用获取图片的位置信息；所述图片的位置信息是指四个顶点分别相对于原点的像素距离，所述原点是位于所述区域块的左上角的点；通过接口调用获取第一元素的位置信息；所述第一元素的位置信息由一行文本中第一个文字和最后一个文字分别相对于所述原点的像素距离确定，以及，通过接口调用获取所述第一元素的内容信息，所述第一元素的内容信息包括下列信息：文本内容，文本字体大小、字体颜色、是否粗体。

这里的视图元素的相关信息可以划分为属性信息和层次信息。属性信息用于确定视图元素的展示位置，展示样式或展示内容；层次信息用于确定视图元素的展现层次，比如，文本在图片之上还是在图片之下展示。

本实施例中以第一元素为文本进行示意性说明，在其他实施例中第一元素可以是编辑框、进度条等视图元素，对此不做限制。

图2是本申请一个实施例的目标页面中区域块的示意图，参见图2，本实施例的目标页面中的一个区域块中包括有图片和文本两类视图元素，图片在区域块的左边，文本在区域块的右边。

如图2所示，第一元素的位置信息由一行文本(比如“汉堡王”)中第一个文字(“汉”)和最后一个文字(“王”)分别相对于原点(区域块的左上角的点)的像素距离确定。这里的文本的内容信息包括文本内容(“汉堡王”)，文本字体大小(如五号字)、字体颜色(黑色)、是否粗体(否)。

需要说明的是，本实施例的文本的内容信息仅为示意性说明，实际应用中，目标页面的区域块不同，第一元素的内容信息也不同，比如，一些实施例中，文本的内容信息可能仅包括文本内容，字体颜色两条信息，在另一些实施例中文本的内容信息可能包括文本内容，字体颜色，是否粗体以及文本框控件的长度小于文本长度时是否显示省略号等信息。

本实施例的页面加载方法应用于客户端，通过调用系统接口(系统接口根据运行客户端的具体操作系统而定)获取目标页面区域块中图片或文本的相关信息。对于图片，只获取位置信息不包括图片内容，而对于文本则需要获取文本的位置信息以及展示内容信息，这里之所以区分图片和文本是因为：本实施例中需要兼顾让用户提前获知页面业务信息和避免误导用户两种需求，通过在用户请求的页面加载成功之前，在请求页面上展示占位图，占位图包括：目标页面对应区域块中的文本样式，文本内容，图片样式，不包括图片的内容(即在图片位置显示灰色的色块)，从而展示占位图之后，以一种半可用状态迎合了用户心理预期。

所谓半可用状态是指文本按照之前加载成功页面中的文本原样展示，这样携带页面中的业务信息，满足用户在页面完全加载成功前获知页面内容的需求。同时，由于图片对用户的代入感强，所以图片类视图元素仅展示图片骨架(比如灰色的色块)，不展示图片内容，避免了图片原样展示可能误导用户的问题。

考虑到页面的同一位置可能既有图片又有文本，所以为了准确渲染和绘制占位图，本实施例中提取视图元素的层次，即，相关信息还包括图片的层次信息以及第一元素的层次信息；前述获取目标页面中区域块的视图元素的相关信息包括：遍历与所述区域块对应的原始视图树，获取所述原始视图树中包含的目标节点以及目标节点在所述原始视图树中的层次信息，所述目标节点是图片或第一元素所对应的节点。

具体的，参见图3，使用深度遍历优先(Depth First Search，简称DFS)算法遍历区域块对应的原始视图树(参见图3中下半部分所示)，并使用英文字母ABCDE在区域块上进行标记，其中，字母A代表原始视图树的第0层，字母B代表第1层，字母C代表第1层，字母D代表第2层，字母E代表第2层。结合图3，节点C对应的视图元素为图片，节点D对应的视图元素为文本，节点E对应的视图元素也是文本。通过深度优先遍历算法遍历原始视图树，并且以视图元数据的形式保存区域块的视图快照，方便后续动态生成占位图。

由于容器控件(具体是非叶子节点的容器控件)主要用于协调各个视图元素的相对位置关系的控件，而页面中各视图元素的位置已通过接口调用的方式获得，所以为了简化渲染过程避免增加视图元数据的大小，本实施例中在遍历原始视图树时仅关心目标节点，并获取和记录目标节点的层次信息，将目标节点的层次信息保存到本地，从而过滤掉容器控件等非目标节点，减少对存储空间的占用。这里的目标节点是图片或第一元素(如文本)所对应的节点。

接上例，按照上述步骤，仅将C，D，E三个节点的层次信息保存到本地而不包括节点A和B的层次信息，因为节点A和节点B都是容器控件对应的节点。即，本实施例对图3所示原始视图树中非目标节点(不相关的容器节点及叶子节点)进行了剔除，保持了视图元数据的精简。

在获得图片或第一元素的层次信息之后，本实施例的页面记载方法还包括：按照层次大小，对相关信息进行排序，将排序后的所述相关信息保存到本地，比如保存到一个列表中。也就是说，根据节点的深度，对节点的相关信息(即视图元数据)进行排序，深度较小的节点的视图元数据排在列表的前面，深度较大的节点的视图元数据排在列表的后面，从而方便按顺序查找视图元数据进行页面绘制，提高了绘制效率，并避免了绘制占位图时多个视图元素之间错误地覆盖、重叠。

比如，当目标页面原区域块中文字与图片重叠时，通过保存视图元数据时已经按照节点的深度对视图元数据进行了排序，所以后续生成占位图时，根据视图元素的层次(即深度)先绘制图片后绘制文本即可保证展示效果正常。又比如目标页面原区域块中图片与图片重叠(图片上叠加蒙层)的情况，在绘制占位图时，根据存储的视图元数据中指示的图片的位置信息进行判断，如果对应位置已经绘制过灰块(即图片骨架)，则直接忽略掉该蒙层元素，即，图片上叠加蒙层时仅绘制图片对应的灰块，而忽略蒙层，以保证展示效果正常。

在获取到视图元数据之后，本实施例将视图元数据存储到本地，具体可基于protobuf二进制格式来存储视图元数据，protobuf灵活，高效，并且占用的存储空间较小。

考虑到阅读的方便性，一个实施例中采用JSON(JavaScriptObjectNotation，简称JSON)格式存储视图元数据到本地。JSON格式方便阅读和编写，易于机器解析和生成，能够有效提升传输效率。

对图2中的区域块，本实施例存储的JSON格式视图元数据示意如下：

由上可知，针对图片，比如图2中的图片，本实施例中存储了图片的类型(type:image)，区域(area:[10,10,50,50])和层次信息(level:1)，以便于后续根据图片类型、图片区域和层次在占位图相应位置绘制灰色的色块进行占位。

需要说明的是，视图元数据中的区域是指视图元素在区域块中的位置信息，比如，图片这一视图元素的区域信息[10,10,50,50]，是以区域块的左上角的点为原点(0，0)建立坐标系而得到区域块中每个视图元素相对于坐标系原点的距离。

考虑到具有相同父节点的各子节点的层次信息相同，比如图3中节点D和节点E均为节点B的子节点，类型均为文本且两者在原始视图树中的层次都是2，本实施例提出，在保存各子节点的层次信息时，依据子节点对应的视图元素(如文本)在区域块中的位置信息确定各子节点的顺序。接上例，区域块中包括文本元素“汉堡王”和文本元素“王道川蜀鸡翅2份”，其中“汉堡王”在区域块的一个容器控件(即节点B对应的容器控件)的上方，“王道川蜀鸡翅2份”在文本元素“汉堡王”的下方，按照这种上下顺序将这两个层次相同的文本元素依次保存到本地，后续，在绘制占位图时，从本地保存的数据列表中先读取文本元素“汉堡王”的信息进行绘制，然后再读取文本元素“王道川蜀鸡翅2份”的信息进行绘制。

(二)渲染展示占位图

在用户请求的页面数据加载成功之前，根据本地保存的视图元数据在区域块的对应位置生成占位图并渲染。比如本实施例中根据保存的相关信息生成与区域块对应的占位图包括：创建Canvas画布，Canvas画布的大小依据获取的所述区域块的宽度信息和高度信息确定；按照所述相关信息的顺序，依次读取本地保存的所述相关信息并依据所述相关信息在Canvas画布上进行绘制；将绘制完成的Canvas画布转换为所述占位图。

通过渲染将视图(View)绘制在用户界面，一般的渲染包括三个基本过程，分别是测量、布局和绘图。本实施例中在用户请求的页面加载成功之前，对页面上各区域块进行测量和布局，并绘制相应的占位图，在每个区域块对应的位置展示占位图。通过生成并填充占位图，使得图片、文本等视图元素的长宽很快的加载出来，有效提高了页面加载性能。具体的，生成占位图的过程如下：

按照本地保存的视图元数据(即视图元素的相关信息)的顺序，依次读取视图元数据，使用Canvas API绘制出对应的视图元素，Canvas API如drawRect(绘制矩形)、drawText(绘制文本)。在绘制占位图过程中，对于文本，本实施例依据缓存的目标页面区域块中的原样式完整绘制；而对于图片，由于视图元数据中不包括图片内容，因此，对于没有图片内容的部分，系统默认显示灰色。

参见图4，图4中示意了依据本地保存的相关信息生成的占位图，结合图2可知，在用户请求的页面加载成功之前，本实施例通过展示图4所示的占位图，占位图包括图片(图4左侧灰块)和文本(如图4右侧所示“汉堡王”)，从而既指示了页面中包含的业务信息满足了用户提前获知业务信息的心理预期，优化了用户体验，又避免了完整展示图2所示目标页面数据可能导致的误导用户引发交易纠纷的问题。此外，通过展示占位图进行占位，使得用户请求的页面渲染过程中无需重新测量和布局，提高了页面的加载速度。

需要说明的是，如何创建Canvas画布并绘制视图元素为现有技术这里不对Canvas画布绘制细节进行赘述。

由上可知，在页面加载过程中，依照本地缓存的视图元数据生成占位图，后加载展示占位图作为区域块的兜底，使得当用户请求页面加载时无需重新测量和布局，提高了加载速度。

(三)利用加载成功页面数据替换占位图

本实施例中在页面展示所述占位图之后，还包括：如果所述区域块的页面数据加载成功，则利用加载成功的页面数据替换所述占位图，并在页面展示所述区域块的页面数据。

也就是说，一次页面加载过程中，如果用户请求页面区域块中页面数据渲染成功，则将占位图中的灰块替换为页面数据中的真实图片内容，将占位图中的文本替换为页面数据中的真实文本内容和样式。由于相关信息中仅包含图片和文本的位置、文本信息等，所以实际替换时数据量比较小，对性能的影响不大。从而本实施例的页面加载方法反映了业务信息、满足了用户心理预期且加载速度快。

至此，流程结束。

需要说明的是，每一次加载成功页面之后，将当前加载成功的页面更新为目标页面，以方便根据加载成功的最新页面提取视图元数据，生成占位图。

与前述页面加载方法同属于一个技术构思，本申请实施例还提供了一种页面加载装置，参见图5，该页面加载装置500包括：获取单元501和加载单元502；

所述获取单元501，用于获取目标页面中区域块的视图元素的相关信息并保存到本地；其中，所述目标页面是已加载成功的页面；

所述加载单元502，用于在页面加载过程中，根据所述保存的相关信息生成与所述区域块对应的占位图，并在页面展示所述占位图。

在本申请的一个实施例中，所述相关信息还包括图片的层次信息以及所述第一元素的层次信息；

所述获取单元，具体用于遍历与所述区域块对应的原始视图树，获取所述原始视图树中包含的目标节点以及目标节点在所述原始视图树中的层次信息，所述目标节点是图片或第一元素所对应的节点。

在本申请的一个实施例中，所述加载单元502，还用于如果所述区域块的页面数据加载成功，则利用加载成功的页面数据替换所述占位图，并在页面展示所述区域块的页面数据。

在本申请的一个实施例中，所述获取单元501，还用于按照层次大小，对相关信息进行排序，将排序后的所述相关信息保存到本地。

在本申请的一个实施例中，所述加载单元502，具体用于创建Canvas画布，所述Canvas画布的大小依据获取的所述区域块的宽度信息和高度信息确定；按照相关信息的顺序，依次读取本地保存的所述相关信息并依据所述相关信息在Canvas画布上进行绘制；将绘制完成的Canvas画布转换为所述占位图。

在本申请的一个实施例中，所述第一元素为文本，所述获取单元501，具体用于通过接口调用获取图片的位置信息；所述图片的位置信息是指四个顶点分别相对于原点的像素距离，所述原点是位于所述区域块的左上角的点；通过接口调用获取第一元素的位置信息；所述第一元素的位置信息由一行文本中第一个文字和最后一个文字分别相对于所述原点的像素距离确定，以及，通过接口调用获取所述第一元素的内容信息，所述第一元素的内容信息包括下列信息：文本内容，文本字体大小、字体颜色、是否粗体。

需要说明的是，关于图5所示装置中的各单元所执行的各功能的举例解释说明，与前述方法实施例中的举例解释说明一致，这里不再一一赘述。

需要说明的是：

在此提供的算法和显示不与任何特定计算机、虚拟装置或者其它设备固有相关。各种通用装置也可以与基于在此的示教一起使用。根据上面的描述，构造这类装置所要求的结构是显而易见的。此外，本申请实施例也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本申请实施例的内容，并且上面对特定语言所做的描述是为了披露本申请实施例的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本申请的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个申请方面中的一个或多个，在上面对本申请的示例性实施例的描述中，本申请实施例的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本申请实施例要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，申请方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本申请的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本申请实施例的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本申请实施例的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本申请实施例的页面性能测试装置中的一些或者全部部件的一些或者全部功能。本申请还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本申请实施例的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

例如，图6是本申请一个实施例的电子设备的结构示意图。该电子设备600包括：处理器601以及存储器602，存储器602存储有可在所述处理器601上运行的计算机程序，处理器601，用于在执行所述存储器602中的计算机程序时执行本申请实施例中方法的各步骤。存储器602可以是诸如闪存、EEPROM(电可擦除可编程只读存储器)、EPROM、硬盘或者ROM之类的电子存储器。存储器602具有存储用于执行上述方法中的任何方法步骤的计算机程序604的存储空间603。计算机程序604可以从一个或者多个计算机程序产品中读出或者写入到这一个或者多个计算机程序产品中。这些计算机程序产品包括诸如硬盘，紧致盘(CD)、存储卡或者软盘之类的程序代码载体。这样的计算机程序产品通常为例如图7所示的非瞬时性计算机可读存储介质。

图7是本申请一个实施例的计算机可读存储介质的结构示意图。该计算机可读存储介质700存储有用于执行根据本申请实施例的方法步骤的计算机程序604，可以被电子设备600的处理器601读取，当计算机程序604由电子设备600运行时，导致该电子设备600执行上面所描述的方法中的各个步骤，具体来说，该计算机可读存储介质存储的计算程序604可以执行上述任一实施例中示出的方法。计算机程序604可以以适当形式进行压缩。

应该注意的是上述实施例对本申请实施例进行说明而不是对本申请实施例进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本申请实施例可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词、第二、以及第三等的使用不表示任何顺序，可将这些单词解释为名称。

Claims

1.一种页面加载方法，其特征在于，该方法包括：

2.如权利要求1所述的方法，其特征在于，在页面展示所述占位图之后，该方法还包括：

如果所述区域块的页面数据加载成功，则利用加载成功的页面数据替换所述占位图，并在页面展示所述区域块的页面数据。

3.如权利要求1或2所述的方法，其特征在于，所述相关信息还包括图片的层次信息以及所述第一元素的层次信息；

所述获取目标页面中区域块的视图元素的相关信息包括：

遍历与所述区域块对应的原始视图树，获取所述原始视图树中包含的目标节点以及目标节点在所述原始视图树中的层次信息，所述目标节点是图片或第一元素所对应的节点。

4.如权利要求3所述的方法，其特征在于，在获得图片的层次信息以及所述第一元素的层次信息之后，该方法还包括：

按照层次大小，对相关信息进行排序，将排序后的所述相关信息保存到本地。

5.如权利要求4所述的方法，其特征在于，所述根据所述保存的相关信息生成与所述区域块对应的占位图包括：

创建Canvas画布，所述Canvas画布的大小依据获取的所述区域块的宽度信息和高度信息确定；

按照所述相关信息的顺序，依次读取本地保存的所述相关信息并依据所述相关信息在Canvas画布上进行绘制；

将绘制完成的Canvas画布转换为所述占位图。

6.如权利要求1所述的方法，其特征在于，所述第一元素为文本，

所述获取目标页面中区域块的视图元素的相关信息包括：

通过接口调用获取图片的位置信息；所述图片的位置信息是指四个顶点分别相对于原点的像素距离，所述原点是位于所述区域块的左上角的点；

通过接口调用获取第一元素的位置信息；所述第一元素的位置信息由一行文本中第一个文字和最后一个文字分别相对于所述原点的像素距离确定，以及，通过接口调用获取所述第一元素的内容信息，所述第一元素的内容信息包括下列信息：文本内容，文本字体大小、字体颜色、是否粗体。

7.一种页面加载装置，其特征在于，包括：获取单元和加载单元；

8.如权利要求7所述的装置，其特征在于，所述相关信息还包括图片的层次信息以及所述第一元素的层次信息；

9.一种电子设备，其特征在于，所述电子设备包括：处理器以及存储器；

所述存储器，存储有可在所述处理器上运行的计算机程序；

所述处理器，用于在执行所述计算机程序时实现权利要求1-6中任一项所述的方法。

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