CN116662691A - 一种页面组件加载方法、装置、设备及存储介质 - Google Patents

Abstract

本申请涉及页面开发技术领域，提供了一种页面组件加载方法、装置、设备及存储介质，所述方法包括：将当前浏览页面中可视区域内的第一组件添加至加载列表中；将当前浏览页面中可视区域外的第二组件添加至待加载列表中并计算加载顺序；根据所有所述第一组件的优先级高低或根据所有所述第一组件加载耗时由低到高依次加载各个所述第一组件；根据所述加载顺序依次加载各个所述第二组件。通过该方法将组件分为可视区域内组件和可视区域外组件，在浏览页面时，只需要按照加载策略先加载可视区域内组件，这样就提高了首屏加载的速度，缩短了白屏时间，提升了用户体验。

Description

一种页面组件加载方法、装置、设备及存储介质

技术领域

本申请涉及页面开发技术领域，尤其涉及一种页面组件加载方法、装置、设备及存储介质。

背景技术

随着计算机技术的发展，越来越多的技术应用在金融领域，传统金融业正逐步向金融科技转变，目前，对于金融信息的浏览，通常是在银行等金融机构的APP上进行，在浏览页面的过程中由于页面加载慢常会出现长时间没有内容的情况，即白屏的问题，现在金融机构APP开发或者网页开发时，通常使用懒加载、预加载、异步加载等方案解决白屏问题，其虽然在一定程度上可以优化页面加载效率，但仍存在以下缺陷：一、处理首屏加载问题不彻底，懒加载和异步加载仅仅是将非首屏内容推迟加载，而没有真正解决首屏加载速度问题。预加载虽然可以提前加载非首屏内容，但是仍需等待预加载完成后再加载首屏内容，仍然存在白屏问题；二、加载效率不稳定，现有方案很难根据不同页面、用户设备等因素动态调整加载策略，导致加载效率不稳定，甚至可能导致一些用户加载时间过长，影响用户体验；三、优先级控制能力不足，现有方案大多依赖静态配置或基于简单的条件判断来确定加载顺序，缺乏对组件优先级动态调整的能力。

发明内容

有鉴于此，本申请实施例提供一种页面组件加载方法、装置、设备及存储介质，该方法通过可视区域内各个组件优先级和加载耗时来确定组件的加载顺序，可以有效解决首屏加载速度和白屏问题。

第一方面，本申请实施例提供一种页面组件加载方法，包括：

将当前浏览页面中可视区域内的第一组件添加至加载列表中；

将当前浏览页面中可视区域外的第二组件添加至待加载列表中并计算加载顺序；

根据所有所述第一组件的优先级高低或根据所有所述第一组件的加载耗时由低到高依次加载各个所述第一组件；

根据所述加载顺序依次加载各个所述第二组件。

在一些实施例中，所述将当前浏览页面中可视区域内的第一组件添加至加载列表中前，还包括：

获取当前浏览页面的组件列表中所有组件的位置信息；

将所述组件列表中每个组件的位置与可视区域的位置进行比较；

若可视区域顶部位置与可视区域高度之和大于等于组件顶部位置，且所述组件顶部位置与组件高度之和小于等于所述可视区域顶部位置，则将当前组件作为可视区域内的第一组件，否则作为可视区域外的第二组件。

在一些实施例中，所述根据所有所述第一组件的优先级高低或根据所有所述第一组件的加载耗时由低到高依次加载各个所述第一组件，包括：

判断所述可视区域内组件是否首次加载；

若是，获取当前首次加载的所有所述第一组件的预设权重优先级，根据所述第一组件的优先级高低依次加载当前所述第一组件；

若否，获取所有所述第一组件的加载耗时，根据所述第一组件的加载耗时由低到高依次加载当前所述第一组件。

在一些实施例中，所述根据所有所述第一组件的加载耗时由低到高依次加载各个所述第一组件的过程中，还包括：

若存在多个第一组件耗时相等，则

获取耗时相等的各个所述第一组件的优先级，并按照优先级高低依次加载所述第一组件。

在一些实施例中，所述根据所有所述第一组件的加载耗时由低到高依次加载各个所述第一组件前，还包括：

在显示所述当前浏览页面时，记录当前浏览页面中所有组件的加载开始时间和加载结束时间；

根据当前每个组件所述加载开始时间和所述加载结束时间计算当前每个组件的加载耗时；

将当前每个组件的加载耗时保存到浏览器缓存中。

在一些实施例中，所述将当前浏览页面中可视区域外的第二组件添加至待加载列表中并计算加载顺序，包括：

