CN117111799A - 数据展示方法及装置、存储介质及电子设备 - Google Patents
数据展示方法及装置、存储介质及电子设备 Download PDFInfo
- Publication number
- CN117111799A CN117111799A CN202210540878.9A CN202210540878A CN117111799A CN 117111799 A CN117111799 A CN 117111799A CN 202210540878 A CN202210540878 A CN 202210540878A CN 117111799 A CN117111799 A CN 117111799A
- Authority
- CN
- China
- Prior art keywords
- data
- displayed
- content
- rendered content
- rendered
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 72
- 238000005096 rolling process Methods 0.000 claims abstract description 42
- 238000009877 rendering Methods 0.000 claims abstract description 40
- 230000000007 visual effect Effects 0.000 claims abstract description 26
- 238000012544 monitoring process Methods 0.000 claims abstract description 10
- 230000009471 action Effects 0.000 claims description 10
- 230000008859 change Effects 0.000 claims description 4
- 238000004590 computer program Methods 0.000 claims description 2
- 230000004044 response Effects 0.000 abstract description 17
- 230000006399 behavior Effects 0.000 description 31
- 238000010586 diagram Methods 0.000 description 15
- 230000000694 effects Effects 0.000 description 11
- 230000006870 function Effects 0.000 description 7
- 230000008569 process Effects 0.000 description 6
- 238000004891 communication Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000006978 adaptation Effects 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 2
- 239000013307 optical fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 238000004064 recycling Methods 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000003190 augmentative effect Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000002708 enhancing effect Effects 0.000 description 1
- 230000007613 environmental effect Effects 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 239000004984 smart glass Substances 0.000 description 1
- 230000002123 temporal effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本公开提供了一种数据展示方法、装置、电子设备及存储介质,涉及计算机技术领域。该方法包括:监听可视区域中的滚动行为,可视区域用于展示获取到的原始数据;检测滚动行为产生的滚动变化量,以基于滚动变化量确定原始数据中的待展示数据;渲染待展示数据以生成渲染后内容,进而将渲染后内容中的各项数据展示在可视区域中。该方法可以基于检测到的滚动行为从原始数据中确定出适应于可视区域的待展示数据,只渲染待展示数据,将待展示数据按需加载,从而达到较好的渲染性能,实现较快的展示响应。
Description
技术领域
本公开涉及计算机技术领域,尤其涉及一种数据展示方法及装置、存储介质及电子设备。
背景技术
在长列表的展示方式中,若直接渲染长列表中的全部数据进行展示,会由于浏览器的JS引擎耗费长时间在渲染处理上而导致展示响应速度缓慢。相关技术中通常采用懒加载/预加载技术,或者使用时间分片的处理方式对长列表进行渲染。
其中,懒加载与预加载偏向于网络请求,加载速度取决于后台响应请求的速度,且当请求增多,页面渲染就会越复杂,页面上的dom节点会不断累加而导致页面越用越卡的现象出现。使用时间分片的处理方式对长列表进行渲染,更适用于列表项的DOM结构十分简单的情况,对于结构较复杂的数据则加载缓慢。
需要说明的是,在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解,因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。
发明内容
本公开的目的在于提供一种数据展示方法、装置、电子设备及存储介质,以解决长列表加载缓慢、展示响应慢的问题。
本公开的其他特性和优点将通过下面的详细描述变得显然,或部分地通过本公开的实践而习得。
根据本公开的一个方面,提供一种数据展示方法,包括:监听可视区域中的滚动行为,可视区域用于展示获取到的原始数据;检测滚动行为产生的滚动变化量,以基于滚动变化量确定原始数据中的待展示数据;渲染待展示数据以生成渲染后内容,进而将渲染后内容中的各项数据展示在可视区域中。
在本公开一个实施例中,在监听可视区域中的滚动行为之前,还包括:计算原始数据的占位内容高度;确定原始数据中适应于可视区域的前N项数据,以作为初始待展示数据;渲染初始待展示数据以生成初始渲染后内容,进而将初始渲染后内容中的N项数据展示在可视区域中,以及,存储初始渲染后内容,并记录初始渲染后内容中的各项数据在占位内容高度中的位置。
在本公开一个实施例中,在将渲染后内容中的各项数据展示在可视区域中之后,还包括:缓存渲染后内容,并记录渲染后内容中的各项数据在占位内容高度中的位置。
在本公开一个实施例中,检测滚动行为产生的滚动变化量,包括:在滚动行为发生时,确定可视区域中顶部数据项在占位内容高度中的位置;在滚动行为中基于预设频率获取顶部数据项在占位内容高度中的偏移值;以偏移值作为滚动变化量。
在本公开一个实施例中,基于滚动变化量确定原始数据中的待展示数据,包括:确定顶部数据项在占位内容高度中偏移后的位置对应的数据项,以作为待展示的首项数据;基于首项数据确定适应于可视区域的M项数据,以M项数据作为待展示数据。
在本公开一个实施例中,在渲染待展示数据以生成渲染后内容之前,还包括:判断待展示数据对应的渲染后内容中的各项数据是否被缓存;若是,则从缓存中查找待展示数据对应的渲染后内容中的各项数据。
在本公开一个实施例中,将渲染后内容中的各项数据展示在可视区域中,包括:根据滚动变化量,将渲染后内容移动至可视区域中,以进行展示。
根据本公开的另一个方面,提供一种数据展示装置,包括:
监听模块,用于监听可视区域中的滚动行为,可视区域用于展示获取到的原始数据;确定模块,用于检测滚动行为产生的滚动变化量,以基于滚动变化量确定原始数据中的待展示数据;展示模块,用于渲染待展示数据以生成渲染后内容,进而将渲染后内容中的各项数据展示在可视区域中。
在本公开一个实施例中,在监听模块监听可视区域中的滚动行为之前,还包括:计算原始数据的占位内容高度;确定原始数据中适应于可视区域的前N项数据,以作为初始待展示数据;渲染初始待展示数据以生成初始渲染后内容,进而将初始渲染后内容中的N项数据展示在可视区域中,以及,存储初始渲染后内容,并记录初始渲染后内容中的各项数据在占位内容高度中的位置。
在本公开一个实施例中,展示模块在将渲染后内容中的各项数据展示在可视区域中之后,还用于:缓存渲染后内容,并记录渲染后内容中的各项数据在占位内容高度中的位置。
在本公开一个实施例中,确定模块检测滚动行为产生的滚动变化量,包括:在滚动行为发生时,确定可视区域中顶部数据项在占位内容高度中的位置;在滚动行为中基于预设频率获取顶部数据项在占位内容高度中的偏移值;以偏移值作为滚动变化量。
在本公开一个实施例中,确定模块基于滚动变化量确定原始数据中的待展示数据,包括:确定顶部数据项在占位内容高度中偏移后的位置对应的数据项,以作为待展示的首项数据;基于首项数据确定适应于可视区域的M项数据,以M项数据作为待展示数据。
在本公开一个实施例中,在展示模块渲染待展示数据以生成渲染后内容之前,还包括:判断待展示数据对应的渲染后内容中的各项数据是否被缓存;若是,则从缓存中查找待展示数据对应的渲染后内容中的各项数据。
在本公开一个实施例中,展示模块将渲染后内容中的各项数据展示在可视区域中,包括:根据滚动变化量,将渲染后内容移动至可视区域中,以进行展示。
根据本公开的又一个方面,提供一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现上述的数据展示方法。
根据本公开的再一个方面,提供一种电子设备,包括:处理器;以及存储器,用于存储所述处理器的可执行指令;其中,所述处理器配置为经由执行所述可执行指令来执行上述的数据展示方法。
本公开的实施例所提供的数据展示方法,能够基于检测到的滚动行为从原始数据中确定出适应于可视区域的待展示数据,只渲染待展示数据,将待展示数据按需加载,从而达到较好的渲染性能,实现较快的展示响应。
进一步,本公开实施例提供的数据展示方法还可以缓存已渲染过的数据,当确认需要展示的数据已缓存,则可以直接从缓存中获取渲染后内容进行展示,进一步提升展示响应速度,优化展示性能。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本公开的实施例,并与说明书一起用于解释本公开的原理。显而易见地,下面描述中的附图仅仅是本公开的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1示出了可以应用本公开实施例的数据展示方法的示例性系统架构的示意图;
图2示出了本公开一个实施例的数据展示方法的流程图;
图3示出了本公开一个实施例的数据展示场景的示意图;
图4示出了本公开一个实施例的数据展示方法中确定待展示数据的流程图;
图5示出了本公开一个实施例的数据展示方法中确定出待展示数据的示意图;
图6示出了本公开一个实施例的数据展示方法中确定出待展示数据的示意图;
图7示出了本公开一个实施例的数据展示方法的示意图;
图8示出了本公开一个实施例的数据展示装置的框图;和
图9示出了本公开实施例中一种数据展示计算机设备的结构框图。
具体实施方式
现在将参考附图更全面地描述示例实施方式。然而,示例实施方式能够以多种形式实施,且不应被理解为限于在此阐述的范例;相反,提供这些实施方式使得本公开将更加全面和完整,并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。
此外,附图仅为本公开的示意性图解,并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分,因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体,不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体,或在一个或多个硬件模块或集成电路中实现这些功能实体,或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
此外,术语“第一”、“第二”仅用于描述目的,而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此,限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本公开的描述中,“多个”的含义是至少两个,例如两个,三个等,除非另有明确具体的限定。
针对上述相关技术中存在的技术问题,本公开实施例提供了一种数据展示方法,以用于至少解决上述技术问题中的一个或者全部。
图1示出了可以应用本公开实施例的数据展示方法的示例性系统架构的示意图;如图1所示:
该系统架构可以包括服务器101、网络102和客户端103。网络102用以在客户端103和服务器101之间提供通信链路的介质。网络102可以包括各种连接类型,例如有线、无线通信链路或者光纤电缆等等。
服务器101可以是提供各种服务的服务器,例如对用户利用客户端103所进行滑动操作进行监控并提供相应数据展示响应的后台管理服务器。后台管理服务器可以基于接收到的用户操作确定出待展示数据,并渲染待展示数据生成渲染后内容,并将渲染后内容反馈给客户端103以在客户端103中窗口的可视区域进行展示。
客户端103可以是手机、游戏主机、平板电脑、电子书阅读器、智能眼镜、智能家居设备、AR(Augmented Reality,增强现实)设备、VR(Virtual Reality,虚拟现实)设备等移动终端,或者,客户端103也可以是个人计算机,比如膝上型便携计算机和台式计算机等等。
在一些可选的实施例中,服务器101可以在接收到原始数据后,先基于可视区域的大小对原始数据中的前几项数据进行渲染,并将生成的前几项数据的渲染后内容返回至客户端103,以在客户端103中窗口的可视区域进行展示,以达到快速响应展示的效果;客户端103还可以在可视区域中接受用户的滑动操作(如触控滑动操作或通过鼠标点击滑动产生的滑动操作),并由客户端103将滑动操作发送至服务器101,以使服务器101结合原始数据和可视区域解析滑动操作,确定出待展示数据,进而可以只渲染待展示数据生成渲染后内容,再将渲染后内容返回至客户端103以在可视区域中进行展示,通过将确定出的待展示数据按需渲染的方式,达到较好的渲染性能,实现较快的展示响应。
服务器101还可以缓存已渲染过的数据,当确认需要展示的数据已缓存,则可以直接从缓存中获取渲染后内容返回至客户端103,进而可以更快地将待展示内容在客户端103的可视区域中展示,进一步提升展示响应速度,优化展示性能。
在示例性实施例中,服务器101用于实现数据展示方法的过程可以是:服务器101监听可视区域中的滚动行为,所述可视区域用于展示获取到的原始数据;服务器101检测所述滚动行为产生的滚动变化量,以基于所述滚动变化量确定所述原始数据中的待展示数据;服务器101渲染所述待展示数据以生成渲染后内容,进而将所述渲染后内容中的各项数据展示在所述可视区域中。
应该理解,图1中的客户端、网络和服务器的数目仅仅是示意性的,服务器101可以是一个实体的服务器,还可以为多个服务器组成的服务器集群,还可以是云端服务器,根据实际需要,可以具有任意数目的客户端、网络和服务器。
下面,将结合附图及实施例对本公开示例实施例中的数据展示方法的各个步骤进行更详细的说明。
图2示出了本公开一个实施例的数据展示方法的流程图。本公开实施例提供的方法可以由如图1所示的服务器或客户端中执行,但本公开并不限定于此。
在下面的举例说明中,以服务器集群101为执行主体进行示例说明。
如图2所示,本公开实施例提供的数据展示方法可以包括以下步骤:
步骤S201,监听可视区域中的滚动行为,可视区域用于展示获取到的原始数据。可视区域可以是前端应用的可视化窗口中用于展示内容的区域,如浏览器窗口的可视区域,如用户在交易系统中查看交易列表时用于展示交易列表的区域。滚动行为(也可称为滚动事件)可以是使可视区域中的内容产生滚动效果的行为,可以由计算机设备监听获得;滚动行为可以与用户对可视区域中的内容做出的滑动操作相对应,滑动操作可以是触控滑动操作或通过鼠标点击滑动产生的滑动操作等。
步骤S203,检测滚动行为产生的滚动变化量,以基于滚动变化量确定原始数据中的待展示数据。在用户滚动滑轮或者滑动屏幕时,可以基于预设频率获取滚动行为产生的滚动变化量,根据滚动变化量确定需要渲染的待展示数据以在后续步骤中实现展示。
步骤S205,渲染待展示数据以生成渲染后内容,进而将渲染后内容中的各项数据展示在可视区域中。当“确定待展示数据并渲染”的时间跨度足够小时,可以使展示效果看起来与先全部渲染再滚动展示的效果相似。该时间跨度也可以基于环境性能进行调整,可以在不影响用户体验的前提下降低预设频率以提升渲染计算的资源消耗。
通过本申请中的方法,在服务器获取到前端应用请求的所有原始数据后,可以先不对全部原始数据进行加载,而是根据可视区域的大小以及监听到的滚动行为确定出待展示数据,再只渲染待展示数据进行展示,能够达到较好的渲染性能,实现较快的展示响应,提升用户体验。
在一些实施例中,在监听可视区域中的滚动行为之前,还包括:计算原始数据的占位内容高度;确定原始数据中适应于可视区域的前N项数据,以作为初始待展示数据;渲染初始待展示数据以生成初始渲染后内容,进而将初始渲染后内容中的N项数据展示在可视区域中,以及,存储初始渲染后内容,并记录初始渲染后内容中的各项数据在占位内容高度中的位置。
占位内容高度可以看做是将所有数据项的高度累加形成的,占位内容可以看做是与原始数据对应的完整的可滚动条;当用户在可视区域中进行滑动操作时,可以将该动作看做对可滚动条进行滑动。可以从获取到的初始数据的样式属性中得到各项数据的高度,各项数据的高度可以相同也可以不同;可以结合可视区域的区域高度计算出展示项数。
如:当获取到的原始数据为1万条记录(即数据项/列表项),可视区域的高度为500px,若每一数据项的高度为50px,则用户在可视区域中最多只能看到10条记录,那么在首次渲染时,只需对原始数据的前10条记录进行渲染即可。这10条记录在加载完后还可以进行缓存,并在占位内容中的相应位置标记这些数据已被缓存,以供在下次需要展示时直接获取。
在一些实施例中,在将渲染后内容中的各项数据展示在可视区域中之后,还包括:缓存渲染后内容,并记录渲染后内容中的各项数据在占位内容高度中的位置。类似地,在原始数据中的任何待展示数据被渲染完成后,都可以缓存渲染后的样式内容,并在占位内容中的相应位置标记这些数据已被缓存,以供在下次需要展示时直接获取,进而可以进一步提升展示响应速度,优化展示性能。
图3示出了本公开一个实施例的数据展示场景的示意图,如图3所示,各项数据的高度为50px,共有6条数据项,故可以计算出占位内容高度为300px;还可以获取到可视区域的区域高度为150px,当滑动操作停止后计算出待展示数据为占位内容中索引为1~4的数据项后,可以只渲染索引为1~4的数据项,以在可视区域内展示。
在一些实施例中,检测滚动行为产生的滚动变化量,包括:在滚动行为发生时,确定可视区域中顶部数据项在占位内容高度中的位置;在滚动行为中基于预设频率获取顶部数据项在占位内容高度中的偏移值;以偏移值作为滚动变化量。
当获取顶部数据项在占位内容高度中的偏移值的预设频率较高时,可以使展示效果看起来与先全部渲染再滚动展示的效果相似。预设频率也可以根据实际情况进行调整,可以在不影响用户体验的前提下降低预设频率以提升渲染计算的资源消耗。可以利用JS中的方法函数来确定滚动变化量,如JS中的scrollTop()方法函数、offset()方法函数、position()方法函数等。其中,scrollTop()方法可以返回或设置匹配元素的滚动条的垂直位置,offset()方法可以返回或设置匹配元素相对于文档的偏移(位置),position()方法可以返回匹配元素相对父元素的偏移。
在一些实施例中,基于滚动变化量确定原始数据中的待展示数据,包括:确定顶部数据项在占位内容高度中偏移后的位置对应的数据项,以作为待展示的首项数据;基于首项数据确定适应于可视区域的M项数据,以M项数据作为待展示数据。
以下举例说明:当监听到滚动行为发生时的顶部数据项为5号数据,各项数据高位为30px,向上滑动操作产生的滚动变化量为300px,则可以计算出滚动导致了10条数据的上移,则可以将占位内容中第15条数据作为待展示数据中的第一条数据。若可视区域为150px,则可以计算出可视区域中可以同时展示5条数据,进而可以将第15条至第20条数据作为待展示数据,以在后续步骤中只渲染这5条数据进行展示。
图4示出了本公开一个实施例的数据展示方法中确定待展示数据的流程图,包括:
步骤S401,获取原始数据,计算原始数据的占位内容高度;
步骤S403,监听可视区域中的滚动行为,在滚动行为发生时,确定可视区域中顶部数据项在占位内容高度中的位置;
步骤S405,在滚动行为中基于预设频率获取顶部数据项在占位内容高度中的偏移值,以偏移值作为滚动变化量;
步骤S407,确定顶部数据项在占位内容高度中偏移后的位置对应的数据项,以作为待展示的首项数据;
步骤S409,基于首项数据确定适应于可视区域的M项数据,以M项数据作为待展示数据。
在一些实际应用中,由于用户硬件性能不同或者数据项的高度不固定,可以以大于可视区域高度的预估高度先行渲染,然后获取真实高度并缓存。即:在计算出待展示数据后,可以以预先设置好的比率调整将渲染的数据。如:当计算出待展示的数据为100条,可以以110%的比率计算出需要渲染110条,那么可以在待展示数据之前多渲染2条、在待展示数据之前多渲染3条,进而使得用户在少量滚动时可以偏移这些已渲染的数据项而不是重新渲染,以达到减少渲染次数、加快展示响应的效果。
图5示出了本公开一个实施例的数据展示方法中确定出待展示数据的示意图,如图5所示,可视区域中的第4至7条为原本计算出的待展示数据,经过调整后,可以在第4至7条之前多渲染2条、在第4至7条之后多渲染3条,进而使得用户在少量滚动时可以偏移这些已渲染的数据项而不是重新渲染,达到减少渲染次数、加快展示响应的效果。
图6示出了本公开一个实施例的数据展示方法中确定出待展示数据的示意图,如图6所示,601为可视区域大小,603为占位内容大小,602为此次展示中需要渲染的数据内容大小,令601的高度<602的高度,可以使得用户在少量滚动时偏移这些已渲染的数据项而不是重新渲染,达到减少渲染次数、加快展示响应的效果。
在一些实施例中,在渲染待展示数据以生成渲染后内容之前,还包括:判断待展示数据对应的渲染后内容中的各项数据是否被缓存;若是,则从缓存中查找待展示数据对应的渲染后内容中的各项数据。
当确认需要展示的数据已缓存时,则可以直接从缓存中获取渲染后内容进行展示,进一步提升展示响应速度,优化展示性能。
在一些实施例中,将渲染后内容中的各项数据展示在可视区域中,包括:根据滚动变化量,将渲染后内容移动至可视区域中,以进行展示。当获取顶部数据项在占位内容高度中的偏移值的预设频率较高时,将渲染后内容移动至可视区域中的频率也会较高,可以使展示效果接近真实的滚动效果,满足用户体验。
在一些实际应用中,当滚动刷新数据过于频繁的时候,渲染可能会产生闪烁,可以采用requestAnimationFrame调用更新列表的方法来实现对更新列表速率的控制,从而生成平滑的滚动动画。
在另一些实际应用中,当列表内的每一个元素都是通过统一的dom模版或渲染函数进行渲染时,可以通过列表回收的方式,将超出可视范围的dom节点回收,再将新的数据注入到回收的dom节点中,最后将更新数据后的回收节点放回列表中去。如图7所示,图7示出了本公开一个实施例的数据展示方法的示意图,在用户向下滑动过程中,可以不断将已加载并已滑过去的内容进行dom节点回收,用于即将加载的数据,进而可以通过列表回收的方式保证dom节点总量在一个极低的范围内,并且省去了创建销毁dom这一部分的开销。
需要注意的是,上述附图仅是根据本发明示例性实施例的方法所包括的处理的示意性说明,而不是限制目的。易于理解,上述附图所示的处理并不表明或限制这些处理的时间顺序。另外,也易于理解,这些处理可以是例如在多个模块中同步或异步执行的。
图8示出本公开第五实施例中一种数据展示装置800的框图;如图8所示,包括:
监听模块801,用于监听可视区域中的滚动行为,所述可视区域用于展示获取到的原始数据。
确定模块802,用于检测所述滚动行为产生的滚动变化量,以基于所述滚动变化量确定所述原始数据中的待展示数据。
展示模块803,用于渲染所述待展示数据以生成渲染后内容,进而将所述渲染后内容中的各项数据展示在所述可视区域中。
通过本申请中的方法,在服务器获取到前端应用请求的所有原始数据后,可以先不对全部原始数据进行加载,而是根据可视区域的大小以及监听到的滚动行为确定出待展示数据,再只渲染待展示数据进行展示,能够达到较好的渲染性能,实现较快的展示响应,提升用户体验。
在一些实施例中,在监听模块801监听可视区域中的滚动行为之前,还可以用于:计算原始数据的占位内容高度;确定原始数据中适应于可视区域的前N项数据,以作为初始待展示数据;渲染初始待展示数据以生成初始渲染后内容,进而将初始渲染后内容中的N项数据展示在可视区域中,以及,存储初始渲染后内容,并记录初始渲染后内容中的各项数据在占位内容高度中的位置。
在一些实施例中,展示模块803在将渲染后内容中的各项数据展示在可视区域中之后,还可以用于:缓存渲染后内容,并记录渲染后内容中的各项数据在占位内容高度中的位置。
在一些实施例中,确定模块802检测滚动行为产生的滚动变化量,包括:在滚动行为发生时,确定可视区域中顶部数据项在占位内容高度中的位置;在滚动行为中基于预设频率获取顶部数据项在占位内容高度中的偏移值;以偏移值作为滚动变化量。
在一些实施例中,确定模块802基于滚动变化量确定原始数据中的待展示数据,包括:确定顶部数据项在占位内容高度中偏移后的位置对应的数据项,以作为待展示的首项数据;基于首项数据确定适应于可视区域的M项数据,以M项数据作为待展示数据。
在一些实施例中,在展示模块803渲染待展示数据以生成渲染后内容之前,还包括:判断待展示数据对应的渲染后内容中的各项数据是否被缓存;若是,则从缓存中查找待展示数据对应的渲染后内容中的各项数据。
在一些实施例中,展示模块803将渲染后内容中的各项数据展示在可视区域中,包括:根据滚动变化量,将渲染后内容移动至可视区域中,以进行展示。
图8实施例的其它内容可以参照上述其它实施例。
所属技术领域的技术人员能够理解,本发明的各个方面可以实现为系统、方法或程序产品。因此,本发明的各个方面可以具体实现为以下形式,即:完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等),或硬件和软件方面结合的实施方式,这里可以统称为“电路”、“模块”或“系统”。
图9示出本公开实施例中一种数据展示计算机设备的结构框图。需要说明的是,图示出的电子设备仅仅是一个示例,不应对本发明实施例的功能和使用范围带来任何限制。
下面参照图9来描述根据本发明的这种实施方式的电子设备900。图9显示的电子设备900仅仅是一个示例,不应对本发明实施例的功能和使用范围带来任何限制。
如图9所示,电子设备900以通用计算设备的形式表现。电子设备900的组件可以包括但不限于:上述至少一个处理单元910、上述至少一个存储单元920、连接不同系统组件(包括存储单元920和处理单元910)的总线930。
其中,所述存储单元存储有程序代码,所述程序代码可以被所述处理单元910执行,使得所述处理单元910执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施方式的步骤。例如,处理单元910可以执行如图2中所示的步骤S201,监听可视区域中的滚动行为,可视区域用于展示获取到的原始数据;步骤S203,检测滚动行为产生的滚动变化量,以基于滚动变化量确定原始数据中的待展示数据;步骤S205,渲染待展示数据以生成渲染后内容,进而将渲染后内容中的各项数据展示在可视区域中。
存储单元920可以包括易失性存储单元形式的可读介质,例如随机存取存储单元(RAM)9201和/或高速缓存存储单元9202,还可以进一步包括只读存储单元(ROM)9203。
存储单元920还可以包括具有一组(至少一个)程序模块9205的程序/实用工具9204,这样的程序模块9205包括但不限于:操作系统、一个或者多个应用程序、其它程序模块以及程序数据,这些示例中的每一个或某种组合中可能包括网络环境的实现。
总线930可以为表示几类总线结构中的一种或多种,包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。
电子设备900也可以与一个或多个外部设备1000(例如键盘、指向设备、蓝牙设备等)通信,还可与一个或者多个使得用户能与该电子设备900交互的设备通信,和/或与使得该电子设备900能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口950进行。并且,电子设备900还可以通过网络适配器960与一个或者多个网络(例如局域网(LAN),广域网(WAN)和/或公共网络,例如因特网)通信。如图所示,网络适配器960通过总线930与电子设备900的其它模块通信。应当明白,尽管图中未示出,可以结合电子设备900使用其它硬件和/或软件模块,包括但不限于:微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
通过以上的实施方式的描述,本领域的技术人员易于理解,这里描述的示例实施方式可以通过软件实现,也可以通过软件结合必要的硬件的方式来实现。因此,根据本公开实施方式的技术方案可以以软件产品的形式体现出来,该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM,U盘,移动硬盘等)中或网络上,包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开实施方式的方法。
在本公开的示例性实施例中,还提供了一种计算机可读存储介质,其上存储有能够实现本说明书上述方法的程序产品。在一些可能的实施方式中,本发明的各个方面还可以实现为一种程序产品的形式,其包括程序代码,当所述程序产品在终端设备上运行时,所述程序代码用于使所述终端设备执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施方式的步骤。
根据本发明实施方式的用于实现上述方法的程序产品,其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码,并可以在终端设备,例如个人电脑上运行。然而,本发明的程序产品不限于此,在本文件中,可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括:具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。
计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了可读程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质,该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。
可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于无线、有线、光缆、RF等等,或者上述的任意合适的组合。
可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码,所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中,远程计算设备可以通过任意种类的网络,包括局域网(LAN)或广域网(WAN),连接到用户计算设备,或者,可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。
应当注意,尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元,但是这种划分并非强制性的。实际上,根据本公开的实施方式,上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之,上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。
此外,尽管在附图中以特定顺序描述了本公开中方法的各个步骤,但是,这并非要求或者暗示必须按照该特定顺序来执行这些步骤,或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的,可以省略某些步骤,将多个步骤合并为一个步骤执行,以及/或者将一个步骤分解为多个步骤执行等。
通过以上的实施方式的描述,本领域的技术人员易于理解,这里描述的示例实施方式可以通过软件实现,也可以通过软件结合必要的硬件的方式来实现。因此,根据本公开实施方式的技术方案可以以软件产品的形式体现出来,该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM,U盘,移动硬盘等)中或网络上,包括若干指令以使得一台计算设备(可以是个人计算机、服务器、移动终端、或者网络设备等)执行根据本公开实施方式的方法。
本领域技术人员在考虑说明书及实践这里公开的发明后,将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的,本公开的真正范围和精神由所附的权利要求指出。
Claims (10)
1.一种数据展示方法,其特征在于,包括:
监听可视区域中的滚动行为,所述可视区域用于展示获取到的原始数据;
检测所述滚动行为产生的滚动变化量,以基于所述滚动变化量确定所述原始数据中的待展示数据;
渲染所述待展示数据以生成渲染后内容,进而将所述渲染后内容中的各项数据展示在所述可视区域中。
2.根据权利要求1所述的方法,其特征在于,在监听可视区域中的滚动行为之前,还包括:
计算所述原始数据的占位内容高度;
确定所述原始数据中适应于所述可视区域的前N项数据,以作为初始待展示数据;
渲染所述初始待展示数据以生成初始渲染后内容,进而将所述初始渲染后内容中的N项数据展示在所述可视区域中,以及,
存储所述初始渲染后内容,并记录所述初始渲染后内容中的各项数据在所述占位内容高度中的位置。
3.根据权利要求2所述的方法,其特征在于,在将所述渲染后内容中的各项数据展示在所述可视区域中之后,还包括:
缓存所述渲染后内容,并记录所述渲染后内容中的各项数据在所述占位内容高度中的位置。
4.根据权利要求2所述的方法,其特征在于,检测所述滚动行为产生的滚动变化量,包括:
在所述滚动行为发生时,确定所述可视区域中顶部数据项在所述占位内容高度中的位置;
在所述滚动行为中基于预设频率获取所述顶部数据项在所述占位内容高度中的偏移值;
以所述偏移值作为所述滚动变化量。
5.根据权利要求4所述的方法,其特征在于,基于所述滚动变化量确定所述原始数据中的待展示数据,包括:
确定所述顶部数据项在所述占位内容高度中偏移后的位置对应的数据项,以作为待展示的首项数据;
基于所述首项数据确定适应于所述可视区域的M项数据,以所述M项数据作为所述待展示数据。
6.根据权利要求2所述的方法,其特征在于,在渲染所述待展示数据以生成渲染后内容之前,还包括:
判断所述待展示数据对应的渲染后内容中的各项数据是否被缓存;
若是,则从缓存中查找所述待展示数据对应的渲染后内容中的各项数据。
7.根据权利要求1所述的方法,其特征在于,将所述渲染后内容中的各项数据展示在所述可视区域中,包括:
根据所述滚动变化量,将所述渲染后内容移动至所述可视区域中,以进行展示。
8.一种数据展示装置,其特征在于,包括:
监听模块,用于监听可视区域中的滚动行为,所述可视区域用于展示获取到的原始数据;
确定模块,用于检测所述滚动行为产生的滚动变化量,以基于所述滚动变化量确定所述原始数据中的待展示数据;
展示模块,用于渲染所述待展示数据以生成渲染后内容,进而将所述渲染后内容中的各项数据展示在所述可视区域中。
9.一种计算机可读存储介质,其上存储有计算机程序,所述程序被处理器执行时实现如权利要求1至7任一项所述的数据展示方法。
10.一种电子设备,其特征在于,包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,当所述一个或多个程序被所述一个或多个处理器执行时,使得所述一个或多个处理器实现如权利要求1至7任一项所述的数据展示方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210540878.9A CN117111799A (zh) | 2022-05-17 | 2022-05-17 | 数据展示方法及装置、存储介质及电子设备 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210540878.9A CN117111799A (zh) | 2022-05-17 | 2022-05-17 | 数据展示方法及装置、存储介质及电子设备 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN117111799A true CN117111799A (zh) | 2023-11-24 |
Family
ID=88807932
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202210540878.9A Pending CN117111799A (zh) | 2022-05-17 | 2022-05-17 | 数据展示方法及装置、存储介质及电子设备 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN117111799A (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN117520691A (zh) * | 2024-01-08 | 2024-02-06 | 成都安世赛斯特软件技术有限公司 | 一种条目化数据显示方法、装置、存储介质及电子设备 |
-
2022
- 2022-05-17 CN CN202210540878.9A patent/CN117111799A/zh active Pending
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN117520691A (zh) * | 2024-01-08 | 2024-02-06 | 成都安世赛斯特软件技术有限公司 | 一种条目化数据显示方法、装置、存储介质及电子设备 |
CN117520691B (zh) * | 2024-01-08 | 2024-04-02 | 成都安世赛斯特软件技术有限公司 | 一种条目化数据显示方法、装置、存储介质及电子设备 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN106570098B (zh) | 页面刷新的方法及装置 | |
US9529866B2 (en) | Efficiently handling large data sets on mobile devices | |
CN110717120B (zh) | 一种网页列表显示方法和装置 | |
CN110362225B (zh) | 触控屏采样频率控制方法、装置、介质及电子设备 | |
CN109992715B (zh) | 信息展示方法、装置、介质和计算设备 | |
CN109388317B (zh) | 一种图片加载方法、终端设备及存储介质 | |
US9275398B1 (en) | Obtaining metrics for client-side display of content | |
US20130073545A1 (en) | Method and system for providing recommended content for user generated content on an article | |
CN109863524B (zh) | 用于传送实时内容的方法和系统 | |
CN111651700B (zh) | 消息展示方法、装置、电子设备及存储介质 | |
CA2922060A1 (en) | Swipe toolbar to switch tabs | |
US9152948B2 (en) | Method and system for providing a structured topic drift for a displayed set of user comments on an article | |
US8832288B1 (en) | Transitions between remotely cached and live versions of a webpage | |
CN115793926A (zh) | 列表的渲染方法、装置、电子设备及存储介质 | |
US20170308246A1 (en) | Optimizing attention recall of content in infinite scroll | |
CN113190321A (zh) | 一种用于应用程序页面上拉刷新的方法及设备 | |
CN117111799A (zh) | 数据展示方法及装置、存储介质及电子设备 | |
CN111698365A (zh) | 一种信息展示的方法和装置 | |
CN113421144A (zh) | 一种页面显示方法及装置、设备、存储介质 | |
US20190114311A1 (en) | Non-Invasive, Single Use System and Methods for Selective Brain Cooling | |
US9250760B2 (en) | Customizing a dashboard responsive to usage activity | |
US20140129927A1 (en) | Page browsing method and browser | |
EP3642727B1 (en) | Resource pre-fetch using age threshold | |
CN115795133A (zh) | 数据加载方法、装置、电子设备及存储介质 | |
CN113688336A (zh) | 页面数据的加载方法和加载装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |