CN115795133A - 数据加载方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请适用于计算机技术领域，提供了数据加载方法、装置、电子设备及存储介质，包括：确定第一时间，上述第一时间为监听到滚动事件时的时间，确定第二时间，上述第二时间为在上述滚动事件后所监听到的页面刷新的时间，若上述第二时间与上述第一时间的时间间隔大于或等于预设阈值，则获取目标数据并在用户视口展示上述目标数据，其中，上述目标数据为上述滚动事件所请求的待展示数据，上述用户视口为预先创建的高度固定的滚动容器。本申请可以减小渲染压力，提高数据加载效果。

Description

数据加载方法、装置、电子设备及存储介质

技术领域

本申请属于计算机技术领域，尤其涉及数据加载方法、装置、电子设备及计算机可读存储介质。

背景技术

web网页是指万维网上的一个按照HTML(Hyper Text Markup Language，超文本标记语言)格式组织起来的文件，通常以信息页面的形式出现，一个web网页通常包括图形、文字、声音、视频等信息。用户在通过万维网进行信息查询时，浏览器需要从服务器请求对应的资源，并将请求到的数据以信息页面(即web网页)的形式展示。

现有技术中，通常一次性将数据全部加载到页面上显示，但其数据量越大渲染压力也就越大，使得数据量较大时存在渲染卡顿的问题。

发明内容

本申请实施例提供了数据加载方法、装置、电子设备及存储介质，可以减小渲染压力，从而减少渲染卡顿现象，提高数据加载效果。

第一方面，本申请实施例提供了一种数据加载方法，包括：

确定第一时间，上述第一时间为监听到滚动事件时的时间；

确定第二时间，上述第二时间为在上述滚动事件后所监听到的页面刷新的时间；

若上述第二时间与上述第一时间的时间间隔大于或等于预设阈值，则获取目标数据并在用户视口展示上述目标数据，其中，上述目标数据为上述滚动事件所请求的待展示数据，上述用户视口为预先创建的高度固定的滚动容器。

第二方面，本申请实施例提供了一种数据加载装置，包括：

第一时间获取模块，用于确定第一时间，上述第一时间为监听到滚动事件时的时间；

第二时间获取模块，用于确定第二时间，上述第二时间为在上述滚动事件后所监听到的页面刷新的时间；

数据展示模块，用于若上述第二时间与上述第一时间的时间间隔大于或等于预设阈值，则获取目标数据并在用户视口展示上述目标数据，其中，上述目标数据为上述滚动事件所请求的待展示数据，上述用户视口为预先创建的高度固定的滚动容器。

第三方面，本申请实施例提供了一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一方面所述的数据加载方法的步骤。

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

第五方面，本申请实施例提供了一种计算机程序产品，当计算机程序产品在电子设备上运行时，使得电子设备执行上述第一方面中任一项所述的数据加载方法。

本申请实施例与现有技术相比存在的有益效果是：

本申请实施例中，根据监听到滚动事件时的时间确定第一时间，并根据在上述滚动事件后监听到的页面刷新的时间确定第二时间，若上述第二时间与上述第一时间的时间间隔大于或等于预设的阈值，则获取目标数据并在用户视口展示上述目标数据。其中，上述目标数据为上述滚动事件所请求的待展示数据，上述用户视口为预先创建的高度固定的滚动容器。在确定第二时间时，由于定时器会持续计时，在用户最小化或隐藏页面时定时器仍在持续工作，耗费CPU资源，因此，根据页面刷新的时间来确定第二时间时，不需要额外设置定时器，能够减少占用的CPU资源。同时，由于在用户高频触发滚动事件时，浏览器需要在短时间内高频次地请求触发的各个滚动事件所对应的目标数据，因此，在第二时间与第一时间的时间间隔大于或大于预设阈值时，再获取和展示上述目标数据，能够在用户高频触发滚动事件时，浏览器不会因为高频次的请求而丢失部分滚动事件的目标数据。并且，由于只获取滚动事件所请求的待展示数据作为目标数据，在高度固定的用户视口中进行展示，因此，在将数据渲染到页面进行展示时，只需要将目标数据渲染到用户视口进行展示，从而减小了渲染压力，减少了渲染卡顿的情况，进而提高数据的加载效果。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍。

图1是本申请一实施例提供的一种数据加载方法的流程示意图；

图2是本申请实施例提供的一种滚动体的结构示意图；

图3是本申请实施例提供的一种滚动体和缓存数据源的结构示意图；

图4是本申请实施例提供的一种滚动体和缓存数据源的结构示意图；

图5是本申请实施例提供的用户视口的结构示意图；

图6是本申请实施例提供的上空白占位和下空白占位的示意图；

图7是本申请实施例提供的数据加载装置的结构示意图；

图8是本申请实施例提供的电子设备的结构示意图。

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本申请实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本申请。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本申请的描述。

应当理解，当在本申请说明书和所附权利要求书中使用时，术语“包括”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

还应当理解，在本申请说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

另外，在本申请说明书和所附权利要求书的描述中，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

在本申请说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。

实施例一：