判断可视区域外的第二组件是否加载过；

若是，获取当前所有所述可视区域外的第二组件的加载耗时，根据当前所述第二组件的加载耗时由低到高依次排列加载顺序；

若否，获取当前所有所述可视区域外的第二组件的权重优先级，根据当前所述第二组件优先级高低依次排列加载顺序；

其中，若存在多个第二组件耗时相等，则获取耗时相等的各个所述第二组件的优先级，并按照优先级高低依次排列加载顺序。

第二方面，本申请实施例提供一种页面组件加载装置，包括：

第一添加模块，用于将当前浏览页面中可视区域内的第一组件添加至加载列表中；

第二添加模块，用于将当前浏览页面中可视区域外的第二组件添加至待加载列表中并计算加载顺序；

第一加载模块，用于根据所有所述第一组件的优先级高低或根据所有所述第一组件的加载耗时由低到高依次加载各个所述第一组件；

第二加载模块，用于根据所述加载顺序依次加载各个所述第二组件。

在一些实施例中，所述装置还包括：

获取模块，用于获取当前浏览页面的组件列表中所有组件的位置信息；

对比模块，用于将所述组件列表中每个组件的位置与可视区域的位置进行比较；若可视区域顶部位置与可视区域高度之和大于等于组件顶部位置，且所述组件顶部位置与组件高度之和小于等于所述可视区域顶部位置，则将当前组件作为可视区域内的第一组件，否则作为可视区域外的第二组件。

第三方面，本申请实施例提供一种终端设备，包括处理器和存储器，所述存储器存储有计算机程序，所述处理器用于执行所述计算机程序以实施上述的页面组件加载方法。

第四方面，本申请实施例提供一种可读存储介质，其存储有计算机程序，所述计算机程序在处理器上执行时，实施上述的页面组件加载方法。

本申请的实施例具有如下有益效果：

本申请实施例的页面组件加载方法，通过将当前浏览页面中可视区域内的第一组件添加至加载列表中，并将可视区域外的第二组件添加至待加载列表中并计算加载顺序，然后按照实际需要根据所有所述第一组件的优先级高低或根据所有所述第一组件加载耗时由低到高依次加载各个所述第一组件，然后根据所述加载顺序依次加载各个所述第二组件。通过上述方法将组件分为可视区域内组件和可视区域外组件，在浏览页面时，只需要按照加载策略先加载可视区域内组件，这样就提高了首屏加载的速度，缩短了白屏时间，当浏览器页面发生滚动时，可视区域发生变化，重复上述流程即可。另外，由于在浏览可视区域内容时，待加载列表中同时将可视区域外的第二组件的加载顺序排列好，这样如果浏览器页面发生滚动，发生变化后的可视区域内的组件加载速度也会很快，这样就极大程度的减少了白屏时间。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本申请实施例一种页面组件加载方法的第一流程示意图；

图2示出了本申请实施例一种页面组件加载方法的第二流程示意图；

图3示出了本申请实施例可视区域与第一组件的示意图；

图4示出了本申请实施例中加载第二组件的一种流程示意图；

图5示出了本申请实施例中加载第一组件的一种流程示意图；

图6示出了本申请实施例一种页面组件加载方法的第三流程示意图；

图7示出了本申请实施例一种页面组件加载装置的结构示意图。

具体实施方式

下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。

通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

在下文中，可在本申请的各种实施例中使用的术语“包括”、“具有”及其同源词仅意在表示特定特征、数字、步骤、操作、元件、组件或前述项的组合，并且不应被理解为首先排除一个或更多个其它特征、数字、步骤、操作、元件、组件或前述项的组合的存在或增加一个或更多个特征、数字、步骤、操作、元件、组件或前述项的组合的可能性。此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

除非另有限定，否则这里使用的所有术语(包括技术术语和科学术语)具有与本申请的各种实施例所属领域普通技术人员通常理解的含义相同的含义。所述术语(诸如在一般使用的词典中限定的术语)将被解释为具有与在相关技术领域中的语境含义相同的含义并且将不被解释为具有理想化的含义或过于正式的含义，除非在本申请的各种实施例中被清楚地限定。

下面结合附图，对本申请的一些实施方式作详细说明。在不冲突的情况下，下述的实施例及实施例中的特征可以相互结合。

