页面显示方法、装置、设备及存储介质与流程

1.本公开涉及信息技术领域，尤其涉及一种页面显示方法、装置、设备及存储介质。


背景技术：

2.随着科技的不断发展，用户足不出户即可在终端上浏览到网络信息。
3.在一些情况下，如果页面加载所需数据量较大，或者网络质量较差，将会导致终端加载页面时耗费较长的时间。在这个时间内，可以在页面上显示进度标识，以表示页面加载的进度。
4.但是，本技术的发明人发现，进度标识所显示的进度与用户的认知可能是不同的，例如，进度标识当前显示的进度为90％，但是较长时间之后，页面才加载成功。这导致用户认为进度条提供的进度是不准确的，从而降低了用户体验。


技术实现要素：

5.为了解决上述技术问题或者至少部分地解决上述技术问题，本公开提供了一种页面显示方法、装置、设备及存储介质，实现了进度标识在加载页面中的平滑变化，使得页面加载时的画面与显示出的真实页面之间的衔接更流畅，进而提升了页面加载时的用户体验。
6.第一方面，本公开实施例提供一种页面显示方法，包括：
7.响应于页面显示指令，确定目标时长；
8.对所述页面进行加载的过程中，在所述页面中显示进度标识，所述进度标识用于标识所述页面的加载进度；
9.根据所述目标时长控制所述进度标识在所述页面中变化。
10.第二方面，本公开实施例提供一种页面显示装置，包括：
11.确定模块，用于响应于页面显示指令，确定目标时长；
12.加载模块，用于对所述页面进行加载；
13.显示模块，用于在所述加载模块对所述页面进行加载的过程中，在所述页面中显示进度标识，所述进度标识用于标识所述页面的加载进度；
14.控制模块，用于根据所述目标时长控制所述进度标识在所述页面中变化。
15.第三方面，本公开实施例提供一种电子设备，包括：
16.存储器；
17.处理器；以及
18.计算机程序；
19.其中，所述计算机程序存储在所述存储器中，并被配置为由所述处理器执行以实现如第一方面所述的方法。
20.第四方面，本公开实施例提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行以实现第一方面所述的方法。
21.本公开实施例提供的页面显示方法、装置、设备及存储介质，通过响应于页面显示指令，确定目标时长；对所述页面进行加载的过程中，在所述页面中显示进度标识，所述进度标识用于标识所述页面的加载进度；根据所述目标时长控制所述进度标识在所述页面中变化的技术手段，实现了进度标识在加载页面中的平滑变化，使得页面加载结束时的画面与显示出的真实页面之间的衔接更流畅，进而提升了页面加载时的用户体验。
附图说明
22.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。
23.为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
24.图1为一种从页面加载到真实页面之间切换的示意图；
25.图2为本公开实施例提供的页面显示方法流程图；
26.图3为本公开实施例提供的页面显示方法流程图；
27.图4为本公开实施例提供的页面显示方法流程图；
28.图5为本公开实施例提供的页面显示方法流程图；
29.图6为本公开实施例提供的一种从页面加载到真实页面之间切换的示意图；
30.图7为本公开实施例提供的页面显示装置的结构示意图；
31.图8为本公开实施例提供的电子设备实施例的结构示意图。
具体实施方式
32.为了能够更清楚地理解本公开的上述目的、特征和优点，下面将对本公开的方案进行进一步描述。需要说明的是，在不冲突的情况下，本公开的实施例及实施例中的特征可以相互组合。
33.在下面的描述中阐述了很多具体细节以便于充分理解本公开，但本公开还可以采用其他不同于在此描述的方式来实施；显然，说明书中的实施例只是本公开的一部分实施例，而不是全部的实施例。
34.通常情况下，页面都会有加载过程，尤其一些动画页面，其加载过程所耗时长较长，为了实现较好的交互体验，在加载过程中显示空白页面(空白页面指没有具体内容的页面，不特指白色页面，也可以是灰色或者其它颜色的页面)，在空白页面通常会显示一个进度标识(例如进度条)，进度标识用于表示页面加载进度。但是进度标识在某一时刻显示的进度百分比是由页面已加载的数据和网速决定的。例如，页面加载完成需要加载完1000个文件，当页面加载完900个文件的时候，进度标识显示的进度百分比为90％。但是，剩余未加载的100个文件的数据量可能较大，导致进度标识显示90％之后，页面还是无法较快完成加载，导致用户体验不好，为什么进度标识已经显示到90％了，还不能较快地到达100％。且可能存在如下情况，进度标识显示90％之后较长的一段时间内，进度标识所显示的进度百分数不再增长，卡顿较长时间后突然增长到100％,给用户呈现一种突然看到真实页面的体验，导致加载时的页面与真实页面之间的衔接不平滑。如图1所示的一种从页面加载到真实
页面之间切换的示意图，假设在t1时刻进度标识显示页面加载进度已经为90％，即真实页面110尚未加载完成，目前呈现给用户的是页面加载时的画面，即加载页面120，加载页面120中没有显示具体内容，只显示有进度标识121，到t2时刻时突然从加载页120切换为真实页面110，若t1与t2时刻之间间隔较长时间，则会给用户带来一种页面突变，页面切换不平滑的体验。或者，该1000个文件中，前500个文件的数据量比较小，使得进度标识显示的进度百分数可以很快地从0显示到50％，但是，第501个文件到第600个文件的这100个文件的数据量比较大，使得进度标识不能很快地从50％变化到60％，导致用户体验较差，为什么从0到50％的这50％的涨幅较快，反而从50％到60％的这10％的涨幅较慢。针对该问题，本公开实施例提供了一种页面显示方法，下面结合具体的实施例对该方法进行介绍。
35.图2为本公开实施例提供的页面显示方法流程图。本实施例可适用于客户端中进行页面显示的情况，该方法可以由页面显示装置执行，该装置可以采用软件和/或硬件的方式实现，该装置可配置于电子设备中，例如终端，具体包括但不限于智能手机、掌上电脑、平板电脑、带显示屏的可穿戴设备、台式机、笔记本电脑、一体机、智能家居设备等。如图1所示，该方法具体步骤如下：
36.s201、响应于页面显示指令，确定目标时长。
37.其中，页面显示指令为终端基于用户的交互行为触发的指令，例如用户点击某控件时，终端触发与该控件关联的页面显示指令，响应于该页面显示指令，终端确定目标时长。
38.目标时长表示加载页面所需的平均时长。可以理解的是，不同的页面，其加载耗时不同，页面加载耗时与待加载的数据量大小以及当时的网速有关系，相同网速的条件下，待加载的数据量越大，则页面加载耗时越长；相同待加载数据量的条件下，网速越快，页面加载耗时越短。
39.在一些实施方式中，目标时长可以是预设时长，由开发人员基于业务经验或者通过多次试验确定的数值，表示加载页面所需的平均时长。
40.在另一些实施例中，目标时长也可以是动态计算获得的时长。例如基于该页面在当前终端的多个历史加载时长确定。在同一终端，同一页面往往被显示多次，因此基于该页面在当前终端的多个历史加载时长可较精准地确定加载该页面所耗的时长。
41.s202、对页面进行加载的过程中，在页面中显示进度标识，进度标识用于标识页面的加载进度。
42.在对页面进行加载的过程中，页面中的具体内容无法被显示，即在加载过程中终端所显示的页面为空页面，在空页面中显示进度标识，以标识页面的加载进度，可获得较友好的交互体验。
43.s203、根据目标时长控制进度标识在页面中变化。
44.在一些实施例中，可控制进度标识所显示的进度百分数或者进度标识的进度条在目标时长内匀速增长，如此可避免由于某些待加载文件的数据量较大导致进度标识变化卡顿或者突变的问题，可提升用户的交互体验。
45.在另一些实施例中，可控制进度标识所显示的进度百分数或者进度标识的进度条在目标时长内匀速或非匀速地从0变化到100％。
46.一种具体实施方式，当进度标识所显示的进度百分数或者进度标识的进度条到达
100％时，页面正好加载完成；或者当进度标识所显示的进度百分数或者进度标识的进度条到达100％时，页面尚未加载完成；或者页面加载完成，但进度标识所显示的进度百分数或者进度标识的进度条还未到达100％。
47.本公开实施例提供的页面显示方法，通过在加载页面中显示进度标识，并根据目标时长控制进度标识在加载页面中变化，例如控制进度标识所显示的进度百分数或者进度标识的进度条在目标时长内匀速增长，或者控制进度标识所显示的进度百分数或者进度标识的进度条在目标时长内匀速或非匀速地从0变化到100％，实现了进度标识在加载页面中的平滑变化，使得页面加载结束时的画面与显示出的真实页面之间的衔接更流畅，进而提升了页面加载时的用户体验。
48.图3为本公开另一实施例提供的页面显示方法流程图。本实施例中，在响应于页面显示指令，确定目标时长之前，增加了如下步骤“获取所述页面的多个历史加载时长；根据所述多个历史加载时长，计算所述目标时长”，以实现目标时长的确定。如图3所示，该方法具体步骤如下：
49.s301、获取页面的多个历史加载时长。
50.其中，页面的历史加载时长可以指在同一终端上加载所述页面所耗的时长；也可以指在同一型号的终端上加载所述页面所耗的时长；还可以进一步的指在同一终端上同一网速或者同一地点(例如家、公司)加载所述页面所耗的时长。若页面的历史加载时长指在同一终端上加载所述页面所耗时长，则可以从终端本地获取所述页面的历史加载时长；若页面的历史加载时长指在同一型号的终端上加载所述页面所耗的时长，则可以从服务器获取所述页面的历史加载时长。
51.由于用户可能不止一次点击同一个链接从而打开同一个页面，因此可以记录一段历史时间内用户每次点击该同一个链接后，该同一个页面的历史加载时长。该历史加载时长可以是从用户点击该链接到该页面渲染完成的时长。进一步，根据该同一个页面的多个历史加载时长，计算出目标时长，目标时长可以是该多个历史加载时长的平均值。
52.s302、根据多个历史加载时长，计算目标时长。
53.在一些实施例中，可将多个历史加载时长的平均值确定为所述目标时长。
54.在另一些实施例中，为了减少历史加载时长的存储量，按照时间先后顺序对多个历史加载时长进行过滤，仅保留时间较新的有限个历史加载时长。例如设定历史加载时长的存储量为5个，即仅保存5个历史加载时长，假设当前已经保存有5个历史加载时长，分别是用户在今天上午6点、7点、8点、9点和10点打开所述页面时的页面加载时长，若用户在今天上午11点时再次打开所述页面，则会生成第6个所述页面的历史加载时长，此时将用户在今天上午6点打开所述页面时对应的历史加载时长过滤掉，将用户在今天上午11点打开所述页面时对应的历史加载时长加进来，以保持历史加载时长的时效性，进而提高基于多个历史加载时长所确定的目标时长的精度。
55.其中，步骤s302和步骤s303也可以在接收到页面的显示指令之后执行，也可以在接收页面的显示指令之前预先执行。
56.s303、响应于页面的显示指令，确定目标时长。
57.s304、对页面进行加载的过程中，在页面中显示进度标识，进度标识用于标识页面的加载进度。
58.s305、根据目标时长控制进度标识在页面中变化。
59.具体的，s303和s201的实现方式和具体原理一致，s304和s202的实现方式和具体原理一致，s305和s203的实现方式和具体原理一致，此处不再赘述。
60.本实施例通过根据页面的多个历史加载时长确定所述页面对应的目标时长，利用用户通常会多次打开同一页面的操作特征，在终端本地记录页面的多次历史加载时长，从而计算出适合当前用户的目标时长，在目标时长内控制进度标识在所述页面的加载过程中变化，实现了目标时长的确定精度，进而实现了进度标识在加载页面中的平滑变化，使得页面加载结束时的画面与显示出的真实页面之间的衔接更流畅，进而提升了页面加载时的用户体验。
61.图4为本公开另一实施例提供的页面显示方法流程图。在本实施例中，针对上述步骤s302进行了进一步优化，旨在进一步提高目标时长的确定精度。该方法具体步骤如下：
62.s401、获取页面的多个历史加载时长。
63.s402、若多个历史加载时长的个数大于预设值，则去除多个历史加载时长中的最大时长和最小时长，得到剩余的历史加载时长。
64.s403、计算剩余的历史加载时长的平均值，得到目标时长。
65.在一些实施例中，若所述多个历史加载时长的个数小于或等于预设值，则计算所述多个历史加载时长的平均值，得到所述目标时长。
66.s404、响应于页面显示指令，确定目标时长。
67.s405、对页面进行加载的过程中，在页面中显示进度标识，进度标识用于标识页面的加载进度。
68.s406、根据目标时长控制进度标识在页面中变化。
69.具体的，s401和s301的实现方式和具体原理一致，s404和s201的实现方式和具体原理一致，s405和s202的实现方式和具体原理一致，s406和s203的实现方式和具体原理一致，此处不再赘述。
70.本实施例针对上述步骤s302进行了进一步优化，具体是，若所述多个历史加载时长的个数大于预设值，则去除所述多个历史加载时长中的最大时长和最小时长，得到剩余的历史加载时长，计算所述剩余的历史加载时长的平均值，得到所述目标时长；若所述多个历史加载时长的个数小于或等于预设值，则计算所述多个历史加载时长的平均值，得到所述目标时长。提高了目标时长的确定精度，进而实现了进度标识在加载页面中的平滑变化，使得页面加载结束时的画面与显示出的真实页面之间的衔接更流畅，进而提升了页面加载时的用户体验。
71.图5为本公开另一实施例提供的页面显示方法流程图。在本实施例中，针对上述步骤s203进行了进一步优化，以实现进度标识的平滑变化，进度标识在加载页面中的平滑变化，使得页面加载结束时的画面与显示出的真实页面之间的衔接更流畅，进而提升了页面加载时的用户体验旨在进一步提高目标时长的确定精度。该方法具体步骤如下：
72.s501、响应于页面显示指令，确定目标时长。
73.s502、对页面进行加载的过程中，在页面中显示进度标识，进度标识用于标识页面的加载进度。
74.s503、根据目标时长控制进度标识从最小进度值向最大进度值变化。
75.可选的，最小进度值为0，最大进度值为100％。具体的，根据目标时长控制进度标识从最小进度值向最大进度值变化包括如下几种情况：当进度标识的进度值到达100％时，页面可能是正好加载完成，也可能是尚未加载完成；当页面加载完成时，进度标识的进度值可能尚未达到100％。
76.在一些实施例中，为了获得进度标识平滑变化的效果，根据目标时长控制进度标识从最小进度值向最大进度值变化，包括：在目标时长内控制进度标识从最小进度值匀速变化到最大进度值，即进度标识从所述最小进度值变化到所述最大进度值的时长为所述目标时长。由于目标时长表示页面加载的平均耗时，因此当目标时长到达时，可以认为页面加载完成。因此，即便是出现当进度标识的进度值到达100％时，页面可能尚未加载完成或者当页面加载完成时，进度标识的进度值可能尚未达到100％，其中的误差不会太大，基本可以实现用户无感知。因此，可以解决在页面加载的过程中进度标识的变化卡顿或者突变的问题，且可实现从加载页面到真实页面之间的平滑衔接，从而提升用户的交互体验。
77.进一步的，若所述进度标识变化到所述最大进度值时，所述页面未加载完成，则控制所述进度标识保持在所述最大进度值，直到所述页面加载完成；当所述页面加载完成时，关闭所述进度标识，以获得较好的交互体验。需要说明的是，由于目标时长是基于页面的历史加载时长确定的，因此在目标时长内页面基本可以加载完成，即便存在些许误差，也是在容忍范围内，在用户侧基本可以做到无感知，即用户不会有看到进度标识的进度值达到100％时，而看不到真实页面的体验，在用户的感知层，基本是用户看到进度值达到100％时能够看到真实页面。如图6所示的一种从页面加载到真实页面之间切换的示意图，进度标识显示页面加载进度为100％时，从加载页平滑切换为真实页面610，给用户带来一种进度标识平滑变化、页面平滑切换的体验。
78.概括性的，由于用户可能不止一次点击同一个链接从而打开同一个页面，因此可以记录一段历史时间内用户每次点击该同一个链接后，该同一个页面的历史加载时长。该历史加载时长可以是从用户点击该链接到该页面渲染完成的时长。进一步，根据该同一个页面的多个历史加载时长，计算出目标时长，目标时长可以是该多个历史加载时长的平均值。当用户再次点击该同一个链接时，按照该目标时长，控制进度条从0匀速或非匀速到达100％。如果进度条到达100％的时候，页面实际还未加载完成，则进度条就保持在100％的状态，直到页面实际加载完成时，进度条才从页面中消失。换言之，现有技术中进度条从0变化到100％的时长取决于已加载到的数据和网速。而本公开中的进度条从0变到100％的时长为目标时长。用户点击链接后，进入页面html渲染阶段即页面加载过程，终端判断本地是否有计算好的目标时长，若有则使用该目标时长控制进度条从0变化到100％；若没有计算好的目标时长，则使用默认数据即默认时长(一个预设值)控制进度条从0变化到100％。当进度条到达100％的时，如果页面实际未加载完成，则进度条保持在100％的状态，当页面实际加载完成时，关闭进度条。或者，如果当页面实际加载完成时，进度条可能还未到达100％，此时，也关闭进度条。在关闭进度条之后，计算本次的页面加载时长，即从用户本次点击链接到页面实际加载完成的时长，或者本次的页面加载时长也可以是从本次进度条出现到页面实际加载完成的时长。
79.另外，在本公开的方案中，只要页面实际未加载完成，页面除了显示进度条之外的部分可以是空白的。取出本地存储的历史加载时长(历史加载时长可能是多个，可能是1个，
也可能没有)，同时把本次的页面加载时长作为新的历史加载时长，如果历史加载时长的总个数超过预设值，例如5个，则保留最新的5个，将时间较久的删除掉。并将保留的最新的5个历史加载时长存入本地，供后续计算目标时长时使用。如果历史加载时长的总个数小于或等于5个，则有几个保留几个。如果保留的历史加载时长的总个数大于3个(即4个或者5个)，则去掉其中的最大值以及最小值，剩下的取平均值得到目标时长；如果保留的历史加载时长的总个数少于或等于3个，则直接计算保留的历史加载时长的平均值作为目标时长。将计算出来的目标时长存入本地，作为用户下次点击该链接时，进度条从0变化到100％的时长。进度条在目标时长内的变化可以是匀速变化，也可以是非匀速变化。
80.图7为本公开实施例提供的页面显示装置的结构示意图。本公开实施例提供的页面显示装置可以执行页面显示方法实施例提供的处理流程，如图7所示，该页面显示装置包括：确定模块710、加载模块720、显示模块730和控制模块740。
81.其中，确定模块710，用于响应于页面显示指令，确定目标时长；加载模块720，用于对页面进行加载；显示模块730，用于在加载模块对页面进行加载的过程中，在页面中显示进度标识，进度标识用于标识页面的加载进度；控制模块740，用于根据目标时长控制进度标识在页面中变化。
82.可选的，页面显示装置还包括：计算模块，用于响应于页面显示指令，确定目标时长之前，获取页面的多个历史加载时长；根据多个历史加载时长，计算目标时长。
83.可选的，计算模块包括：过滤单元，用于若多个历史加载时长的个数大于预设值，则去除多个历史加载时长中的最大时长和最小时长，得到剩余的历史加载时长；计算单元，用于计算剩余的历史加载时长的平均值，得到目标时长。
84.可选的，计算模块具体用于：若多个历史加载时长的个数小于或等于预设值，则计算多个历史加载时长的平均值，得到目标时长。
85.可选的，控制模块740具体用于：根据目标时长控制进度标识从最小进度值向最大进度值变化。
86.可选的，进度标识从最小进度值变化到最大进度值的时长为目标时长。
87.可选的，控制模块740还用于：若进度标识变化到最大进度值时，页面未加载完成，则控制进度标识保持在最大进度值，直到页面加载完成；当页面加载完成时，关闭进度标识。
88.图7所示实施例的页面显示装置可用于执行上述方法实施例的技术方案，其实现原理和技术效果类似，此处不再赘述。
89.以上描述了页面显示装置的内部功能和结构，该装置可实现为一种电子设备。图8为本公开实施例提供的电子设备实施例的结构示意图。如图8所示，该电子设备包括存储器151和处理器152。
90.存储器151，用于存储程序。除上述程序之外，存储器151还可被配置为存储其它各种数据以支持在电子设备上的操作。这些数据的示例包括用于在电子设备上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。
91.存储器151可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(sram)，电可擦除可编程只读存储器(eeprom)，可擦除可编程只读存储器(eprom)，可编程只读存储器(prom)，只读存储器(rom)，磁存储器，快闪存储器，磁盘
或光盘。
92.处理器152，与存储器151耦合，执行存储器151所存储的程序，以用于：
93.响应于页面显示指令，确定目标时长；对页面进行加载的过程中，在页面中显示进度标识，进度标识用于标识页面的加载进度；根据目标时长控制进度标识在页面中变化。
94.进一步，如图8所示，电子设备还可以包括：通信组件153、电源组件154、音频组件155、显示器156等其它组件。图8中仅示意性给出部分组件，并不意味着电子设备只包括图8所示组件。
95.通信组件153被配置为便于电子设备和其他设备之间有线或无线方式的通信。电子设备可以接入基于通信标准的无线网络，如wifi，2g或3g，或它们的组合。在一个示例性实施例中，通信组件153经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件153还包括近场通信(nfc)模块，以促进短程通信。例如，在nfc模块可基于射频识别(rfid)技术，红外数据协会(irda)技术，超宽带(uwb)技术，蓝牙(bt)技术和其他技术来实现。
96.电源组件154，为电子设备的各种组件提供电力。电源组件154可以包括电源管理系统，一个或多个电源，及其他与为电子设备生成、管理和分配电力相关联的组件。
97.音频组件155被配置为输出和/或输入音频信号。例如，音频组件155包括一个麦克风(mic)，当电子设备处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器151或经由通信组件153发送。在一些实施例中，音频组件155还包括一个扬声器，用于输出音频信号。
98.显示器156包括屏幕，其屏幕可以包括液晶显示器(lcd)和触摸面板(tp)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。
99.另外，本公开实施例还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行以实现上述实施例所述的方法。
100.需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
101.以上所述仅是本公开的具体实施方式，使本领域技术人员能够理解或实现本公开。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本公开的精神或范围的情况下，在其它实施例中实现。因此，本公开将不会被限制于本文所述的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。