目前，一个页面的页面数据数量通常很大，在加载页面数据时，如果一次性将页面数据全部加载到页面上显示，则需要加载大量的页面数据。而一次性加载全部的页面数据会给浏览器的渲染造成很大的压力，渲染不及时的时候会造成页面卡顿的问题。对此，目前提出批量返回数据的方法，即随着用户的请求每次只返回少量固定数量的数据，使得浏览器只需要渲染少量数据。在批量返回数据时，由于前端(即页面)需要通过DOM(DocumentObjectModel，文档对象模型)元素来将数据渲染到页面上，而页面的每一个dom元素都要被存储到浏览器的内存中，随着用户的一次次的请求，浏览器渲染到页面上的数据越来越多，浏览器存储的dom节点(即dom元素)也越来越多，占用浏览器中过多的内存。并且，由于浏览器在进行渲染时，需要渲染页面的所有dom元素，随着dom元素数量的增加，浏览器每一次渲染数据时需要渲染的dom元素也就越多，在用户过快地滑动滚动条时，上一次滚动事件所请求的数据还未重绘完成，下一次的滚动事件又被触发，使得在高频触发滚动事件时，多次滚动事件的数据没有被重绘完成，从而丢失部分请求数据，进而导致数据加载效果较差。

为了提高数据加载效果，本申请实施例提供了一种数据加载方法。

在本申请实施例提供的数据加载方法中，确定第一时间，该第一时间为监听到滚动事件时的时间，在监听到该滚动事件后，确定第二时间，该第二时间为在该滚动事件后监听到的页面刷新的时间。若该第二时间与该第一时间的时间间隔大于等于预设阈值，则获取目标数据并在用户视口展示该目标数据，其中，该目标数据为该滚动事件所请求的待展示数据，用户视口为创建的高度固定的滚动容器。

由于只获取滚动事件的目标数据进行展示，因此，在将数据渲染到用户视口进行展示时，只需要渲染目标数据。而目标数据的数据量远小于页面所对应的所有数据量，因此，减小了渲染压力，从而减少了渲染卡顿的情况，提高数据加载的效果。同时，在第一时间和第二时间的时间间隔大于或等于阈值时，在获取该滚动事件的目标数据进行展示，因此，在用户高频触发滚动事件时，能够保证获取到每次的滚动事件的目标数据进行展示，不会因为短时间内的高频请求丢失部分目标数据。

下面结合附图对本申请实施例提供的数据加载方法进行描述。

图1示出了本发明实施例提供的一种数据加载方法的流程示意图，详述如下：

步骤S101，确定第一时间，上述第一时间为监听到滚动事件时的时间。

具体地，用户在浏览网页页面的过程中，浏览器持续监听用户是否触发了页面的滚动事件，若监听到用户触发了滚动事件，则记录当前浏览器监听到滚动事件被触发时的时间，并将该时间作为第一时间。可选地，由于浏览器响应滚动事件(响应滚动事件，即向服务器请求并展示滚动事件请求的数据)的速度通常较快，因此，在记录上述第一时间时，将上述第一时间精确到毫秒ms(如15.21.30.200)，也可以将上述第一时间精确到毫秒后一位(如20.30.11.3052，3052表示305.2ms)，以精确记录滚动事件被触发的时间。

上述滚动事件是指指示浏览器页面进行对应的滚动行为的事件，触发滚动事件的操作包括鼠标滚轮操作、滚动条拖动、键盘方向键点击和链接点击等，用户在进行这些操作时，浏览器页面的滚动事件会被触发，浏览器根据该滚动事件指示页面进行对应的滚动行为。例如，用户在浏览网页页面过程中，点击键盘的向上方向键，则浏览器监听到当前触发了键盘方向点击的滚动事件，该滚动事件指示网页向上滚动对应的距离，同时，浏览器记录当前该滚动事件被触发的时间(如12.05.00.088)并将其作为第一时间。

本申请实施例中，浏览器持续监听滚动事件，并记录监听到滚动事件被触发时的时间作为第一时间，由于浏览器响应滚动事件速度较快，因此，在记录第一时间时，将其精确到毫秒，能够较为精准地确定监听到触发滚动事件时的第一时间。

步骤S102，确定第二时间，上述第二时间为在上述滚动事件后所监听到的页面刷新的时间。

上述页面刷新是指浏览器的requestAnimationFrame函数根据屏幕刷新频率对浏览器的页面进行重绘来更新浏览器页面，页面刷新的频率通常受屏幕刷新频率的影响。例如，假设设备的屏幕刷新频率一般为60Hz，则requestAnimationFrame函数根据60Hz的屏幕刷新频率每秒执行六十次，即相当于16.67ms执行一次回调函数来刷新浏览器页面。例如，浏览器对应设备的屏幕刷新频率为60Hz，即该设备每秒最多可重绘60次，每16.7ms重绘一次。浏览器监听到页面的滚动事件被触发的时间，即第一时间为12.10.10.0010，在监听到滚动事件被触发后(即第一时间之后)，浏览器持续监听页面刷新的时间，第一次监听到页面刷新的时间为12.10.10.0157，第二次监听到页面刷新的时间为12.10.10.0324，根据监听到页面刷新的时间确定第二时间。由于用户触发滚动事件的时间是不事先确定的，因此，在监听到滚动事件被触发时的时间(第一时间)后，再监听在该第一时间后页面刷新的时间，根据监听到的页面刷新的时间确定获取第二时间，以便根据第二时间和第一时间的时间间隔确定是否获取滚动事件所请求的目标数据。