在Web应用程序的应用过程中，浏览页面时由于组件加载慢、加载顺序不合理的情况，导致白屏时间过长，影响用户的浏览体验，比如在使用银行APP或者登录银行等金融机构的官网时，通常要等待一会才能显示出内容，这样就导致用户体验感不好，对银行等金融机构的印象不好，目前对于上述问题，常使用懒加载、预加载、异步加载等方法来优化页面组件的加载效率，但是仍存在一些缺陷，如处理首屏加载问题不彻底：懒加载和异步加载仅仅是将非首屏内容推迟加载，而没有真正解决首屏加载速度问题，预加载虽然可以提前加载非首屏内容，但是仍需等待预加载完成后再加载首屏内容，仍然存在白屏问题。加载效率不稳定：现有方案很难根据不同页面、用户设备等因素动态调整加载策略，导致加载效率不稳定，甚至可能导致一些用户加载时间过长，影响用户体验。优先级控制能力不足：现有方案大多依赖静态配置或基于简单的条件判断来确定加载顺序，缺乏对组件优先级动态调整的能力。

对于现有技术中出现的上述至少一种问题，本申请实施例通过将当前浏览页面中可视区域内的第一组件添加至加载列表中，并将可视区域外的第二组件添加至待加载列表中并计算加载顺序，然后按照实际需要根据所有所述第一组件的优先级高低或根据所有所述第一组件加载耗时由低到高依次加载各个所述第一组件，然后根据所述加载顺序依次加载各个所述第二组件。通过上述方法将组件分为可视区域内组件和可视区域外组件，在浏览页面时，只需要按照加载策略先加载可视区域内组件，这样就提高了首屏加载的速度，缩短了白屏时间，当浏览器页面发生滚动时，可视区域发生变化，重复上述流程即可。另外，由于在浏览可视区域内容时，待加载列表中同时将可视区域外的第二组件的加载顺序排列好，这样如果浏览器页面发生滚动，发生变化后的可视区域内的组件加载速度也会很快，这样就极大程度的减少了白屏时间。

在具体描述本申请实施例前，首先解释下本申请实施例中的可视区域。

本申请实施例的可视区域指的就是网页或者APP可视区域，具体是指用户在浏览器中看到的网页部分，通常是指用户的可见区域，不包括浏览器的工具栏、地址栏、标签栏等。例如在登陆银行官网时，银行官网页面上方的网址区域，及工具区域不属于可见区域，但是其页面中，显示的登录处、银行要闻、便捷服务等区域都属于可见区域。在不同的浏览器、设备和操作系统中，可视区域的大小也会有所不同。例如，在电脑上可视区域大小可能比在手机上要大，不同的浏览器也会有不同的可视区域大小。

下面结合一些具体的实施例来对该页面组件加载方法进行说明。

图1示出了本申请实施例的页面组件加载方法的第一流程示意图。示范性地，该页面组件加载方法包括以下步骤S100～S400：

步骤S100，将当前浏览页面中可视区域内的第一组件添加至加载列表中。

示范性地，用户在浏览页面时，首先获取可视区域内的第一组件，并将第一组件添加至加载列表中，第一组件即用户当前浏览页面的可视区域中的组件。

此外，在步骤S100之前，首先需要区分哪些组件是可视区域内组件，哪些组件是可视区域外组件，如图2所示，包括步骤S110～S130：

步骤S110，获取当前浏览页面的组件列表中所有组件的位置信息。

示范性地，用户请求打开浏览页面，获取当前浏览页面的组件列表中的所有组件，然后获取组件列表中所有组件的位置信息，浏览器将组件位置信息发送给组件。

需要注意的时，当滚动浏览器窗口时，浏览器会触发滚动事件，这样可视区域内组件就发生了变化，浏览器需要再次获取当前浏览器页面中组件的位置信息，然后将组件位置信息发送给当前组件。

步骤S120，将所述组件列表中每个组件的位置与可视区域的位置进行比较。

在本步骤中，需要获取可视区域的位置信息，然后将步骤S110中每个组件的位置信息与可视区域的位置信息进行比较。

步骤S130，若可视区域顶部位置与可视区域高度之和大于等于组件顶部位置，且所述组件顶部位置与组件高度之和小于等于所述可视区域顶部位置，则将当前组件作为可视区域内的第一组件，否则作为可视区域外的第二组件。

图3示出了本申请实施例可视区域与第一组件的示意图，如图3所示，组件1和组件2均为当前可视区域内的第一组件，如图中所示，组件1顶部位置小于可视区域顶部位置与可视区域高度之和，可视区域顶部位置大于组件1顶部位置与组件1高度之和。需要说明的是可视区域内的第一组件可以是更多个，该示意图仅仅是一个示例。

