巨量数据滚动展示方法、装置及电子设备与流程

1.本发明涉及计算机领域，尤其涉及一种浏览器端面对巨量数据滚动展示提 升性能的方法。


背景技术：

2.浏览器安装在用户的电脑上，当访问某个url时，或获取对应的html页面， 通过浏览器的渲染引擎将页面渲染出来，html文本被解析为了dom树。客户端 每个tab承载的dom是有限度的，内容过多，过量的dom元素，会导致浏览器 的卡顿甚至崩溃。在上述情况存在下，当页面中出现需要展示大量类似列表， 卡片等信息的时候，一般我们会通过分页的方式去做。即100w条的数据需要展 示的情况下，不会一下全部展示出来，而是每次展示若干条(比如10条)，通 过交互(点击“加载更多或滚动到底部触发事件，不断的从服务端获取新的数 据展示)。这是当前的通用处理方式，它适用于一般的场景中，但是存在一些问 题：
3.1、需要不断的触发事件，获取更多的数据，无法通过拖拽滚动条直接看到 靠后的数据。
4.2、新数据的不断加载，dom也在不断增加，当加载到一定限度的时候任然 会出现浏览器卡顿问题。
5.故，急需一种可解决上述问题的数据展示方法和装置。


技术实现要素：

6.本发明的目的是提供一种巨量数据滚动展示方法、装置、电子设备及计算 机可读存储介质，可以在滚动触发时，依据滚动的偏差量获取相应位置后面的 数据进行渲染，不但可以直接滚动到需要的数据处，而且能够轻松的加载巨量 数据，而不会增加浏览器的dom负担。
7.为了实现上述目的，本发明公开了一种巨量数据滚动展示方法，包括以下 步骤：获取所有数据信息；渲染数据并展示在所述展示区域；接收外部的滚动 触发信号，依据所述滚动触发信号计算滚动偏移量；依据滚动偏移量和每条数 据展示需要的高度确定滚动的数据条数目m；获取并渲染当前第m条开始的数据， 并展示在所述展示区域。
8.较佳地，所述展示方法还包括步骤：获得所述展示区域的高度ch(clientheight)，获得展示所有内容的高度sh(scroll height)，在所述高度ch小于所述高 度sh时设置滚动监听事件，以接收外部的滚动触发信号。
9.更佳者，在所述高度ch小于所述高度sh时还显示滚动条，便于指示用户 当前滚动位置和滚动幅度。
10.具体地，“获得展示所有内容的高度sh”具体为：获得每条数据展示需要 的高度，依据每条数据展示需要的高度计算所有内容的高度sh；所述展示方法 还包括步骤：依据所述高度ch和每条数据展示需要的高度确认所述展示区域展 示数据的最多条数目n。
11.较佳地，“渲染数据并展示在所述展示区域”具体为：渲染所有数据信息中 起始的
n条数据展示在所述展示区域；“获取并渲染当前第m条开始的数据”具 体为：获取并渲染当前第m条开始的n条数据；其中，n是依据所述展示区域的 高度ch、每条数据展示需要的高度sh计算得到的展示区域展示数据的最大数目。
12.本发明还公开了一种巨量数据滚动展示装置，包括：第一获取模块，获取 所有数据信息，并将数据推送至渲染单元进行渲染；渲染单元，渲染数据并展 示在所述展示区域；监听单元，接收外部的滚动触发信号；计算单元，依据所 述滚动触发信号计算滚动偏移量，依据滚动偏移量和每条数据展示需要的高度 确定滚动的数据条数目m；第二获取单元，获取当前第m条开始的数据，并推送 至所述渲染单元进行渲染。
13.较佳地，所述巨量数据滚动展示装置还包括预处理单元：获得所述展示区 域的高度ch(client height)，获得展示所有内容的高度sh(scroll height)，在所述 高度ch小于所述高度sh时启动所述监听单元。
14.更佳者，所述预处理单元在所述高度ch小于所述高度sh时还显示滚动条。
15.较佳地，所述预处理单元获得每条数据展示需要的高度，依据所述展示区 域的高度ch和每条数据展示需要的高度确认所述展示区域展示数据的最多条数 目n，依据每条数据展示需要的高度计算所有内容的高度sh。
16.具体地，所述第一获取模块将所有数据信息中的起始n条数据推送至所述 渲染单元进行渲染；所述第二获取单元将当前第m条开始的n条数据推送至所 述渲染单元进行渲染；其中，n是依据所述展示区域的高度ch、每条数据展示 需要的高度sh计算得到的展示区域展示数据的最大数目。
17.本发明还公开了一种电子设备，包括一个或多个处理器；存储器；以及一 个或多个程序，其中所述一个或多个程序被存储在所述存储器中，并且被配置 成由一个或多个处理器执行，所述程序包括用于执行如上所述的巨量数据滚动 展示方法的指令。
18.本发明还公开了一种计算机可读存储介质，包括与具有存储器的电子设备 结合使用的计算机程序，所述计算机程序可被处理器执行以如上所述的巨量数 据滚动展示方法。
19.与现有技术相比，本发明可在接收到滚动触发信号时计算滚动偏移量，并 直接提取滚动到位置的信息，以该信息为起始进行数据渲染展示，不但可以直 接滚动到需要的数据处包括直接滚动到底部获取最后面数据)，而且能够轻松的 加载巨量数据，而不会增加浏览器的dom负担。
附图说明
20.图1是本发明第一实施例中巨量数据滚动展示方法的流程图。
21.图2是本发明第二实施例中巨量数据滚动展示方法的流程图。图3是基于第二实施例的一优选实施例中巨量数据滚动展示方法的部分流 程图。图4是本发明巨量数据滚动展示装置的结构框图。图5是本发明一电子设备的结构框图。
具体实施方式
22.为详细说明本发明的技术内容、构造特征、所实现目的及效果，以下结合 实施方
式并配合附图详予说明。
23.参考图1，本发明公开了一种巨量数据滚动展示方法100，包括以下步骤： s11获取所有数据信息；s12渲染数据并展示在所述展示区域；设置dom scroll 监听事件，s13接收外部的滚动触发信号。s14依据所述滚动触发信号计算滚动 偏移量，依据滚动偏移量和每条数据展示需要的高度确定滚动的数据条数目m。 s15获取并渲染当前第m条开始的数据，并展示在所述展示区域。
24.该滚动偏移量为偏移的高度数值，例如偏移h1个像素，每条数据的高度为 h2，那么m等于h1/h2的整数(四舍五入的整数)。具体滚动偏移量的计算和设 定不限于该实施例，滚动偏移量的确认和计算已为本领域技术人员所公知，在 此不予详述。
25.其中，每条数据展示需要的高度是系统预先设置好的数据(例如默认设置)， 或者是获取的数据信息中自带的设置数据。当然，每条数据展示需要的高度也 可以是通过所有数据展示高度和数据条数计算出来的数据。
26.参考图2，区别于第一实施例，在第二实施例中，步骤s11之后还包括步骤： s21获得所述展示区域的高度ch(client height)，s22获得展示所有内容的高度 sh(scroll height)，s23在所述高度ch小于所述高度sh时设置滚动监听事件，以 执行步骤s13接收外部的滚动触发信号。
27.其中，s23在所述高度ch小于所述高度sh时还显示滚动条，便于指示用户 当前滚动位置和滚动幅度。
28.其中，所述展示区域的高度ch(client height)是直接从系统获取的，也可以 实时监控，在用户设置或者调节后及时获取更新后的高度ch(client height)，并 调整显示画面和滚动条位置。
29.参考图3，步骤s22具体为：s221获得每条数据展示需要的高度，s222依 据每条数据展示需要的高度计算所有内容的高度sh。所述展示方法还包括步骤： s24依据所述高度ch和每条数据展示需要的高度确认所述展示区域展示数据的 最多条数目n。
30.步骤s12具体为：渲染所有数据信息中起始的n条数据展示在所述展示区 域。
31.本发明主要用于巨量数据的展示，当数据信息较小，在所述高度ch大于等 于所述高度sh时，步骤12直接渲染所有数据信息并展示在展示区域即可。然 后持续比较当前的高度ch和高度sh即可。
32.步骤s15具体为：获取并渲染当前第m条开始的n条数据。当滚动触发信 号直接将数据拉动至尾部，使得第m条到最后一条直接的数据数目小于等于n 时，步骤s15获取并渲染当前第m条开始到最后的数据信息，并在下一步骤中 推送渲染并展示在展示区域。
33.其中，出现滚动条后，开始监听滚动条的滚动事件(设置dom scroll监听 事件)，当鼠标或者拖拽滚动条时，可以触发滚动事件，计算滚动的偏移量scrolltop，根据scroll top，计算滚动了多少个数据高度。比如，在当前展示区域高 度下，展示区域只能展示20条数据，当滚动事件滚动了数据30个数据高度的 偏移量时，系统从内存中读取当前第30条数据开始的20条数据(第30－50条)， 进行推送和渲染。
34.参考图4，本发明还公开了一种巨量数据滚动展示装置300，包括：第一获 取模块31，获取所有数据信息，并将数据推送至渲染单元进行渲染；渲染单元 32，渲染数据并展示在所述展示区域；监听单元33，接收外部的滚动触发信号； 计算单元34，依据所述滚动触发
信号计算滚动偏移量，依据滚动偏移量和每条 数据展示需要的高度确定滚动的数据条数目m；第二获取单元35，获取当前第m 条开始的数据，并推送至所述渲染单元进行渲染。
35.其中，每条数据展示需要的高度是预先设置好的数据(例如默认设置)。该 滚动偏移量为偏移的高度数值，例如偏移h1个像素，每条数据的高度为h2，那 么m等于h1/h2的整数(四舍五入的整数)。具体滚动偏移量的计算和设定不限 于该实施例，滚动偏移量的确认和计算已为本领域技术人员所公知，在此不予 详述。
36.较佳者，参考图4，巨量数据滚动展示装置还包括预处理单元36：获得所 述展示区域的高度ch(client height)，获得展示所有内容的高度sh(scroll height)， 在所述高度ch小于所述高度sh时启动所述监听单元33。其中，预处理单元36 还在所述高度ch小于所述高度sh时显示滚动条。当然，也可以在渲染单元32 渲染数据并展示在显示区域后启动监听单元33。
37.其中，所述预处理单元36获得每条数据展示需要的高度，依据所述展示区 域的高度ch和每条数据展示需要的高度确认所述展示区域展示数据的最多条数 目n，依据每条数据展示需要的高度计算所有内容的高度sh(scroll height)。
38.具体地，所述第一获取模块31将所有数据信息中的起始n条数据推送至所 述渲染单元进行渲染；所述第二获取单元35将当前第m条开始的n条数据推送 至所述渲染单元进行渲染；其中，n是依据所述展示区域的高度ch、每条数据 展示需要的高度sh计算得到的展示区域展示数据的最大数目。
39.本发明主要用于巨量数据的展示，在所述高度ch大于等于所述高度sh时， 第一获取模块31将所有数据信息推送至渲染单元32，以使渲染单元32直接渲 染所有数据信息并展示在展示区域即可。
40.当滚动触发信号直接将数据拉动至尾部，使得第m条到最后一条直接的数 据数目小于等于n时，所述第二获取单元35获取当前第m条开始到最后的数据 信息推送至渲染单元32，以使渲染单元32渲染并展示在展示区域。
41.参考图5，本发明还公开了一种电子设备400，包括一个或多个处理器41； 存储器42；以及一个或多个程序43，其中所述一个或多个程序43被存储在所 述存储器42中，并且被配置成由一个或多个处理器41执行，所述程序43包括 用于执行如上所述的巨量数据滚动展示方法100的指令。
42.本发明还公开了一种计算机可读存储介质，包括与具有存储器的电子设备 结合使用的计算机程序，所述计算机程序可被处理器执行以如上所述的巨量数 据滚动展示方法。
43.本技术实施例还公开了一种计算机程序产品或计算机程序，该计算机程序 产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质 中。电子设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行 该计算机指令，使得该电子设备执行上述巨量数据滚动展示方法。
44.以上所揭露的仅为本发明的优选实施例而已，当然不能以此来限定本发明 之权利范围，因此依本发明申请专利范围所作的等同变化，仍属本发明所涵盖 的范围。