具体地，由于定时器存在发生随机值的延迟时间的问题，使得在采用定时器确定第二时间时，浏览器在渲染目标数据的时候页面更新可能存在延迟或存在页面更新时执行两次的情况，且页面被隐藏或最小化时，定时器仍在后台持续执行计时任务，对CPU资源存在一定的浪费，因此，在确定第一时间后，浏览器持续监听在该第一时间后浏览器页面刷新的时间，并将该页面刷新的时间作为第二时间。可选地，在记录第二时间时，第二时间的精度与上述第一时间的精度保持一致，统一精确到毫秒或精确到毫秒的后一位等，便于后续计算。

可选地，由于不同的设备受屏幕分辨率和屏幕尺寸的影响，不同设备的屏幕刷新频率可能不同，因此，根据用户当前使用的电子设备的屏幕刷新频率确定页面刷新的时间，如屏幕刷新频率为75Hz时，屏幕每秒刷新75次，即浏览器每13.3ms重绘一次，刷新浏览器页面。

本申请实施例中，由于定时器存在发生随机值的延迟时间的问题，对浏览器的数据加载效果存在一定的影响，并且，定时器在用户最小化或隐藏页面时仍在持续计时，耗费CPU资源，因此，在监听到页面被触发滚动事件后，再基于requestAnimationFrame函数刷新页面的时间确定第二时间，以减少不必要的CPU资源的占用。

步骤S103，若上述第二时间与上述第一时间的时间间隔大于或等于预设阈值，则获取目标数据并在用户视口展示上述目标数据。

上述目标数据为上述滚动事件所请求的待展示数据，即当前滚动事件发生后，页面中的用户视口所需要展示的数据。

上述用户视口为在页面上预先创建的高度固定的滚动容器。由于浏览器在请求到滚动事件对应的目标数据后，需要将目标数据渲染到页面上展示，如果为每一个数据都创建dom元素来渲染展示数据，对浏览器的内存和性能都会产生一定的影响，因此，在页面预先创建一个高度固定的div容器(即滚动容器)，使滚动体仅在该滚动容器内上下滚动，在滚动过程中，将滚动事件所请求的目标数据展示在该容器的视口(即用户视口)中。由于在渲染目标数据时，仅获取滚动事件所请求的目标数据在高度固定的用户视口中进行展示，因此，只需要将目标数据渲染到用户视口中，从而减小了渲染压力，减少了渲染卡顿的情况，从而提高数据加载效果。其中，在滚动过程中，页面中的滚动体的数据包括在用户视口展示的目标数据，滚动体的高度由曾经加载到用户视口展示的数据(包括当前展示的目标数据)数量决定。例如，如图2所示，在页面滚动的过程中，浏览器获取当前滚动事件所请求的目标数据并将其渲染到用户视口中进行展示，而滚动体中目标数据以外的长度则由该滚动事件之前用户视口曾经加载显示的数据(即该滚动事件之前的滚动事件所对应的目标数据)的数量决定。

具体地，由于浏览器响应滚动事件的请求的速度较快，因此，在用户短时间内高频地触发浏览器的滚动事件时，浏览器需要在较短时间内响应多个滚动事件(如用户通过快速滑动鼠标滚轮来高频次地触发页面的滚动事件)，即，浏览器在短时间内需要根据多个滚动事件的请求获取各个滚动事件所对应的目标数据并在页面的用户视口进行展示，此时，浏览器响应多个滚动事件的过程中，通常这一次滚动事件所请求的目标数据还未成功渲染显示在用户视口，下一次的滚动事件所请求的目标数据又要进行渲染显示，从而使得多次对于目标数据的渲染还没有完成，使得高频触发的滚动事件结束后，可能才渲染显示了一次滚动事件所请求的目标数据，并且，在浏览器短时间内响应多个滚动事件的过程中，由于多次渲染过程中又开始新的渲染，用户视口内的dom(Document Object Model，文档对象模型)元素没有及时更新就出现在用户的视线中，因此，页面会出现短暂的部分空白区域，影响数据加载效果和用户体验。为了提高数据加载效果，在确定第一时间和第二时间后，若判断出第二时间与第一时间的时间间隔大于或等于预设阈值(如30ms)，则浏览器才响应该滚动事件的请求，获取该滚动事件所请求的目标数据，并将该目标数据渲染到用户视口中进行展示。若第二时间与第一时间的时间间隔没有大于或等于预设阈值，则将下一次监听到页面刷新的时间作为新的第二时间，直至第二时间与上述第一时间的时间间隔大于或等于预设阈值，即，若在监听到滚动事件后，第一次监听到的页面刷新的时间(第一个第二时间)与上述第一时间的时间间隔没有大于或等于预设阈值，则继续监听页面刷新的时间，将第二次监听到的页面刷新的时间(第二个第二时间)与第一时间进行计算，直至第二时间与上述第一时间的时间间隔大于或等于预设阈值。

本申请实施例中，由于在第一时间和第二时间的时间间隔大于或等于预设阈值时，浏览器再响应该滚动事件的请求，获取该滚动事件所请求的目标数据并在用户视口展示该目标数据，因此，在用户高频触发浏览器的滚动事件时，浏览器不需要在短时间内高频次地响应多个滚动事件的请求，能够确保各个滚动事件所请求的目标数据进行显示，从而提高数据加载的效果。