步骤S200，将当前浏览页面中可视区域外的第二组件添加至待加载列表中并计算加载顺序。

在浏览页面时，只需要先加载可视区域内组件即可，将可视区域外的第二组件添加到待加载列表中，然后计算待加载列表中可视区域外组件的加载顺序。这样优先加载可视区域内的组件，延时加载可视区域外的组件，提升了可视区域内组件的加载效率，减少了当前浏览页面的白屏时间。

在一种实施方式中，如图4所示，步骤S200包括如下子步骤：

步骤S210，判断可视区域外的第二组件是否加载过。

步骤S220，若是，获取当前所有所述可视区域外的第二组件的加载耗时，根据当前所述第二组件的加载耗时由低到高依次排列加载顺序。

在本步骤中，可视区域外组件的加载耗时，为当前组件在加载时加载结束时间减去加载开始时间。需要注意的时，若当前所述可视区域外组件出现多个组件加载耗时相等时，可进一步按照这些组件的预设权重优先级排列加载顺序。

步骤S230，若否，获取当前所有所述可视区域外的第二组件的权重优先级，根据当前所述第二组件优先级高低依次排列加载顺序。

需要说明的是，若当前可视区域外的第二组件有一部分之前加载过，一部分之前没有加载过，这种情况下，可以根据之前预设的，先按照之前加载过的，先根据加载耗时依次排列加载顺序，然后再按照当前可视区域外的第二组件权重优先级依次排列之前没有加载过的组件。或者按照当前第二组件中之前已经加载过的组件和之前没有加载过的组件的占比来确定，占比高的可以优先加载，例如当前第二组件中之前已经加载过的组件为60％，没有加载过的组件为40％，则先根据加载耗时由低到高依次排列之前已经加载过的组件的加载顺序，然后再按照优先级高低依次排列之前加载过的组件的加载顺序。

步骤S300，根据所有所述第一组件的优先级高低或根据所有所述第一组件的加载耗时由低到高依次加载各个所述第一组件。

在一种实施方式中，如图5所示，步骤S300包括如下子步骤：

步骤S310，判断当前所有所述第一组件是否首次加载。

步骤S320，若是，获取当前首次加载的所有所述第一组件的预设权重优先级，根据所述第一组件优先级高低依次加载当前所述第一组件。

其中，浏览页面中所有的组件在组件渲染时就预设好权重优先级，组件权重优先级需要后端管理系统统一管理，在需要时，浏览器从后端管理系统中调取当前可视区域内的第一组件的权重优先级，然后按照优先级高低依次加载所述可视区域内的第一组件。

步骤S330，若否，获取当前所述第一组件的加载耗时，根据所述第一组件的加载耗时由低到高依次加载当前所述第一组件。

在本步骤中，若存在多个第一组件耗时相等，则获取耗时相等的各个所述第一组件的优先级，并按照优先级高低依次加载各个所述第一组件。

需要说明的是，若当前可视区域内的第一组件有一部分之前加载过，一部分之前没有加载过，这种情况下，可以根据之前预设的，先按照之前加载过的，先根据加载耗时由低到高依次加载当前所述第一组件中之前加载过的组件，然后再按照优先级高低依次加载当前所述第一组件中之前没有加载过的组件。或者按照当前第一组件中之前已经加载过的组件和之前没有加载过的组件的占比来确定，占比高的可以优先加载，例如当前第一组件中之前已经加载过的组件为60％，没有加载过的组件为40％，则先根据加载耗时由低到高依次加载当前所述第一组件中之前已经加载过的组件，然后再按照优先级高低依次加载当前所述第一组件中之前没有加载过的组件。

步骤S400，根据所述加载顺序依次加载各个所述第二组件。

需说明的是，在滚动浏览器窗口时，浏览器会触发滚动事件，此时可视区域会发生改变，可视区域内的第一组件也会发生变化，此时，需要重复上述流程进行加载组件。

作为一种可选的方案，考虑到后续可能还需要重复加载这些组件，因此在显示加载当前页面中的组件时，可以同时记录这些组件的加载耗时，以便作为后续组件加载时的基础或依据等。

示范性地，如图6所示，该方法还包括如下步骤：

步骤S340，在显示所述当前浏览页面时，记录当前浏览页面中所有组件的加载开始时间和加载结束时间。

步骤S350，根据当前每个组件所述加载开始时间和所述加载结束时间计算当前每个组件的加载耗时。

步骤S360，将当前每个组件的加载耗时保存到浏览器缓存中。

