CN113378084A - 页面展示方法和装置、电子设备以及计算机可读存储介质 - Google Patents
页面展示方法和装置、电子设备以及计算机可读存储介质 Download PDFInfo
- Publication number
- CN113378084A CN113378084A CN202010163399.0A CN202010163399A CN113378084A CN 113378084 A CN113378084 A CN 113378084A CN 202010163399 A CN202010163399 A CN 202010163399A CN 113378084 A CN113378084 A CN 113378084A
- Authority
- CN
- China
- Prior art keywords
- data
- displayed
- page
- display
- user
- 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 67
- 238000009877 rendering Methods 0.000 claims abstract description 80
- 238000004364 calculation method Methods 0.000 claims abstract description 67
- 230000002085 persistent effect Effects 0.000 claims abstract description 21
- 238000001514 detection method Methods 0.000 claims description 13
- 238000005096 rolling process Methods 0.000 claims description 3
- 238000004590 computer program Methods 0.000 claims description 2
- 230000008569 process Effects 0.000 abstract description 11
- 238000010586 diagram Methods 0.000 description 17
- 238000005516 engineering process Methods 0.000 description 10
- 238000004891 communication Methods 0.000 description 9
- 230000006870 function Effects 0.000 description 5
- 238000012545 processing Methods 0.000 description 5
- 230000005236 sound signal Effects 0.000 description 4
- 230000008901 benefit Effects 0.000 description 3
- 230000000153 supplemental effect Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 230000018109 developmental process Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 238000013473 artificial intelligence Methods 0.000 description 1
- 238000013528 artificial neural network Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000011022 operating instruction Methods 0.000 description 1
- 230000001172 regenerating effect Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 230000011218 segmentation Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/14—Tree-structured documents
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请公开了一种页面展示方法和装置、电子设备以及计算机可读存储介质。该方法包括:根据用户输入的用于指示更新当前页面的展示内容的第一操作指令,获取待展示数据;针对当前页面中的已展示数据与所述待展示数据进行对比;根据对比结果,针对所述待展示数据中与所述已展示数据不同的数据,进行渲染计算及展示。本申请实施例利用以持久化数据结构形式存储的数据的不可变特性来,进行数据对比,从而仅需针对还未被渲染过的列表项进行渲染计算,能够减少进行渲染时的计算量,加速页面展示过程。
Description
技术领域
本申请涉及计算机技术领域,尤其涉及一种页面展示方法和装置、电子设备以及计算机可读存储介质。
背景技术
在现有技术中,显示设备向用户展示页面内容(包括各种形式的文本、图片、视频等),并根据用户反馈的操作指令更新展示内容。
但是,由于每次更新渲染都需要重新进行计算,这些处理都会消耗大量的内存资源,随着互联网技术的发展,呈现给用户的内容也越来越复杂,所需的计算量也越来越大,导致页面的渲染变得越来越慢,从而影响用户的操作体验。
发明内容
本申请实施例提供一种页面展示方法和装置、电子设备以及计算机可读存储介质,以解决现有技术中页面渲染计算量大的缺陷。
为达到上述目的,本申请实施例提供了一种页面展示方法,包括:
根据用户输入的用于指示更新当前页面的展示内容的第一操作指令,获取待展示数据;
针对当前页面中的已展示数据与所述待展示数据进行对比;
根据对比结果,针对所述待展示数据中与所述已展示数据不同的数据,进行渲染计算及展示。
本申请实施例还提供了一种页面展示方法,包括:
根据用户输入的用于指示更新当前页面的展示内容的第一操作指令,获取当前页面的页面数据中的待展示数据,其中,所述当前页面的页面数据被存储为树状数据结构中的各个节点;
针对当前页面中的已展示数据在所述树状数据结构中对应的节点与所述待展示数据在所述树状数据结构中对应的节点进行对比;
根据对比结果,针对未展示的所述节点所对应的数据,进行渲染计算及展示。
本申请实施例还提供了一种页面展示装置,包括:
第一获取模块,用于根据用户输入的用于指示更新当前页面的展示内容的第一操作指令,获取待展示数据;
对比模块,用于针对当前页面的已展示数据与所述待展示数据进行对比;
渲染模块,用于根据所述对比模块的对比结果,针对所述待展示数据中与所述已展示数据不同的数据,进行渲染计算及展示。
本申请实施例还提供了一种电子设备,包括:
存储器,用于存储程序;
处理器,用于运行所述存储器中存储的所述程序,以用于执行上述页面展示方法。
本申请实施例还提供了一种计算机可读存储介质,在所述计算机可读存储介质上存储有计算机程序,所述程序被执行时以实现上述页面展示方法。
本申请实施例提供的页面展示方法和装置、电子设备以及计算机可读存储介质,对已渲染的数据与待展示的数据进行对比,从而仅需针对与当前显示的数据相比发生变化的新的页面数据进行渲染计算,并仅利用这些新的页面数据的渲染计算结果来更新展示内容,从而避免了对所有待展示的页面数据进行重新渲染,能够减少进行渲染时的计算量,加速页面展示过程,从而增强了用户体验。
上述说明仅是本申请技术方案的概述,为了能够更清楚了解本申请的技术手段,而可依照说明书的内容予以实施,并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂,以下特举本申请的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述,各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的,而并不认为是对本申请的限制。而且在整个附图中,用相同的参考符号表示相同的部件。在附图中:
图1a为本申请实施例提供的页面展示方法的系统架构图;
图1b为本申请实施例提供的页面展示方法的场景示意图;
图2为本申请提供的页面展示方法一个实施例的流程图;
图3a为本申请提供的页面展示方法另一个实施例的流程图;
图3b为本申请提供的页面展示方法又一个实施例的流程图;
图3c为本申请提供的页面展示方法再一个实施例的流程图;
图4a为图3a所示实施例的场景描述图;
图4b为图3b所示实施例的场景描述图;
图4c为图3c所示实施例的场景描述图;
图5为本申请提供的页面展示装置一个实施例的结构示意图;
图6为本申请提供的电子设备实施例的结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例,然而应当理解,可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反,提供这些实施例是为了能够更透彻地理解本公开,并且能够将本公开的范围完整的传达给本领域的技术人员。
目前,随着互联网的发展,用户通过互联网能够阅读到大量的内容,但是随着内容的丰富,往往很难在一页中容纳下所有的内容,因此,现有技术中通常是采用将这样的内容制作成多页的文档,从而用户通过翻页来进行分段阅读。但是对于一些特定的话题或主题,会需要以图文并茂的形式呈现给用户,而这样的图文并茂的文档不适合进行硬性的按页分割为多段,影响用户的阅读效果。尤其是随着触摸屏幕技术的出现,越来越多的用户习惯于在屏幕上通过上下滑动来进行操作,因此,长文档就越来越受到用户的欢迎。用户只需要在屏幕上上下滑动,就可以观看到长文档的不同部分。
例如,长文档通常具有超出用户的屏幕的高度的长度,因此,在屏幕上仅为用户显示长文档的一部分,并且当用户对于屏幕上显示的部分实施上拉或下拉操作时,显示设备会根据用户的操作来相应地读取长文档的其他部分,并进行渲染计算,从而长文档就可以在屏幕上以向上滚动或向下滚动的形式展示出来。
图1a为本申请实施例提供的页面展示方法的系统架构图。如图1a中所示,一般地,显示设备首先从例如服务器的存储有数据库的数据源读取用户要阅读的长文档的数据并以DOM树的形式存储在例如缓存的存储装置内,之后可以根据样式要求来将诸如长文档的页面的数据放入页面布局中,从而根据屏幕来显示放入有页面数据的页面布局。
在现有技术的上述方案中,需要对于响应于用户每次屏幕操作获取的长文档的待展示的部分进行渲染计算,而现在的图文文档的内容日渐丰富,这样的丰富内容的渲染计算将消耗大量的计算资源。特别是用户滚动屏幕上的显示的页面内容时,会导致DOM树的重构,即回流。当显示设备的性能有限时,尤其是用户滑动较为频繁时,屏幕显示的更新将会出现卡顿,严重影响用户的阅读体验。
在实际使用中,由于滑动操作的便利性,用户往往并不会如翻页阅读那样在完整阅读完当前显示内容之后再向上滑动来显示另外的内容,而是在阅读完屏幕上视线正对的部分就向上或向下滑动。换言之,对于用户来说,其实际上仅在阅读自己视线正对位置的部分内容,并且随着阅读的进度通过上下滑动操作来将未阅读的部分移动到视线正对位置。因此,对于显示屏幕来说,每次在更新显示内容时,实际上只有部分显示内容相对于滑动操作前的显示内容来说是新内容,其他内容均只是原有内容随着滑动操作进行了向上移动或向下移动。例如,图1b为本申请实施例提供的页面展示方法的场景示意图,参见图1b中的列表项8至12。在该情况下,现有技术中由于无法区分滑动前后的展示内容的差异而在每次发生页面内容的滚动时都进行重新渲染计算,因此,这样的对于实际上未发生变化的显示内容的渲染计算导致了计算资源的浪费,并从而影响了展示速度。
因此,本申请提出了一种页面展示方法,图1b为本申请实施例提供的页面展示方法的应用场景示意图,图1b所示的场景仅仅是本申请的技术方案可以应用的场景的示例之一。如图1b所示,本申请实施例的页面展示方案,用户通过显示设备的屏幕观看页面数据的显示时,显示设备从诸如服务器的存储有数据库的数据源获取相应的页面数据。
在本申请实施例中,可以以DOM结构(Document Object Model,文档对象模型)来表示要展示给用户的页面数据的页面文档,文档的各元素可以存储在DOM树的各个节点上。用户在诸如移动终端的显示装置上进行操作以选择了该页面文档进行阅读时,显示装置可以与从数据源获取该页面文档,例如该文档的代码,并且显示装置可以根据用户界面的显示布局,例如如图1b中所示的长列表式布局,按照预定的顺序来读取DOM树的各节点的元素,并可以将读取的元素放入文档流中,以从上到下地逐个放置在长列表布局中的每一行中,即成为各列表项,例如图1b中的列表项6-12。特别地,在本申请实施例中,长列表布局中的每一行的高度可以由其中布置的页面文档的元素的属性来确定,并且其宽度可以由其中布置的元素的属性与显示屏幕的属性来确定。
在上述情况下,用户可以在阅读该页面文档,例如,阅读图1b的左侧显示的列表项6-12的过程中,根据阅读的进度通过在屏幕上上下滑动来更新页面显示。如上所述,在这样的滑动时,即使用户滑动的距离很小,用户的移动终端也需要相应于页面内容的滚动而进行DOM树结构的页面数据的重绘。
例如,如图1b中所示,在左侧所示的展示状态下,即,屏幕上展示出长列表形式的列表项6-12,用户通过屏幕输入向上滑动的操作指令,移动终端接收到该指令,从而根据该指令来从例如服务器的数据源获取接下来要展示在屏幕上的列表项8-14。在获取到了新的展示内容,即列表项8-14之后。在现有技术中,会根据新获取的展示内容,即列表项8-14中的数据进行展示内容的重绘,即重新生成DOM树,并相应地进行页面布局和渲染计算。但是在本申请实施例中,可以将获取的页面文档的展示内容,例如列表项8-14中的数据与已经展示的列表项6-12的数据进行对比。例如,可以采用本领域中公知的各种数据比较方法来进行这样的对比。在本申请中,可以以持久性数据结构来对页面数据进行存储,从而持久性数据结构存储的数据具有不可更改的特性,因此,在比对时,可以直接比对数据来确定是否是同一数据。
在本申请实施例中,根据数据对比的结果,可以确定获取的待展示的内容数据中,列表项数据8-12与已展示的内容数据中的列表项数据8-12相同。换言之,在获取的待展示的内容数据中,已展示的列表项8-12的数据没有变化,只是增加了新的列表项13-14的数据,并且去除了已展示的列表项6-7的数据。
因此,在本申请实施例中,可以进而只针对新增加的列表项数据13-14来更新DOM树,并进行渲染计算。因此,与现有技术相比,能够减少在更新显示时需要处理的DOM树的节点数,避免了现有技术中由于页面滚动操作引起的重绘,从而大大减少了渲染计算的量。
通过上述方式,在最终展示时,可以直接使用已展示的列表项8-12以及新计算的新增加的列表项13-14的数据的渲染计算结果来进行显示,从而完成了对显示内容的更新。
因此,针对页面数据进行持久化数据结构存储,在用户进行更新展示内容的操作时,利用以持久化数据结构形式存储的数据的不可变特性来,快速实现对已展示的数据与待展示的数据进行对比,从而仅需针对与当前显示的数据相比发生变化的新的页面数据进行渲染计算,并仅利用这些新的页面数据的渲染计算结果来更新展示内容,从而利用避免了对所有待展示的页面数据进行重新渲染,能够减少进行渲染时的计算量,加速页面展示过程,从而增强了用户体验。
上述实施例是对本申请实施例的技术原理和示例性的应用框架的说明,下面通过多个实施例来进一步对本申请实施例具体技术方案进行详细描述。
实施例一
图2为本申请提供的页面展示方法一个实施例的流程图,该方法的执行主体可以为具有数据处理能力的各种显示终端或设备,例如,可以为用户使用的移动终端、计算机、或膝上型计算机等等。当然,执行主体也可以为集成在这些设备上的装置或芯片,例如移动终端中的处理模块、计算机中的处理机芯片。如图2所示,该页面展示方法包括如下步骤:
S201,根据用户输入的用于指示更新当前页面的展示内容的第一操作指令,获取待展示数据。
用户可以在自己的终端,例如移动终端或计算机上通过直接触摸显示设备的屏幕或者通过诸如鼠标键盘等输入设备来输入对于当前屏幕上页面数据的显示的各种指令,例如,可以通过输入网址来打开某个网站的主页,或者可以通过点击链接或执行程序来打开特定页面进行显示。因此,接收用户操作的终端可以从诸如服务器的存储有数据库的数据源获取相应的页面数据。例如,可以根据用户输入的网址,由网站的服务器将主页的代码下发给用户的终端,并且进而通过解析器将其解析为DOM结构,并添加CSS样式之后生成页面数据。
在本申请实施例中,用户在阅读当前的展示内容,例如,阅读图1b的左侧显示的列表项6-12的过程中,根据阅读的进度通过在屏幕上上下滑动来更新页面显示。例如,如图1b中所示,在左侧所示的展示状态下,即,屏幕上展示出长列表形式的列表项6-12作为展示内容,用户通过屏幕输入向上滑动的操作指令,移动终端接收到该指令,从而可以根据该指令来从例如服务器的数据源获取接下来要展示在屏幕上的展示内容,例如列表项8-14。
S202,针对当前页面中的已展示数据与待展示数据进行对比。
在获取到了新的展示内容,即列表项8-14之后。在本申请实施例中,可以将获取的页面的待展示内容,例如列表项8-14作为待展示数据与作为已展示数据的已经展示的列表项6-12进行对比。在本申请中,页面数据可以以持久性数据结构来进行存储,并且可以借助于持久性数据结构存储的数据的不可更改的特性来进行数据的逐一对比。例如,可以使用页面展示技术中常用的JS(JavaScript)语言中的函数来进行数据的对比。即,可以使用JS语言中的等于操作来确定当前展示数据与待展示数据的各字段,即各列表项是否一样。例如,可以将页面的页面数据表示为数组,其中的每个数据是每次发生用户的操作时生成的展示内容的页面数据,从而当发生用户对于屏幕显示内容的操作,例如上滑操作时,可以对上述数组中的已展示数据和待展示数据进行JS的等于操作,来确定其中变化的列表项。
S203,根据对比结果,针对待展示数据中与已展示数据不同的数据,进行渲染计算及展示。
在本申请实施例中,根据如上所述地基于例如持久性数据结构地数据对比的结果,可以确定获取的待展示的内容数据中,列表项数据8-12与已展示的内容数据中的列表项数据8-12相同。换言之,在获取的待展示的内容数据中,已展示的列表项8-12的数据没有变化,只是增加了新的列表项13-14的数据,并且去除了已展示的列表项6-7的数据。
因此,在本申请实施例中,可以只针对新增加的列表项13-14来更新DOM树,以进行渲染计算,从而在最终展示时,可以直接使用已展示的列表项8-12以及新计算的新增加的列表项13-14的数据的渲染计算结果来进行显示,从而完成了对显示内容的更新。因此,与现有技术相比,能够减少在更新显示时需要处理的DOM树的节点数,避免了现有技术中由于页面滚动操作引起的重绘,从而大大减少了渲染计算的量。
因此,针对页面数据进行持久化数据结构存储,在用户进行更新展示内容的操作时,利用以持久化数据结构形式存储的数据的不可变特性来,快速实现对已展示的数据与待展示的数据进行对比,从而仅需针对与当前显示的数据相比发生变化的新的页面数据进行渲染计算,并仅利用这些新的页面数据的渲染计算结果来更新展示内容,从而利用避免了对所有待展示的页面数据进行重新渲染,能够减少进行渲染时的计算量,加速页面展示过程,从而增强了用户体验。
实施例二
图3a为本申请提供的页面展示方法另一个实施例的流程图,并且图4a为图3a所示实施例的场景描述图。如图3a所示,本实施例提供的页面展示方法可以包括以下步骤:
S3011,检测当前展示的列表项中是否包含位于序列头部的列表项。
在本申请实施例中,在用户在自己的终端,例如移动终端或计算机上通过直接触摸显示设备的屏幕或者通过诸如鼠标键盘等输入设备输入了对于当前屏幕上页面数据的显示指令的情况下,可以根据用户的指令,从诸如服务器的存储有数据库的数据源获取相应的页面数据并因此渲染为展示内容展示给用户。在本申请实施例中,展示内容对应的页面数据可以是具有序列顺序的多个列表项,例如如图1b中所示,并且在最终展示时,展示与屏幕尺寸对应位置的列表项作为展示内容。
因此,在展示当前的展示内容的情况下,可以检测当前展示的列表项是否包括位于序列的头部的列表项。例如,如图4a中所示,当前显示的展示内容对应的列表项为列表项1-7。即,当前显示的展示内容是用户指定的页面的包含顶部的部分,换言之,用户当前阅读的部分是包含有页面数据的序列中第一个列表项,即列表项1。因此,通过步骤S3011的检测,可以确认当前展示的内容是否是整个页面的顶部。
S3012,根据用户输入的用于指示向下滚动展示内容的第二操作指令,在展示内容的顶部展示刷新组件。
在当前展示的内容是整个页面的顶部时,如果用户这时输入了向下滑滚动展示内容的操作指令,那么因为当前展示的内容已经是页面的顶部了,因此实际上已经没有对应的页面数据可供更新当前的展示内容以显示给用户。在该情况下,可以如图4a中所示,可以在展示内容的顶部额外显示刷新组件,以提示用户当前展示的页面的顶部。
要指出的是,在实际应用中,用户通常能够从展示内容上了解当前展示内容是页面的顶部,因此用户在这种情况下输入向下滚动的操作指令,很可能是希望刷新当前的页面,即重新获取页面数据。当然,也可能是用户的误操作,不小心在浏览时对屏幕进行了误操作。因此,如果在展示内容是页面的顶部的情况下,用户一输入向下滚动的操作指令,就立刻刷新,有可能会执行了用户的误操作,并没有实现用户的真实意图。因此,在步骤S3012中,可以当已经展示了页面的顶部时,根据用户输入的向下滚动展示内容的操作指令,显示一个刷新组件,例如,可以显示一个漏斗形状的图片在展示内容上方,以提示用户需要对页面进行刷新,并等待用户的进一步操作。
此外,由于需要在用户下拉当前的展示内容的状态下等待用户的进一步的操作,因此,步骤S3012可以进一步包括:根据第二操作指令指示的向下滚动的距离确定刷新组件的刷新组件展示位置;在刷新组件展示位置展示刷新组件。
如上所述,当在展示内容是页面的顶部的状态下接收到用户输入向下滚动展示内容的操作时,可以在展示内容的顶端显示刷新组件来提示用户准备刷新当前的页面,并且在等待用户的进一步操作过程中,也可以进一步根据用户继续向下滚动操作的滚动距离来确定刷新组件的显示位置。例如,可以随着用户继续向下滚动,持续降低刷新组件的显示位置,以使得刷新组件始终显示在列表项1的顶部。或者也可以随着用户继续向下滚动,始终在列表项1的顶部与屏幕的顶部之间的空白区域的中间显示刷新组件。从而能够更加灵活地显示刷新组件。
S3013,当第二操作指令指示向下滚动展示内容达第一预定高度时,获取当前页面的更新数据。
如上所述,当在图4a中所示的情况中根据用户的向下滚动的操作指令先在当前的展示内容的顶部显示刷新组件,并且用户可以根据该刷新组件的提醒来确认自己的意图。
例如,在步骤S3013中,可以等待用户输入的操作指令指示向下滚动展示内容达一定高度时,才触发对整个页面的数据的重新获取。例如,可以在步骤S3012中根据用户输入的向下滚动展示内容的操作指令显示刷行组件之后等待直到用户继续向下滚动一定高度,从而可以确认用户的意图确实是要刷新当前页面,因此,可以开始获取当前页面的更新数据。
S3014,确定更新数据中的待展示数据,并针对更新数据中的待展示数据进行渲染计算及展示。
在步骤S3013中获取了当前页面的更新数据时,可以在步骤S3014中对页面的更新数据进行处理,例如重新构建DOM树,并进而添加CSS样式,并进而根据页面布局生成页面数据,即列表项。该步骤在重新获取了当前页面的更新数据之后的操作与上述用户打开新的页面的操作基本上相同。
因此,在本实施例中,通过根据用户输入的向下滚动的操作指令来先显示刷新组件以提示用户,并等待用户的进一步的操作,在用户输入了进一步向下滚动的操作指令达预定高度时才启动页面的刷新操作,从而根据更新数据来重新显示当前页面的展示内容。
实施例三
图3b为本申请提供的页面展示方法又一个实施例的流程图,并且图4b为图3b所示实施例的场景描述图。如图3b所示,本实施例提供的页面展示方法可以包括以下步骤:
S3021,检测当前展示的列表项中是否包含位于序列末端的列表项。
根据本申请实施例,当用户在自己的终端,例如移动终端或计算机上通过直接触摸显示设备的屏幕或者通过诸如鼠标键盘等输入设备输入了对于当前屏幕上页面数据的显示指令的情况下,可以根据用户的指令,从诸如服务器的存储有数据库的数据源获取相应的页面数据并因此渲染为展示内容展示给用户。在本申请实施例中,展示内容对应的页面数据可以是具有序列顺序的多个列表项,例如如图1b中所示,并且在最终展示时,展示与屏幕尺寸对应位置的列表项作为展示内容。
用户随着对页面进行阅读的进度,可以通过向上滑动来阅读页面内容的各部分,当用户快要阅读到当前页面的底部时,例如,用户已经阅读到了构成该页面的列表项1-n中的列表项n-6时,如图4b中所示,可以检测当前展示的内容是否包含位于该页面的数据序列末端的列表项,例如如图4b的左侧图中所示,当前展示内容共包含位于该页面的数据序列末端的六个列表项,即列表项n-6至列表项n,因此可以确定当前显示内容已经包含了位于该页面的数据序列的末端的列表项。即,用户已经阅读到了该页面的末端。
S3022,根据用户输入的用于指示向上滚动展示内容的第三操作指令,在展示内容的底部展示加载组件。
在当前展示的内容是整个页面的底端时,如果用户这时输入了向上滑滚动展示内容的操作指令,那么因为当前展示的内容已经是页面的底部了,因此实际上已经没有对应的页面数据可供更新当前的展示内容以显示给用户。在该情况下,可以如图4b的右侧所示,可以在展示内容的底部,例如列表项n的下方额外显示加载组件,以提示用户当前展示的页面的底部。
要指出的是,在实际应用中,用户通常无法从展示内容上了解当前展示内容是页面的底部。例如在用户浏览购物网站时,页面的列表项主要由各种商品构成,用户的向上滚动操作可以浏览各种不同的商品,即当前加载的页面的底部也是各种商品的展示。因此用户在这种情况下输入向上滚动的操作指令,通常是希望继续浏览更多内容,即获取更多的页面数据。当然,也可能是用户的误操作,不小心在浏览时对屏幕进行了误操作。因此,如果在展示内容是页面的底部的情况下,用户一输入向上滚动的操作指令,就立刻刷新,有可能会执行了用户的误操作,并没有实现用户的真实意图,从而影响了用户对于当前展示的商品的观看。因此,在步骤S3022中,可以当已经展示了页面的底部时,根据用户输入的向下滚动展示内容的操作指令,显示一个加载组件,例如,可以显示一段文字在展示内容下方,例如“当前已经是底部了,是否浏览更多”等等,以提示用户可以通过继续上滚来加载更多数据,并等待用户的进一步操作。
S3023,当第三操作指令指示向上滚动展示内容达第二预定高度时,获取当前页面的补充数据。
如上所述,当在图4b中所示的情况中根据用户的向上滚动的操作指令先在当前的展示内容的底部显示加载组件,并且用户可以根据该加载组件的提醒来确认自己的意图。
例如,在步骤S3023中,可以等待用户输入的操作指令指示向上滚动展示内容达一定高度时,才触发加载更多数据,即当前页面的补充数据。例如,在用户浏览购物网站的情况下,可以加载更多商品图片和介绍。
S3024,针对补充数据中的至少一部分数据,进行渲染计算及展示。
在获取了补充数据时,可以利用上述实施例二的步骤,复用当前展示内容的至少一些列表项,并且例如在显示加载组件的位置显示补充数据的一部分。例如如图4b中所示,当已经获取了补充数据时,可以根据实施例二的步骤,通过数据对比来确认待展示数据中包括与已展示数据相同的数据,即列表项n-5至n,并且不同的是上拉刷新组件位置处显示的补充数据中的顶部的列表项。因此,通过上述实施例二的步骤,可以直接复用列表项n-5至n的渲染计算结果,并只针对补充数据中的顶部的列表项来进行渲染计算,从而完成待展示数据的渲染。
在本申请实施例中,用户浏览的当前页面可能会很长,因此获取当前页面的更新数据的操作不限于上述步骤,并且例如可以检测用户对当前页面进行操作的时长,并且当根据检测结果确认用户对当前页面进行操作的时长大于第一预定时间阈值时,根据用户输入的用于指示向下滚动展示内容的第二操作指令或者指示向上滚动展示内容的第三操作指令,获取当前页面的更新数据,并且根据更新数据中的待展示数据,并针对更新数据中的待展示数据进行渲染计算及展示。以该方式,能够通过确认用户已经浏览当前页面较长时间,即用户可能已经对当前浏览的内容感到厌倦的情况下,即使用户还没有浏览到顶部或底部,也可以主动为用户更新当前页面的数据,从而能够更好地提升用户的体验。
因此,在本实施例中,通过根据用户输入的向上滚动的操作指令来先显示加载组件以提示用户,并等待用户的进一步的操作,在用户输入了进一步向上滚动的操作指令达预定高度时才启动更多数据的家在,从而来针对加载数据的一部分来进行渲染计算和展示。
实施例四
图3c为本申请提供的页面展示方法再一个实施例的流程图,并且图4c为图3c所示实施例的场景描述图。如图3b所示,本实施例提供的页面展示方法可以包括以下步骤:
S3031,获取与当前展示的列表项在序列顺序上相邻的至少一个未展示的列表项所对应的数据。
S3032,针对未展示的列表项所对应的数据,进行渲染计算。
在实际使用中,尤其是在用户使用移动终端这样的小屏幕设备来查看页面时,需要较为频繁地滚动展示内容,因此,在本申请实施例中,可以在展示当前的展示内容,例如图1b的左侧显示的列表项6-12时,在用户输入滚动操作指示之前,先自动获取与当前展示的列表项在序列顺序上相邻的且还没有展示的列表项的数据,例如,图1b的左侧显示的列表项6上方的列表项4和5以及列表项12下方的列表项13和14,并且针对这些未展示的列表项的数据进行渲染计算并进行存储。从而当用户在阅读完当前的展示内容列表项6-12进行上滚操作时,可以直接使用列表项12下方的列表项13和14的渲染计算结果来直接进行渲染,大大加快了显示速度。
S3033,根据用户输入的用于指示更新当前页面的展示内容的第一操作指令,获取待展示数据。
在本申请实施例中,用户在阅读当前的展示内容,例如,阅读图1b的左侧显示的列表项6-12的过程中,根据阅读的进度通过在屏幕上上下滑动来更新页面显示。例如,如图1b中所示,在左侧所示的展示状态下,即,屏幕上展示出长列表形式的列表项6-12作为展示内容,用户通过屏幕输入向上滑动的操作指令,移动终端接收到该指令,从而可以根据该指令来从例如服务器的数据源获取接下来要展示在屏幕上的展示内容,例如列表项8-14。
S3034,针对当前页面中的已展示数据与待展示数据进行对比。
在获取到了新的展示内容,即列表项8-14之后。在本申请实施例中,可以将获取的页面的待展示内容,例如列表项8-14作为待展示数据与作为已展示数据的已经展示的列表项6-12进行对比。在本申请中,页面数据可以以持久性数据结构来进行存储,并且可以借助于持久性数据结构存储的数据的不可更改的特性来进行数据的逐一对比。例如,可以使用页面展示技术中常用的JS(JavaScript)语言中的函数来进行数据的对比。即,可以使用JS语言中的等于操作来确定当前展示数据与待展示数据的各字段,即各列表项是否一样。例如,可以将页面的页面数据表示为数组,其中的每个数据是每次发生用户的操作时生成的展示内容的页面数据,从而当发生用户对于屏幕显示内容的操作,例如上滑操作时,可以对上述数组中的已展示数据和待展示数据进行JS的等于操作,来确定其中变化的列表项。
S3035,根据对比结果,针对待展示数据中与已展示数据不同的数据,进行渲染计算及展示。
在本申请实施例中,根据如上所述地基于例如持久性数据结构地数据对比的结果,可以确定获取的待展示的内容数据中,列表项数据8-12与已展示的内容数据中的列表项数据8-12相同。换言之,在获取的待展示的内容数据中,已展示的列表项8-12的数据没有变化,只是增加了新的列表项13-14的数据,并且去除了已展示的列表项6-7的数据。
因此,在本申请实施例中,可以只针对新增加的列表项13-14来更新DOM树,以进行渲染计算,从而在最终展示时,可以直接使用已展示的列表项8-12以及新计算的新增加的列表项13-14的数据的渲染计算结果来进行显示,从而完成了对显示内容的更新。特别是利用本实施例中的步骤S3031和S3032,在用户滚动当前页面使得展示内容变为列表项8-14之前,已经预先对列表项13和14的数据进行了渲染计算并进行了存储。因此,在根据用户的滚动操作确定待展示内容中包括列表项13和14并通过数据对比确定需要对列表项13和14进行渲染计算时,可以直接使用缓存中的渲染计算结果来结合已展示的列表项8-12的之前的渲染计算结果来进行展示。
因此,与现有技术相比,能够减少在更新显示时需要处理的DOM树的节点数,避免了现有技术中由于页面滚动操作引起的重绘,从而大大减少了渲染计算的量。
此外,目前在一些页面显示中,会包括具有固定展示位置的列表项。例如购物网站的导航栏等等,因此,这些列表项在展示时需要固定在其属性中指示的展示位置进行展示。但是当页面中包括多个具有固定展示位置的列表项时,例如,如图4c中所示,在左侧示出的当前的展示内容包括置顶的固定位置的列表项m以及尚未到达其固定位置的另一待置顶的列表项m+3,因此在正常滚动显示时,随着展示内容的滚动,列表项m始终处于展示内容的顶部,而待置顶的列表项m+3则可以随着滚动操作向顶部位置移动。因此在该情况下,本申请的实施例的方法可以进一步包括:
S3036,检测当前展示的列表项中是否包含具有展示位置固定属性的列表项。
S3037,根据用户输入的用于指示向上滚动展示内容的第三操作指令,当具有展示位置固定属性的列表项到达固定展示位置时,将列表项持续展示在该固定展示位置,直到新的具有固定展示位置属性的列表项到达该位置。
因此,通过步骤S3036,可以通过检测当前展示内容的列表项中是否包括具有展示位置固定属性的列表项,例如,列表项m和列表项m+4,并且当列表项m+4到达其展示位置固定属性指示的固定位置,即屏幕的顶部时,可以自动替代原有的列表项m作为置顶的列表项。
因此,针对页面数据进行持久化数据结构存储,在用户进行更新展示内容的操作时,利用以持久化数据结构形式存储的数据的不可变特性来,快速实现对已展示的数据与待展示的数据进行对比,从而仅需针对与当前显示的数据相比发生变化的新的页面数据进行渲染计算,并仅利用这些新的页面数据的渲染计算结果来更新展示内容,从而利用避免了对所有待展示的页面数据进行重新渲染,能够减少进行渲染时的计算量,加速页面展示过程,从而增强了用户体验。
实施例五
图5为本申请提供的页面展示装置一个实施例的结构示意图,可用于执行如图2所示的方法步骤。在本申请实施例中,页面展示装置可以实施为移动终端、计算机或膝上型电脑等等具有计算功能和显示功能的设备,或者也可以应用于这些设备内部的模块或芯片。如图5所示,该页面展示装置可以包括:第一获取模块51、对比模块52、渲染模块53。
第一获取模块51可以用于根据用户输入的用于指示更新当前页面的展示内容的第一操作指令,获取待展示数据。
在当前互联网环境中,用户可以在自己的终端,例如移动终端或计算机上通过直接触摸显示设备的屏幕或者通过诸如鼠标键盘等输入设备来输入对于当前屏幕上页面数据的显示的各种指令,例如,可以通过输入网址来打开某个网站的主页,或者可以通过点击链接或执行程序来打开特定页面进行显示。因此,接收用户操作的终端可以从诸如服务器的存储有数据库的数据源获取相应的页面数据。例如,可以根据用户输入的网址,由网站的服务器将主页的代码下发给用户的终端,并且进而通过解析器将其解析为DOM结构,并添加CSS样式之后生成页面数据,
在本申请实施例中,用户使用本实施例的页面展示装置或包括有本申请实施例的页面展示装置的设备阅读当前的展示内容,例如,阅读图1b的左侧显示的列表项6-12的过程中,根据阅读的进度通过在屏幕上上下滑动来更新页面显示。例如,如图1b中所示,在左侧所示的展示状态下,即,屏幕上展示出长列表形式的列表项6-12作为展示内容,用户通过屏幕输入向上滑动的操作指令,在该情况下,第一获取模块51可以接收到该指令,从而可以根据该指令来从例如服务器的数据源获取接下来要展示在屏幕上的展示内容,例如列表项8-14。
在获取到了新的展示内容,即列表项8-14之后。在本申请实施例中,对比模块52可以用于针对当前页面的已展示数据与待展示数据进行对比。例如可以将获取的页面的待展示内容,例如列表项8-14作为待展示数据与作为已展示数据的已经展示的列表项6-12进行对比。在本申请中,页面数据可以以持久性数据结构来进行存储,并且可以借助于持久性数据结构存储的数据的不可更改的特性来进行数据的逐一对比。
在本申请实施例中,根据如上所述地基于例如持久性数据结构地数据对比的结果,可以确定获取的待展示的内容数据中,列表项数据8-12与已展示的内容数据中的列表项数据8-12相同。换言之,在获取的待展示的内容数据中,已展示的列表项8-12的数据没有变化,只是增加了新的列表项13-14的数据,并且去除了已展示的列表项6-7的数据。
因此,在本申请实施例中,渲染模块53可以用于根据对比模块52的对比结果,针对待展示数据中与已展示数据不同的数据,进行渲染计算及展示。例如,可以只针对新增加的列表项13-14来更新DOM树,以进行渲染计算,从而在最终展示时,可以直接使用已展示的列表项8-12以及新计算的新增加的列表项13-14的数据的渲染计算结果来进行显示,从而完成了对显示内容的更新。因此,与现有技术相比,能够减少在更新显示时需要处理的DOM树的节点数,避免了现有技术中由于页面滚动操作引起的重绘,从而大大减少了渲染计算的量。
此外,根据本申请实施例的页面展示装置可以进一步包括:第一检测模块54和第二检测模块55。
在本申请实施例中,在用户在自己的终端,例如移动终端或计算机上通过直接触摸显示设备的屏幕或者通过诸如鼠标键盘等输入设备输入了对于当前屏幕上页面数据的显示指令的情况下,第一获取模块51可以根据用户的指令,从诸如服务器的存储有数据库的数据源获取相应的页面数据并因此渲染为展示内容展示给用户。在本申请实施例中,展示内容对应的页面数据可以是具有序列顺序的多个列表项,例如如图1b中所示,并且在最终展示时,展示与屏幕尺寸对应位置的列表项作为展示内容。
因此,在展示当前的展示内容的情况下,第一检测模块54可以用于检测当前展示的列表项是否包括位于序列的头部的列表项。例如,如图4a中所示,当前显示的展示内容对应的列表项为列表项1-7。即,当前显示的展示内容是用户指定的页面的包含顶部的部分,换言之,用户当前阅读的部分是包含有页面数据的序列中第一个列表项,即列表项1。因此,通过第一检测模块54的检测,可以确认当前展示的内容是否是整个页面的顶部。
类似地,用户随着对页面进行阅读的进度,可以通过向上滑动来阅读页面内容的各部分,当用户快要阅读到当前页面的底部时,例如,用户已经阅读到了构成该页面的列表项1-n中的列表项n-6时,如图4b中所示,第二检测模块55可以用于检测当前展示的列表项中是否包含位于序列末端的列表项。例如如图4b的左侧图中所示,当前展示内容共包含位于该页面的数据序列末端的六个列表项,即列表项n-6至列表项n,因此可以确定当前显示内容已经包含了位于该页面的数据序列的末端的列表项。即,用户已经阅读到了该页面的末端。
因此,在第一检测模块54或第二检测模块55检测到当前展示内容已经是页面的顶部或底部时,刷新组件展示模块56可以用于根据用户输入的用于指示向下滚动展示内容的第二操作指令,在展示内容的顶部展示刷新组件。并且加载组件展示模块57可以用于根据用户输入的用于指示向上滚动展示内容的第三操作指令,在展示内容的底部展示加载组件。
在当前展示的内容是整个页面的顶部时,如果用户这时输入了向下滑滚动展示内容的操作指令,那么因为当前展示的内容已经是页面的顶部了,因此实际上已经没有对应的页面数据可供更新当前的展示内容以显示给用户。在该情况下,可以如图4a中所示,可以利用刷新组件展示模块56或加载组件展示模块57在展示内容的顶部或底部额外显示刷新组件或加载组件,以提示用户当前展示的页面的顶部或底部。
此外,由于需要在用户下拉或上滚当前的展示内容的状态下等待用户的进一步的操作,因此,本申请实施例的页面展示装置可以进一步包括:刷新组件位置确定模块58,其可以用于根据第二操作指令指示的向下滚动的距离确定刷新组件的刷新组件展示位置。
如上所述,当在展示内容是页面的顶部的状态下第一获取模块51接收到用户输入向下滚动展示内容的操作时,刷新模块展示组件56可以在展示内容的顶端显示刷新组件来提示用户准备刷新当前的页面,并且在等待用户的进一步操作过程中,刷新组建位置确定模块58可以进一步根据用户继续向下滚动操作的滚动距离来确定刷新组件的显示位置,并且由刷新组件展示模块56来在确定的位置展示刷新组件。例如,可以随着用户继续向下滚动,持续降低刷新组件的显示位置,以使得刷新组件始终显示在列表项1的顶部。或者也可以随着用户继续向下滚动,始终在列表项1的顶部与屏幕的顶部之间的空白区域的中间显示刷新组件。从而能够更加灵活地显示刷新组件。
如上所述,当在图4a中所示的情况中刷新组件展示模块56或加载组件展示模块57根据用户的向下或向上滚动的操作指令先在当前的展示内容的顶部显示刷新组件或加载组件,并且用户可以根据该刷新组件或加载组件的提醒来确认自己的意图。
例如,第一获取模块51可以在用户输入的操作指令指示向下滚动展示内容达一定高度时,才开始对整个页面的数据的重新获取或者在用户输入的操作指令指示向上滚动展示内容达一定高度时,才开始获取加载数据。并且从而对比模块52可以进一步确定更新数据或加载数据中的待展示数据,并且渲染模块53可以针对获取的待展示数据进行渲染计算及展示。
此外,在实际使用中,尤其是在用户使用移动终端这样的小屏幕设备来查看页面时,需要较为频繁地滚动展示内容,因此,本申请实施例的页面展示装置可以进一步包括第二获取模块59,其可以用于获取与当前展示的列表项在序列顺序上相邻的至少一个未展示的列表项所对应的数据。
因此,在本申请实施例中,可以在展示当前的展示内容,例如图1b的左侧显示的列表项6-12时,在用户输入滚动操作指示之前,先由第二获取模块59自动获取与当前展示的列表项在序列顺序上相邻的且还没有展示的列表项的数据,例如,图1b的左侧显示的列表项6上方的列表项4和5以及列表项12下方的列表项13和14,并且由展示模块53针对这些未展示的列表项的数据进行渲染计算并进行存储。从而当用户在阅读完当前的展示内容列表项6-12进行上滚操作时,可以直接使用列表项12下方的列表项13和14的渲染计算结果来直接进行渲染,大大加快了显示速度。
此外,目前在一些页面显示中,会包括具有固定展示位置的列表项。例如购物网站的导航栏等等,因此,这些列表项在展示时需要固定在其属性中指示的展示位置进行展示。但是当页面中包括多个具有固定展示位置的列表项时,例如,如图4c中所示,在左侧示出的当前的展示内容包括置顶的固定位置的列表项m以及尚未到达其固定位置的另一待置顶的列表项m+3,因此在正常滚动显示时,随着展示内容的滚动,列表项m始终处于展示内容的顶部,而待置顶的列表项m+3则可以随着滚动操作向顶部位置移动。因此在该情况下,本申请的实施例的页面展示装置可以进一步包括第三检测模块60,其可以用于检测当前展示的列表项中是否包含具有展示位置固定属性的列表项。并且渲染模块53可以进一步用于在具有展示位置固定属性的列表项到达所述固定展示位置时,将列表项持续展示在所述固定展示位置,直到新的具有固定展示位置属性的列表项到达该位置。
因此,针对页面数据进行持久化数据结构存储,在用户进行更新展示内容的操作时,利用以持久化数据结构形式存储的数据的不可变特性来,快速实现对已展示的数据与待展示的数据进行对比,从而仅需针对与当前显示的数据相比发生变化的新的页面数据进行渲染计算,并仅利用这些新的页面数据的渲染计算结果来更新展示内容,从而利用避免了对所有待展示的页面数据进行重新渲染,能够减少进行渲染时的计算量,加速页面展示过程,从而增强了用户体验。
实施例六
以上描述了页面展示装置的内部功能和结构,该装置可实现为一种电子设备,例如计算机、虚拟计算机、膝上型电脑等等。图6为本申请提供的电子设备实施例的结构示意图。如图6所示,该电子设备包括存储器61和处理器62。
存储器61,用于存储程序。除上述程序之外,存储器61还可被配置为存储其它各种数据以支持在电子设备上的操作。这些数据的示例包括用于在电子设备上操作的任何应用程序或方法的指令,联系人数据,电话簿数据,消息,图片,视频等。
存储器61可以由任何类型的易失性或非易失性存储设备或者它们的组合实现,如静态随机存取存储器(SRAM),电可擦除可编程只读存储器(EEPROM),可擦除可编程只读存储器(EPROM),可编程只读存储器(PROM),只读存储器(ROM),磁存储器,快闪存储器,磁盘或光盘。
处理器62,不仅仅局限于中央处理器(CPU),还可能为图形处理器(GPU)、现场可编辑门阵列(FPGA)、嵌入式神经网络处理器(NPU)或人工智能(AI)芯片等处理芯片。处理器62,与存储器61耦合,执行存储器61所存储的程序,以用于执行上述实施例一至实施例四所示的页面展示方法。
进一步,如图6所示,电子设备还可以包括:通信组件63、电源组件64、音频组件65、显示器66等其它组件。图6中仅示意性给出部分组件,并不意味着电子设备只包括图6所示组件。
通信组件63被配置为便于电子设备和其他设备之间有线或无线方式的通信。电子设备可以接入基于通信标准的无线网络,如WiFi,2G,3G,4G或5G,或它们的组合。在一个示例性实施例中,通信组件63经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中,所述通信组件63还包括近场通信(NFC)模块,以促进短程通信。例如,在NFC模块可基于射频识别(RFID)技术,红外数据协会(IrDA)技术,超宽带(UWB)技术,蓝牙(BT)技术和其他技术来实现。
电源组件64,为电子设备的各种组件提供电力。电源组件64可以包括电源管理系统,一个或多个电源,及其他与为电子设备生成、管理和分配电力相关联的组件。
音频组件65被配置为输出和/或输入音频信号。例如,音频组件65包括一个麦克风(MIC),当电子设备处于操作模式,如呼叫模式、记录模式和语音识别模式时,麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器61或经由通信组件63发送。在一些实施例中,音频组件65还包括一个扬声器,用于输出音频信号。
显示器66包括屏幕,其屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板,屏幕可以被实现为触摸屏,以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界,而且还检测与所述触摸或滑动操作相关的持续时间和压力。
本领域普通技术人员可以理解:实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时实现上述实施例一至实施例四所示的页面展示方法。而前述的存储介质包括:ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是:以上各实施例仅用以说明本申请的技术方案,而非对其限制;尽管参照前述各实施例对本申请进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分或者全部技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。
Claims (14)
1.一种页面展示方法,其特征在于,包括:
根据用户输入的用于指示更新当前页面的展示内容的第一操作指令,获取待展示数据;
针对当前页面中的已展示数据与所述待展示数据进行对比;
根据对比结果,针对所述待展示数据中与所述已展示数据不同的数据,进行渲染计算及展示。
2.根据权利要求1所述的页面展示方法,其特征在于,所述已展示数据与所述待展示数据以持久化数据结构存储。
3.根据权利要求2所述的页面展示方法,其特征在于,所述当前页面的展示内容以具有序列顺序的多个列表项的形式展示,所述方法还包括:
获取与当前展示的列表项在序列顺序上相邻的至少一个未展示的列表项所对应的数据;
针对所述未展示的列表项所对应的数据,进行渲染计算。
4.根据权利要求2所述的页面展示方法,其特征在于,所述当前页面的展示内容以具有序列顺序的多个列表项的形式展示,在所述根据用户输入的用于指示更新当前页面的展示内容的第一操作指令,获取待展示数据之前,所述方法还包括:
检测当前展示的列表项中是否包含位于序列头部的列表项;
当根据检测结果确认所述当前展示的列表项中包含位于序列头部的列表项时,根据用户输入的用于指示向下滚动展示内容的第二操作指令,在所述展示内容的顶部展示刷新组件;
当所述第二操作指令指示向下滚动展示内容达第一预定高度时,获取所述当前页面的更新数据;
确定所述更新数据中的待展示数据,并针对所述更新数据中的待展示数据进行渲染计算及展示。
5.根据权利要求4所述的页面展示方法,其特征在于,所述根据用户输入的用于指示向下滚动展示内容的第二操作指令,在所述展示内容的顶部展示刷新组件,包括:
根据所述第二操作指令指示的向下滚动的距离确定所述刷新组件的刷新组件展示位置;
在所述刷新组件展示位置展示所述刷新组件。
6.根据权利要求2所述的页面展示方法,其特征在于,所述当前页面的展示内容以具有序列顺序的多个列表项的形式展示,在所述根据用户输入的用于指示更新当前页面的展示内容的第一操作指令,获取待展示数据之前,所述方法还包括:
检测当前展示的列表项中是否包含位于序列末端的列表项;
当根据检测结果确认所述当前展示的列表项中包含位于序列末端的列表项时,根据用户输入的用于指示向上滚动展示内容的第三操作指令,在所述展示内容的底部展示加载组件;
当所述第三操作指令指示向上滚动展示内容达第二预定高度时,获取所述当前页面的补充数据;
针对所述补充数据中的至少一部分数据,进行渲染计算及展示。
7.根据权利要求2所述的页面展示方法,其特征在于,所述当前页面的展示内容以具有序列顺序的多个列表项的形式展示,所述方法还包括:
检测当前展示的列表项中是否包含具有展示位置固定属性的列表项,其中,所述展示位置固定属性用于指示所述列表项在所述展示内容中的固定展示位置;
根据用户输入的用于指示向上滚动展示内容的第三操作指令,当所述具有展示位置固定属性的列表项到达所述固定展示位置时,将所述列表项持续展示在所述固定展示位置,直到新的具有固定展示位置属性的列表项到达该位置。
8.根据权利要求2所述的页面展示方法,其特征在于,所述当前页面的展示内容以具有序列顺序的多个列表项的形式展示,所述将渲染计算结果进行缓存,包括:
将所述列表项所对应的数据作为缓存关键字,将所述列表项的位置信息作为值,进行缓存。
9.根据权利要求2所述的页面展示方法,其特征在于,在所述根据用户输入的用于指示更新当前页面的展示内容的第一操作指令,获取待展示数据之前,所述方法还包括:
检测用户对当前页面进行操作的时长;
当根据检测结果确认所述用户对当前页面进行操作的时长大于第一预定时间阈值时,根据用户输入的用于指示向下滚动展示内容的第二操作指令或者指示向上滚动展示内容的第三操作指令,获取所述当前页面的更新数据;
确定所述更新数据中的待展示数据,并针对所述更新数据中的待展示数据进行渲染计算及展示。
10.一种页面展示方法,其特征在于,包括:
根据用户输入的用于指示更新当前页面的展示内容的第一操作指令,获取当前页面的页面数据中的待展示数据,其中,所述当前页面的页面数据被存储为树状数据结构中的各个节点;
针对当前页面中的已展示数据在所述树状数据结构中对应的节点与所述待展示数据在所述树状数据结构中对应的节点进行对比;
根据对比结果,针对未展示的所述节点所对应的数据,进行渲染计算及展示。
11.根据权利要求10所述的页面展示方法,其特征在于,所述当前页面的页面数据被存储为文档对象模型结构。
12.一种页面展示装置,其特征在于,包括:
第一获取模块,用于根据用户输入的用于指示更新当前页面的展示内容的第一操作指令,获取待展示数据;
对比模块,用于针对当前页面的已展示数据与所述待展示数据进行对比;
渲染模块,用于根据所述对比模块的对比结果,针对所述待展示数据中与所述已展示数据不同的数据,进行渲染计算及展示。
13.一种电子设备,其特征在于,包括:
存储器,用于存储程序;
处理器,用于运行所述存储器中存储的所述程序,以用于执行如权利要求1至10中任一权利要求所述的页面展示方法。
14.一种计算机可读存储介质,在所述计算机可读存储介质上存储有计算机程序,所述程序被执行时以实现如权利要求1至10中任一权利要求所述的页面展示方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010163399.0A CN113378084A (zh) | 2020-03-10 | 2020-03-10 | 页面展示方法和装置、电子设备以及计算机可读存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010163399.0A CN113378084A (zh) | 2020-03-10 | 2020-03-10 | 页面展示方法和装置、电子设备以及计算机可读存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN113378084A true CN113378084A (zh) | 2021-09-10 |
Family
ID=77569043
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010163399.0A Pending CN113378084A (zh) | 2020-03-10 | 2020-03-10 | 页面展示方法和装置、电子设备以及计算机可读存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113378084A (zh) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114253650A (zh) * | 2021-12-27 | 2022-03-29 | 中国农业银行股份有限公司 | 一种展示组件过渡方法、装置、设备及存储介质 |
CN114357343A (zh) * | 2021-11-30 | 2022-04-15 | 中科大数据研究院 | 一种网页数据处理方法、装置、设备及存储介质 |
-
2020
- 2020-03-10 CN CN202010163399.0A patent/CN113378084A/zh active Pending
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114357343A (zh) * | 2021-11-30 | 2022-04-15 | 中科大数据研究院 | 一种网页数据处理方法、装置、设备及存储介质 |
CN114253650A (zh) * | 2021-12-27 | 2022-03-29 | 中国农业银行股份有限公司 | 一种展示组件过渡方法、装置、设备及存储介质 |
CN114253650B (zh) * | 2021-12-27 | 2024-05-14 | 中国农业银行股份有限公司 | 一种展示组件过渡方法、装置、设备及存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US8395643B2 (en) | Motion-based data review and zoom | |
US8881055B1 (en) | HTML pop-up control | |
US20170169001A1 (en) | Combining server-side and client-side user interface elements | |
CA2818406C (en) | Multi-mode web browsing | |
US8549391B2 (en) | System and method for tagging data | |
US20110252302A1 (en) | Fitting network content onto a reduced-size screen | |
US10169481B2 (en) | Method for intelligent web reference preloading based on user behavior prediction | |
US8949707B2 (en) | Adaptive document displaying apparatus and method | |
US9535511B2 (en) | Character input device | |
KR101952171B1 (ko) | 전자기기 및 그의 웹 히스토리 표시 방법 | |
US20080301555A1 (en) | System and method for providing animated browser thumbnails | |
US8959432B2 (en) | Utilizing document structure for animated pagination | |
US20130080871A1 (en) | Method for retrieving a representation of an annotated web document, associated computer program and electronic device | |
CN112988006A (zh) | 显示方法、装置、电子设备和存储介质 | |
CN113378084A (zh) | 页面展示方法和装置、电子设备以及计算机可读存储介质 | |
CN115698987A (zh) | 侧边栏搜索窗格 | |
CN113238688B (zh) | 表格展示方法、装置、设备及介质 | |
US20120105455A1 (en) | Utilizing document structure for animated pagination | |
Garcia-Lopez et al. | Comparing zooming methods in mobile devices: effectiveness, efficiency, and user satisfaction in touch and nontouch smartphones | |
CN106874387B (zh) | 一种自适应html滚屏展示实时信息的方法 | |
CN116821534A (zh) | 基于滚动加载定位网页页面的方法和系统 | |
CN115640093A (zh) | 一种页面渲染方法、装置、电子设备及存储介质 | |
CN114626332A (zh) | 内容展示方法、装置和电子设备 | |
CN112214972A (zh) | 一种文章处理方法、装置、设备及计算机可读存储介质 | |
JP5849003B2 (ja) | 表示装置、携帯端末、表示方法および表示プログラム |
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 | ||
TA01 | Transfer of patent application right |
Effective date of registration: 20240322 Address after: # 01-21, Lai Zan Da Building 1, 51 Belarusian Road, Singapore Applicant after: Alibaba Singapore Holdings Ltd. Country or region after: Singapore Address before: A four-storey 847 mailbox in Grand Cayman Capital Building, British Cayman Islands Applicant before: ALIBABA GROUP HOLDING Ltd. Country or region before: Cayman Islands |
|
TA01 | Transfer of patent application right |