本申请实施例中，根据监听到滚动事件时的时间确定第一时间，在监听到滚动事件后，根据监听到的页面刷新的时间确定第二时间，若上述第二时间与上述第一时间的时间间隔大于或等于预设的阈值，则获取目标数据，并在用户视口展示上述目标数据，其中，上述目标数据为上述滚动事件所请求的待展示数据，上述用户视口为预先创建的高度固定的滚动容器。由于定时器在用户最小化或隐藏页面时，仍在持续计时工作，耗费不必要的CPU资源，且定时器会存在发生随机值的延迟时间的情况，对数据加载效果产生一定的影响，因此，根据监听到的页面刷新的时间确定第二时间，不需要额外设置定时器，能够减少占用的CPU资源和提高数据加载的效果。由于在第二时间与第一时间的时间间隔大于或大于预设阈值时，才获取和展示上述目标数据，因此，在用户高频触发滚动事件时，浏览器不会因为高频次的滚动事件的数据请求而丢失部分滚动事件的目标数据。同时，在滚动过程中，浏览器只根据滚动事件的请求获取当前滚动事件所请求的待展示数据作为目标数据，在高度固定的用户视口展示目标数据，使得浏览器只需要将目标数据渲染到用户视口进行展示，减小了浏览器的渲染压力和存储压力，从而减少了页面卡顿的情况，进而提高数据加载效果。

在一些实施例中，上述步骤S103在获取目标数据并在用户视口展示上述目标数据时，包括：

A1、确定上述缓存数据源中上述目标数据的起始索引及终止索引。

可选地，由于浏览器在监听到滚动事件后，在响应该滚动事件的请求时，通常需要向服务器发送对应的请求来获取该滚动事件对应的目标数据，再获取服务器返回的目标数据并在用户视口中进行展示，因此，在用户网络不稳定时，浏览器响应滚动事件的请求时可能需要较长时间，甚至受网络影响，短时间内无法向服务器发送对应的请求和获取服务器返回的目标数据。为了减少数据加载时间，减少网络对数据加载的影响，在浏览器中创建一个缓存数据列表，该缓存数据源包括曾经加载到页面上的数据和待加载到页面时的数据，浏览器在获取滚动事件所请求的目标数据时，从该缓存数据源中获取上述目标数据，不需要向服务器发送获取对应的目标数据的请求，即，上述缓存数据源相当于页面(用户视口)所展示的数据的数据源。

A2、基于上述起始索引及上述终止索引获取上述目标数据。

A3、将上述目标数据填充到上述用户视口中对应的各个dom元素中。

dom是面向HTML和XML的文档对象模型，可以理解为网页的API(ApplicationProgramming Interface，应用程序接口)，它将网页页面的各个元素看作一个个对象，从而使页面中的元素可以被计算机语言获取或编辑。在浏览器加载数据的过程中，可以通过浏览器的对应方法对dom元素进行对应的操作，如通过innerHTML或innerText或value设置dom元素的内容。

可选地，在用户视口内设置多个dom元素，用于装载需要展示的目标数据。其中，dom元素的高度之和并不一定等于用户视口的高度，即，dom元素并不一定全部位于用户视口中。

具体地，浏览器在获取滚动事件所请求的目标数据时，由于是从缓存数据源中直接获取目标数据，因此，先确定该目标数据在缓存数据源中的起始索引和终止索引，从而获取该缓存数据源中该目标数据的起始索引和终止索引之间(包括起始索引，不包括终止索引)的数据，将其作为目标数据填充到用户视口中对应的各个dom元素里，从而实现将目标数据加载到页面进行展示。例如，如图3所示，某一滚动事件所对应的目标数据的起始索引为4，终止索引为9，则从缓存数据源中获取索引4至9的数据作为目标数据，并将各个索引对应的数据填充到对应的各个dom元素(即dom元素1至dom元素6的各个dom元素)中进行展示。

本申请实施例中，由于根据目标数据在缓存数据源中的起始索引和终止索引，从缓存数据源中获取目标数据进行展示，因此，在用户触发浏览器的滚动事件时，浏览器不需要从服务器获取滚动事件的目标数据，能够直接从浏览器的缓存数据源中获取目标数据，从而减少网络对数据加载的影响，同时，由于只获取滚动事件的目标数据进行展示，减小了数据渲染压力。

在一些实施例中，上述步骤A1包括：

A11、获取上述用户视口的顶部到滚动体的顶部的第一距离。

上述用户视口的顶部与上述用户视口当前展示的第一个数据对应，即上述用户视口的顶部当前对应的第一个dom元素。例如，如图2所示，用户视口当前展示的目标数据为dom元素1至dom元素6中各个dom元素对应的数据，其中，dom元素1对应的数据为用户视口当前展示的第一个数据。

上述滚动体的顶部与上述用户视口展示的第一个数据对应，也就是指在该页面的滚动过程中，该用户视口第一次显示的第一个滚动事件所请求的目标数据中的第一个数据。滚动体的高度(高度)为加载到用户视口的数据(包括目标数据)的高度之和(一个数据的高度指的是一个dom元素的高度，各个dom元素的高度相同)，即，滚动体的顶部对应用户视口展示的第一个数据，滚动体的底部对应用户视口展示的最后一个数据(该最后一个数据也有可能还未滚动出现在用户视口内)。例如，如图3所示，滚动体的顶部对应的用户视口展示的第一个数据，也就是缓存数据源中的第一个数据(索引为0的数据)，滚动体的底部所对应的用户视口展示的最后一个数据，即dom元素6，dom元素所对应的数据为缓存数据源中索引为9的数据。