下面举例说明本申请实施例的页面组件加载方法。

当打开浏览页面时，首先获取当前浏览页面的组件列表中所有组件，若所有组件包括组件a、组件b、组件c、组件d、组件e、组件f，根据这些组件的位置信息与可视区域的位置信息进行比较，如果在可视区域内则为第一组件，若不在可视区域内则为第二组件，加入组件a、组件b和组件c在可视区域内，则组件a、组件b和组件c为第一组件并将其添加至加载列表中，则组件d、组件e、组件f为第二组件并将其添加至待加载列表中同时计算其加载顺序。然后将可视区域内的第一组件(组件a、组件b和组件c)进行加载，为了提高加载的效率，减少白屏时间，如果组件a、组件b和组件c之前没有加载过，则按照预设的权重优先级案优先级从高到低依次加载，如果组件a、组件b和组件c之前加载过，则获取组件a、组件b和组件c之前的加载耗时，按照加载耗时从低到高依次加载，最后对于组件d、组件e、组件f按照计算好的加载顺序依次加载完成即可。如果页面发生滚动，即之前可视区域内第一组件包括组件a、组件b和组件c，发生滚动后，可能当前可视区域内的第一组件包括组件c、组件d和组件e，而组件a、组件b和组件f此时为可视区域外组件，这种情况下，重复上述步骤即可。可以理解，这里的组件a、组件b、组件c、组件d、组件e、组件f仅是一种示例，具体组件根据实际情况确定。

本申请实施例通过将浏览页面中的组件分为可视区域内的第一组件和可视区域外的第二组件，在加载时首先根据优先级或者组件耗时先加载可视区域内的第一组件，这样可视区域内的组件能优先呈现出来，减少了页面的白屏时间，用户体验较好。另外在加载可视区域内的第一组件时，设定了优先级和加载耗时两种排序方式，必要时也可以结合使用，这样首次加载当前组件时，通过各个第一组件的优先级高低排序依次加载，首屏加载效率高，在非首次加载过程中，由于组件在之前加载时，将各个组件的加载耗时都记录在了浏览器缓存中，这时只需要调取浏览器缓存中各个第一组件的加载耗时并按加载耗时由低到高依次加载，这样即使可能有些组件加载稍慢，但是本申请实施例会有将耗时较低的组件优先加载出来，用户可以直观的看到页面在显示中提升了用户体验，同时也显著降低页面白屏时间。另外各个组件的优先级可以在后端管理系统设定，这样可以方便后续运维动态调整加载顺序，以提高页面可交互性。

图7示出了本申请实施例的页面组件加载装置的结构示意图。示范性地，该页面组件加载装置100包括：

第一添加模块110，用于将当前浏览页面中可视区域内的第一组件添加至加载列表中。

第二添加模块120，用于将当前浏览页面中可视区域外的第二组件添加至待加载列表中并计算加载顺序。

第一加载模块130，用于根据所有所述第一组件的优先级高低或根据所有所述第一组件的加载耗时由低到高依次加载各个所述第一组件。

第二加载模块140，用于根据所述加载顺序依次加载各个所述第二组件。

进一步地，页面组件加载装置100还包括：

获取模块150，用于获取当前浏览页面的组件列表中所有组件的位置信息。

对比模块160，用于将所述组件列表中每个组件的位置与可视区域的位置进行比较；若可视区域顶部位置与可视区域高度之和大于等于组件顶部位置，且所述组件顶部位置与组件高度之和小于等于所述可视区域顶部位置，则将当前组件作为可视区域内的第一组件，否则作为可视区域外的第二组件。

可以理解，本实施例的页面组件加载装置对应于上述实施例的页面组件加载方法，上述实施例中的可选项同样适用于本实施例，故在此不再重复描述。

本申请还提供了一种终端设备，示范性地，该终端设备包括处理器和存储器，其中，存储器存储有计算机程序，处理器通过运行所述计算机程序，从而使终端设备执行上述的页面组件加载方法或者上述页面组件加载装置中的各个模块的功能。

其中，处理器可以是一种具有信号的处理能力的集成电路芯片。处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、图形处理器(GraphicsProcessing Unit，GPU)及网络处理器(Network Processor，NP)、数字信号处理器(DSP)、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件中的至少一种。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。

存储器可以是，但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-Only Memory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。其中，存储器用于存储计算机程序，处理器在接收到执行指令后，可相应地执行所述计算机程序。