A12、根据上述第一距离和上述dom元素的高度计算上述缓存数据源中上述目标数据的起始索引。

A13、根据上述起始索引和上述用户视口的最大显示量确定上述终止索引。

上述最大显示量为上述用户视口单次所能显示的最大dom元素个数。

具体地，由于滚动体的顶部对应于用户视口显示的第一个数据，即，滚动体的顶部对应于缓存数据源的顶部(索引为0的数据)，而滚动事件触发时滚动体滚动对应的滚动距离，即这个时候用户视口的顶部对应的是当前滚动事件的目标数据的第一个数据，因此，用户视口的顶部到滚动体顶部的第一距离即相当于缓存数据源中索引0到当前滚动事件的目标数据的第一个数据的距离，根据第一距离和dom元素的高度即可计算得到当前触发的滚动事件所请求得到目标数据的起始索引。而用户视口的最大显示量即相当于滚动事件一次请求的目标数据的数量，因此，根据起始索引和用户视口的最大显示量确定目标数据的最终索引。

其中，上述起始索引为：

Math.floor()是指对括号内的值向下取整，例如，Math.floor(4.7)＝4，scrolltop为第一距离，itemheight为dom元素的高度。

上述终止索引为：

endIndex＝starIndex+N

N为用户视口的最大显示量。

例如，如图4所示，用户视口的最大显示量为6，用户视口的顶部对应dom元素1(目标数据的第一个数据)，而滚动体的顶部对应缓存数据源的顶部(索引0的数据)，根据用户视口的顶部到滚动体的第一距离和dom元素的高度，计算得到起始索引为3，则终止索引为9，则目标数据为缓存数据源中索引3至索引9之间的数据(不包括索引9)。

本申请实施例中，由于滚动体的顶部与用户视口展示的第一个数据对应，即，滚动体的顶部对应于缓存数据源中的第一个数据(即缓存数据源的顶部)，而dom元素的高度等于数据的高度，因此，根据滚动体的顶部到用户视口的顶部和dom元素的高度，得到用户视口的顶部对应的数据，而用户视口的顶部用户视口当前展示的第一个数据(即目标数据的第一个数据)，因此，浏览器能够准确得到缓存数据源中目标数据的起始索引，从而从缓存数据源中获取滚动事件的目标数据进行展示。

在一些实施例中，在上述步骤A13之前，还包括：

根据上述用户视口的高度和上述dom元素的高度计算上述用户视口的最大显示量。

具体地，用户视口的最大显示量由用户视口的高度和dom元素的高度确定，用户视口的最大显示量N为：

其中，N为正整数，clientheight为上述用户视口的高度，itemheight为一个dom元素的高度(通常各个dom元素的高度均相等)，clientheight/itemheight余数为0时，i取值为1，clientheight/itemheight余数不为0时，i取值为2。

其中，为了提高用户视口的数据展示效果，若用户视口高度除以dom元素高度余数为零，表明用户视口的高度正好为dom元素高度的整数倍，如图5的左图所示，此时在计算最大显示量时取值1；若余数不为0，表明用户视口的高度不是dom元素高度的整数倍，如图5的右图所示，则此时i取值2，以便在滚动过程中用户视口内有对应的dom元素进行展示。

本申请实施例中，根据用户视口的高度和dom元素的高度确定用户视口的最大显示量，以确定浏览器获滚动事件的目标数据时应获取的数据量。

在一些实施例中，上述步骤A1还包括：

基于上述起始索引和上述dom元素的高度设置上空白占位。

基于上述滚动体的高度、上述终止索引和上述dom元素的高度设置下空白占位。

具体地，由于页面在滚动过程中，通过滚动体在滚动显示目标数据，而滚动体的顶部与用户视口展示的第一个数据对应，滚动体的高度等于加载到用户视口的数据的高度之和，但在平常的滚动事件中，滚动体中包括加载到页面显示的所有数据及其对应的dom元素，即，滚动体中所有的dom元素和数据都是一一对应、真实存在的，滚动条的位置会随着滚动行为上移或下移，而本申请实施例提供的数据加载方法中，在滚动过程中将目标数据填充到用户视口对应的各个dom元素中展示，滚动体中只有用户视口对应的dom元素及目标数据是真实存在的，其它的元素并不真实存在，即在用户视口对应的dom元素以外，已经向上滚动上去和向下滚动下去的dom元素及对应的数据并不存在，则正常的滚动行为会被破坏而不能实现正常的滚动，因此，为了实现正常滚动，根据起始索引和dom元素的高度确定滚动体中滚动体的顶部到起始索引对应的数据之间已滚动显示的数据所对应的长度，从而确定上空白占位，以通过上空白占表示滚动体中滚动体的顶部到起始索引之间已经滚动显示的数据，并根据滚动体的高度、目标数据的终止索引以及dom元素的高度确定滚动体中用户视口的最后一个dom元素到滚动体的底部还未滚动显示的数据所对应的长度，从而确定下空白占位。

例如，如图6所示，用户视口的最大显示量为6，即用户视口存在6个dom元素用于展示目标数据，在滚动体中，只有用户视口的6个dom元素及其对应的数据是真实存在的，滚动体中其它的部分没有真实存在的dom元素，以减少存储dom元素所占用的浏览器内存。但是由于滚动体中只有用户视口对应的dom元素真实存在，为了实现正常滚动，根据起始索引(即第一个dom元素)和dom元素的高度，确定第一个dom元素到滚动体的顶部的长度L1，设置长度为L1的上空白占位用于表示已经滚动上去的、用户视口显示的第一个数据到起始索引对应的数据之间的数据对应的长度。同时，根据滚动体的高度、终止索引和dom元素的高度确定用户视口的最后一个dom元素到滚动体的底部的长度L2，设置长度为L2的下空白占位，用于表示终止索引到滚动体的底部之间还未滚动显示的数据对应的长度。

本申请实施例中，由于滚动体中只有用户视口对应的各个dom元素及其数据是真实存在的，因此，为了实现页面的正常滚动，设置上空白占位表示滚动体中滚动体的顶部到起始索引之间已滚动显示的数据对应的长度，并设置下空白占位表示终止索引到滚动体的底部之间还未滚动显示的数据对应的长度，使得滚动体中不存在的dom元素及对应的数据具有对应的占位，以实现页面的正常滚动。

在一些实施例中，上述步骤S103还包括：

计算滚动条与上述滚动体的底部的第二距离，若上述第二距离小于预设的距离阈值，则获取指定数量的数据并将获取到的数据加入上述缓存数据源。

上述滚动条用于指示用户视口中目标数据的最后一个数据在滚动体中的位置信息，在滚动过程中，通常存在滚动条附在滚动体上，帮助用户观察数据或帮助浏览器确定当前数据在滚动体中的位置，用户在触发滚动事件时，滚动条会跟随滚动事件的触发位置发生相应的改变，例如，用户通过键盘上键触发页面向上滚动一定距离，滚动条会随着页面的滚动，根据用户视口中目标数据的最后一个数据(例如图6所示的dom元素6)到滚动体的底部的距离指示当前用户视口显示的目标数据的最后一个数据在滚动体中的位置信息。

具体地，浏览器从服务器批量获取页面数据存储到缓存数据源中对应的位置，并给各个数据设置对应的索引，在页面滚动过程中，浏览器持续监听滚动条距离滚动体的底部的第二距离，若第二距离小于预设的距离阈值，则从服务器获取指定数据的数据，并将新获取到的数据与当前的缓存数据源进行拼接，从缓存数据源底部插入新获取到的数据，再给新插入的数据设置对应的索引，以便浏览器后续获取目标数据。

可选地，在一些实际应用场景中，浏览器的内存足够时，浏览器也可以从服务器一次性获取全部数据(即全量数据)存储到缓存数据源中，不需要多次从服务器获取批量数据，减小浏览器获取批量数据的过程中网络不稳定带来的影响。

本申请实施例中，为了减少对于用户设备的内存资源的不必要的占用，在滚动过程中，若滚动条与滚动体底部的第二距离小于预设阈值，浏览器再获取指定数据的数据加入缓存数据源中，以减少浏览器内存占用。

在一些实施例中，上述数据加载方法还包括：

若上述第二时间与上述第一时间的时间间隔小于预设阈值时，若监听到新的上述滚动事件，等待至上述第二时间与上述第一时间的时间间隔大于或等于预设阈值，将上述第二时间作为新的上述第一时间。

可选地，由于用户在高频触发滚动事件时，浏览器在短时间内会监听到多个滚动事件，需要获取多个滚动事件所请求的目标数据并展示各个滚动事件的目标数据，因此，为了减少丢失部分滚动事件的目标数据的情况，提高数据加载效果，若在当前的滚动事件中，第二时间与第一时间的时间间隔小于预设阈值时，即浏览器还没有获取当前滚动事件所请求的目标数据，又监听到有新的滚动事件，则阻塞监听到的新的滚动事件，等待当前滚动事件的第二时间与第一时间的时间间隔大于或等于预设阈值时，浏览器获取当前滚动事件的目标数据并进行展示，同时将当前滚动事件的第二时间作为该新的滚动事件的第一时间，并获取该新的滚动事件的第一时间之后监听到的页面刷新的时间，确定该新的滚动事件的第二时间，以获取该新的滚动事件的目标数据并在用户视口进行展示。其中，若在当前的滚动事件中，第二时间与第一时间的时间间隔小于预设阈值时，浏览器监听到多个滚动事件，则阻塞各个滚动事件，以监听到各个滚动事件的次序依次重复确定滚动事件的第一时间和第二时间的步骤，在获取当前的滚动事件的目标数据时再确定监听到的该滚动事件的下一个滚动事件的第一时间。

本申请实施例中，由于用户高频触发滚动事件时，浏览器在短时间内会监听到多个滚动事件，因此，为了有序获取各个滚动事件的目标数据，减少目标数据丢失的情况，在获取当前滚动事件的目标数据后，按照监听到各个滚动事件的时间次序，依次获取各个滚动事件的目标数据进行展示，使浏览器能够获取各个滚动事件的目标数据并在用户视口进行展示。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

实施例二：

对应于上文实施例所述的数据加载方法，图7示出了本申请实施例提供的数据加载装置的结构框图，为了便于说明，仅示出了与本申请实施例相关的部分。

参照图7，该装置包括：第一时间获取模块71、第二时间获取模块72、数据展示模块73。其中，