本申请还提供了一种可读存储介质，用于储存上述终端设备中使用的所述计算机程序。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和结构图加载了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，结构图和/或流程图中的每个方框、以及结构图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块或单元可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或更多个模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是智能手机、个人计算机、服务器、或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。

Claims (10)

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

将当前浏览页面中可视区域内的第一组件添加至加载列表中；

将当前浏览页面中可视区域外的第二组件添加至待加载列表中并计算加载顺序；

根据所有所述第一组件的优先级高低或根据所有所述第一组件的加载耗时由低到高依次加载各个所述第一组件；

根据所述加载顺序依次加载各个所述第二组件。

2.根据权利要求1所述的页面组件加载方法，其特征在于，所述将当前浏览页面中可视区域内的第一组件添加至加载列表中之前，还包括：

获取当前浏览页面的组件列表中所有组件的位置信息；

将所述组件列表中每个组件的位置与可视区域的位置进行比较；

若可视区域顶部位置与可视区域高度之和大于等于组件顶部位置，且所述组件顶部位置与组件高度之和小于等于所述可视区域顶部位置，则将当前组件作为可视区域内的第一组件，否则作为可视区域外的第二组件。

3.根据权利要求1所述的页面组件加载方法，其特征在于，所述根据所有所述第一组件的优先级高低或根据所有所述第一组件的加载耗时由低到高依次加载各个所述第一组件，包括：

判断当前所有所述第一组件是否首次加载，

若是，获取当前首次加载的所有所述第一组件的预设权重优先级，根据所述第一组件的优先级高低依次加载当前所述第一组件；

若否，获取当前所述第一组件的加载耗时，根据所述第一组件的加载耗时由低到高依次加载当前所述第一组件。

4.根据权利要求1或3所述的页面组件加载方法，其特征在于，所述根据所有所述第一组件的加载耗时由低到高依次加载各个所述第一组件的过程中，还包括：

若存在多个第一组件耗时相等，则获取耗时相等的各个所述第一组件的优先级，并按照优先级高低依次加载所述第一组件。

5.根据权利要求1所述的页面组件加载方法，其特征在于，所述根据所有所述第一组件的加载耗时由低到高依次加载各个所述第一组件之前，还包括：

在显示所述当前浏览页面时，记录当前浏览页面中所有组件的加载开始时间和加载结束时间；

根据当前每个组件所述加载开始时间和所述加载结束时间计算当前每个组件的加载耗时；

将当前每个组件的加载耗时保存到浏览器缓存中。

6.根据权利要求1或2所述的页面组件加载方法，其特征在于，所述将当前浏览页面中可视区域外的第二组件添加至待加载列表中并计算加载顺序，包括：

判断可视区域外的第二组件是否加载过；

若是，获取当前所有所述可视区域外的第二组件的加载耗时，根据当前所述第二组件的加载耗时由低到高依次排列加载顺序；

若否，获取当前所有所述可视区域外的第二组件的权重优先级，根据当前所述第二组件优先级高低依次排列加载顺序；

其中，若存在多个第二组件耗时相等，则获取耗时相等的各个所述第二组件的优先级，并按照优先级高低依次排列加载顺序。

7.一种页面组件加载装置，其特征在于，包括：

第一添加模块，用于将当前浏览页面中可视区域内的第一组件添加至加载列表中；

第二添加模块，用于将当前浏览页面中可视区域外的第二组件添加至待加载列表中并计算加载顺序；

第一加载模块，用于根据所有所述第一组件的优先级高低或根据所有所述第一组件的加载耗时由低到高依次加载各个所述第一组件；

第二加载模块，用于根据所述加载顺序依次加载各个所述第二组件。

8.根据权利要求7所述的页面组件加载装置，其特征在于，所述装置还包括：

获取模块，用于获取当前浏览页面的组件列表中所有组件的位置信息；

对比模块，用于将所述组件列表中每个组件的位置与可视区域的位置进行比较；若可视区域顶部位置与可视区域高度之和大于等于组件顶部位置，且所述组件顶部位置与组件高度之和小于等于所述可视区域顶部位置，则将当前组件作为可视区域内的第一组件，否则作为可视区域外的第二组件。

9.一种终端设备，其特征在于，所述终端设备包括处理器和存储器，所述存储器存储有计算机程序，所述处理器用于执行所述计算机程序以实施权利要求1-6中任一项所述的页面组件加载方法。

10.一种可读存储介质，其特征在于，其存储有计算机程序，所述计算机程序在处理器上执行时，实施根据权利要求1-6中任一项所述的页面组件加载方法。