第一时间获取模块71，用于确定第一时间，上述第一时间为监听到滚动事件时的时间；

第二时间获取模块72，用于确定第二时间，上述第二时间为在上述滚动事件后所监听到的页面刷新的时间；

数据展示模块73，用于若上述第二时间与上述第一时间的时间间隔大于或等于预设阈值，则获取目标数据并在用户视口展示上述目标数据，其中，上述目标数据为上述滚动事件所请求的待展示数据，上述用户视口为预先创建的高度固定的滚动容器。

本申请实施例中，根据监听到滚动事件时的时间确定第一时间，在监听到滚动事件后，根据监听到的页面刷新的时间确定第二时间，若上述第二时间与上述第一时间的时间间隔大于或等于预设的阈值，则获取目标数据，并在用户视口展示上述目标数据，其中，上述目标数据为上述滚动事件所请求的待展示数据，上述用户视口为预先创建的高度固定的滚动容器。由于定时器在用户最小化或隐藏页面时，仍在持续计时工作，耗费不必要的CPU资源，且定时器会存在发生随机值的延迟时间的情况，对数据加载效果产生一定的影响，因此，根据监听到的页面刷新的时间确定第二时间，不需要额外设置定时器，能够减少占用的CPU资源和提高数据加载的效果。由于在第二时间与第一时间的时间间隔大于或大于预设阈值时，才获取和展示上述目标数据，因此，在用户高频触发滚动事件时，浏览器不会因为高频次的滚动事件的数据请求而丢失部分滚动事件的目标数据。同时，在滚动过程中，浏览器只根据滚动事件的请求获取当前滚动事件所请求的待展示数据作为目标数据，在高度固定的用户视口展示目标数据，使得浏览器只需要将目标数据渲染到用户视口进行展示，减小了浏览器的渲染压力和存储压力，从而减少了页面卡顿的情况，进而提高数据加载效果。

在一些实施例中，上述数据展示模块73还包括：

索引确定单元，用于确定上述缓存数据源中上述目标数据的起始索引及终止索引；

目标数据获取单元，用于终止索引获取上述目标数据；

数据填充单元，用于将上述目标数据填充到上述用户视口中对应的各个dom元素中。

在一些实施例中，上述数据展示模块73还包括：

第一距离获取单元，用于获取上述用户视口的顶部到滚动体的顶部的第一距离。

起始索引计算单元，用于根据上述第一距离和上述dom元素的高度计算上述缓存数据源中上述目标数据的起始索引。

终止索引计算单元，用于根据上述起始索引和上述用户视口的最大显示量确定上述终止索引。

在一些实施例中，上述数据展示模块73还包括：

显示量计算单元，用于根据上述用户视口的高度和上述dom元素的高度计算上述用户视口的最大显示量。

在一些实施例中，上述数据展示模块73还包括：

上空白占位设置单元，用于基于上述起始索引和上述dom元素的高度设置上空白占位。

下空白占位设置单元，用于基于上述滚动体的高度、上述终止索引和上述dom元素的高度设置下空白占位。

在一些实施例中，上述数据展示模块73还包括：

第二距离计算单元，用于计算滚动条与上述滚动体的底部的第二距离，若上述第二距离小于预设的距离阈值，则获取指定数量的数据并将获取到的数据加入上述缓存数据源。

在一些实施例中，上述数据加载装置还包括：

循环模块，用于若上述第二时间与上述第一时间的时间间隔小于预设阈值时，若监听到新的上述滚动事件，等待至上述第二时间与上述第一时间的时间间隔大于或等于预设阈值，将上述第二时间作为新的上述第一时间。

需要说明的是，上述装置/单元之间的信息交互、执行过程等内容，由于与本申请方法实施例基于同一构思，其具体功能及带来的技术效果，具体可参见方法实施例部分，此处不再赘述。

实施例三：

图8为本申请一实施例提供的电子设备的结构示意图。如图8所示，该实施例的电子设备8包括：至少一个处理器80(图8中仅示出一个处理器)、存储器81以及存储在所述存储器81中并可在所述至少一个处理器80上运行的计算机程序82，所述处理器80执行所述计算机程序82时实现上述任意各个方法实施例中的步骤。

示例性的，上述计算机程序82可以被分割成一个或多个模块/单元，上述一个或者多个模块/单元被存储在上述存储器81中，并由上述处理器80执行，以完成本申请。上述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述上述计算机程序82在上述电子设备8中的执行过程。例如，上述计算机程序82可以被分割成第一时间获取模块71、第二时间获取模块72、数据展示模块73，各模块之间具体功能如下：

第一时间获取模块71，用于确定第一时间，上述第一时间为监听到滚动事件时的时间；

第二时间获取模块72，用于确定第二时间，上述第二时间为在上述滚动事件后所监听到的页面刷新的时间；

数据展示模块73，用于若上述第二时间与上述第一时间的时间间隔大于或等于预设阈值，则获取目标数据并在用户视口展示上述目标数据，其中，上述目标数据为上述滚动事件所请求的待展示数据，上述用户视口为预先创建的高度固定的滚动容器。

所述电子设备8可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。该电子设备可包括，但不仅限于，处理器80、存储器81。本领域技术人员可以理解，图8仅仅是电子设备8的举例，并不构成对电子设备8的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如还可以包括输入输出设备、网络接入设备等。

所称处理器80可以是中央处理单元(Central Processing Unit，CPU)，该处理器80还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器81在一些实施例中可以是所述电子设备8的内部存储单元，例如电子设备8的硬盘或内存。所述存储器81在另一些实施例中也可以是所述电子设备8的外部存储设备，例如所述电子设备8上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器81还可以既包括所述电子设备8的内部存储单元也包括外部存储设备。所述存储器81用于存储操作系统、应用程序、引导装载程序(BootLoader)、数据以及其他程序等，例如所述计算机程序的程序代码等。所述存储器81还可以用于暂时地存储已经输出或者将要输出的数据。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

本申请实施例还提供了一种网络设备，该网络设备包括：至少一个处理器、存储器以及存储在所述存储器中并可在所述至少一个处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述任意各个方法实施例中的步骤。

本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现可实现上述各个方法实施例中的步骤。

本申请实施例提供了一种计算机程序产品，当计算机程序产品在电子设备上运行时，使得电子设备执行时实现可实现上述各个方法实施例中的步骤。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实现上述实施例方法中的全部或部分流程，可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质至少可以包括：能够将计算机程序代码携带到拍照装置/终端设备的任何实体或装置、记录介质、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，RandomAccess Memory)、电载波信号、电信信号以及软件分发介质。例如U盘、移动硬盘、磁碟或者光盘等。在某些司法管辖区，根据立法和专利实践，计算机可读介质不可以是电载波信号和电信信号。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

在本申请所提供的实施例中，应该理解到，所揭露的装置/网络设备和方法，可以通过其它的方式实现。例如，以上所描述的装置/网络设备实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

以上所述实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。

Claims (10)

1.一种数据加载方法，其特征在于，包括：

确定第一时间，所述第一时间为监听到滚动事件时的时间；

确定第二时间，所述第二时间为在所述滚动事件后所监听到的页面刷新的时间；

若所述第二时间与所述第一时间的时间间隔大于或等于预设阈值，则获取目标数据并在用户视口展示所述目标数据，其中，所述目标数据为所述滚动事件所请求的待展示数据，所述用户视口为预先创建的高度固定的滚动容器。

2.如权利要求1所述的数据加载方法，其特征在于，所述目标数据缓存在缓存数据源中，所述获取目标数据并在用户视口展示所述目标数据，包括：

确定所述缓存数据源中所述目标数据的起始索引及终止索引；

基于所述起始索引及所述终止索引获取所述目标数据；

将所述目标数据填充到所述用户视口中对应的各个dom元素中。

3.如权利要求2所述的数据加载方法，其特征在于，所述确定所述缓存数据源中所述目标数据的起始索引及终止索引，包括：

获取所述用户视口的顶部到滚动体的顶部的第一距离，所述滚动体包括在所述用户视口展示的目标数据，所述用户视口的顶部与所述用户视口当前展示的第一个数据对应，所述滚动体的顶部与所述用户视口展示的第一个数据对应；

根据所述第一距离和所述dom元素的高度计算所述缓存数据源中所述目标数据的起始索引；

根据所述起始索引和所述用户视口的最大显示量确定所述终止索引，所述最大显示量为所述用户视口单次所能显示的最大dom元素个数。

4.如权利要求3所述的数据加载方法，其特征在于，在所述根据所述起始索引和所述用户视口的最大显示量确定所述终止索引之前，还包括：

根据所述用户视口的高度和所述dom元素的高度计算所述用户视口的最大显示量。

5.如权利要求3所述的数据加载方法，其特征在于，还包括：

基于所述起始索引和所述dom元素的高度设置上空白占位，所述上空白占位用于表示所述滚动体中所述滚动体的顶部到所述起始索引之间已滚动显示的数据对应的长度；

基于所述滚动体的高度、所述终止索引和所述dom元素的高度设置下空白占位，所述下空白占位用于表示所述滚动体中所述终止索引到所述滚动体的底部之间还未滚动显示的数据对应的长度。

6.如权利要求3至5任一项所述的数据加载方法，其特征在于，所述数据加载方法还包括：

若第二时间与所述第一时间的时间间隔大于或等于所述预设阈值，则计算滚动条与所述滚动体的底部的第二距离，若所述第二距离小于预设的距离阈值，则获取指定数量的数据并将获取到的数据加入所述缓存数据源，所述滚动条用于指示所述用户视口中目标数据的最后一个数据在所述滚动体中的位置信息。

7.如权利要求1所述的数据加载方法，其特征在于，还包括：

若所述第二时间与所述第一时间的时间间隔小于所述预设阈值，且监听到新的所述滚动事件，则等待至所述第二时间与所述第一时间的时间间隔大于或等于所述预设阈值，并将所述第二时间作为新的所述第一时间。

8.一种数据加载装置，其特征在于，包括：

第一时间获取模块，用于确定第一时间，所述第一时间为监听到滚动事件时的时间；

第二时间获取模块，用于确定第二时间，所述第二时间为在所述滚动事件后所监听到的页面刷新的时间；

数据展示模块，用于若所述第二时间与所述第一时间的时间间隔大于或等于预设阈值，则获取目标数据并在用户视口展示所述目标数据，其中，所述目标数据为所述滚动事件所请求的待展示数据，所述用户视口为预先创建的高度固定的滚动容器。

9.一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述的方法。

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

Images