CN113434138A - 信息显示方法、装置和电子设备 - Google Patents

Abstract

本发明提供了一种信息显示方法、装置和电子设备；其中，该方法包括：响应于页面滚动事件，从信息标识组中查询信息页面滚动后，信息显示区域中显示的第二信息集合中的信息标识；确定第二信息集合相对于第一信息集合的变化信息标识；基于变化信息标识，处理第一信息集合中信息的DOM对象，得到第二信息集合中信息的DOM对象；在信息显示区域显示第二信息集合。该方式通过设置信息标识组，可以查找出在页面滚动事件前后发生变化的信息标识，进而基于变化的信息标识对DOM对象进行操作，降低了页面滚动时对DOM对象的操作量，降低了应用软件的性能开销，使用户在浏览页面时，滚动页面时更加流畅，提高了页面滚动的顺延性。

Description

信息显示方法、装置和电子设备

技术领域

本发明涉及前端交互技术领域，尤其是涉及一种信息显示方法、装置和电子设备。

背景技术

随着互联网技术的发展，用户可以通过终端设备浏览各类信息页面。例如，通过APP(Application，应用程序)或浏览器等应用软件浏览购物产品、新闻资讯等。用户浏览信息页面时，可以滚动页面获取新的信息，滚动页面的操作可以触发终端设备从服务器加载新的信息数据；加载到新的信息数据之后，终端设备上的应用软件内部需要根据页面滚动的距离确定新的显示页面包含的信息数据，进而增加新的信息数据的DOM(DocumentObject Model，文档对象模型)对象，同时，也可以删除在滚动页面之前旧的显示页面上的信息数据的DOM对象。当用户执行的滚动页面操作较多时，需要反复多次执行新增DOM对象及删除DOM对象的操作，对应用软件产生了较大的性能开销，会影响应用软件的页面执行性能和渲染性能，导致用户在浏览页面时出现页面卡顿或抖动的现象，降低了用户的体验感。

发明内容

有鉴于此，本发明的目的在于提供一种信息显示方法、装置和电子设备，以降低页面滚动时对DOM对象的操作量，从而降低应用软件的性能开销，提高页面滚动的顺延性，提高用户的体验感。

第一方面，本发明实施例提供了一种信息显示方法，通过终端设备提供一图形用户界面，图形用户界面中包括信息显示区域；信息显示区域用于滚动显示信息页面；在初始状态下，信息显示区域中显示信息页面中的第一信息集合；方法包括：响应于页面滚动事件，从预设的信息标识组中查询信息页面滚动后，信息显示区域中显示的第二信息集合中的信息标识；其中，信息标识组中包括按照显示顺序排列的多个信息的信息标识；基于第二信息集合中的信息标识以及第一信息集合，确定第二信息集合相对于第一信息集合的变化信息标识；基于变化信息标识，处理第一信息集合中信息的DOM对象，得到第二信息集合中信息的DOM对象；基于第二信息集合中信息的DOM对象，在信息显示区域显示第二信息集合。

进一步地，上述响应于页面滚动事件，从预设的信息标识组中查询信息页面滚动后，信息显示区域中显示的第二信息集合中的信息标识的步骤，包括：响应于页面滚动事件，确定信息页面的页面滚动距离；基于页面滚动距离，以及信息页面中单行信息的行高，确定信息页面滚动后，信息显示区域中的信息变化量；在信息标识组中，从第一信息集合中的信息标识开始，基于信息变化量查询得到第二信息集合中的信息标识。

进一步地，上述信息标识组中预设有滑动窗口；在初始状态下，滑动窗口中包含的信息标识为第一信息集合中的信息标识；在信息标识组中，从第一信息集合中的信息标识开始，基于信息变化量查询得到第二信息集合中的信息标识的步骤，包括：在信息标识组中，从第一信息集合中的信息标识开始，控制预设的滑动窗口，沿着显示顺序移动信息变化量大小的信息标识，将滑动窗口移动后包含的信息标识，确定为第二信息集合中的信息标识。

进一步地，上述响应于页面滚动事件，从预设的信息标识组中查询信息页面滚动后，信息显示区域中显示的第二信息集合中的信息标识的步骤之后，上述方法还包括：如果第二信息集合中的信息标识中，包括信息标识组中指定位置上的信息标识，在信息标识组的尾部添加第一数量的信息标识；从服务器中加载第一数量的信息标识所对应的信息数据。

进一步地，上述响应于页面滚动事件，从预设的信息标识组中查询信息页面滚动后，信息显示区域中显示的第二信息集合中的信息标识的步骤，包括：响应于页面滚动事件，确定页面滚动事件的触发时间，与上一次页面滚动事件的触发时间之间的时间差；如果时间差大于预设的时间差阈值，执行从预设的信息标识组中查询信息页面滚动后，信息显示区域中显示的第二信息集合中的信息标识的步骤。

进一步地，上述变化信息标识包括：仅存在于第一信息集合或第二信息集合中的信息标识；上述基于变化信息标识，处理第一信息集合中信息的DOM对象，得到第二信息集合中信息的DOM对象的步骤，包括：在信息页面的HTML数据中，删除仅存在于第一信息集合中的信息标识所对应信息的DOM对象，新增仅存在于第二信息集合中的信息标识所对应信息的DOM对象。

进一步地，上述基于第二信息集合中信息的DOM对象，在信息显示区域显示第二信息集合的步骤，包括：渲染第二信息集合中信息的DOM对象，得到包含第二信息集合的第一页面内容，在信息显示区域显示第一页面内容；其中，在第一页面内容中，第二信息集合中的首个信息与信息显示区域的第一区域边对齐，且首个信息完整显示在信息显示区域中；基于页面滚动事件对应的页面滚动距离，确定首个信息相对于第一区域边的偏移距离；如果偏移距离大于零，生成第一图层，在第一图层渲染第一页面内容偏移上述偏移距离后的第二页面内容，在信息显示区域显示第二页面内容；其中，第一图层与信息显示区域显示的第一页面内容所在的图层不同；在第二页面内容中，第二信息集合中的首个信息部分的显示在信息显示区域中。

进一步地，上述在第一图层渲染第一页面内容偏移上述偏移距离后的第二页面内容，在信息显示区域显示第二页面内容的步骤，包括：通过矩阵变换的方式，将第一页面内容中第二信息集合中每个信息的DOM对象的对象图像显示在第一图层中；控制第二信息集合中每个信息的DOM对象的对象图像，向第一区域边移动偏移距离，得到第二页面内容；在信息显示区域中，控制第二页面内容覆盖第一页面内容，显示第二页面内容。

第二方面，本发明实施例提供了一种信息显示装置，通过终端设备提供一图形用户界面，图形用户界面中包括信息显示区域；信息显示区域用于滚动显示信息页面；在初始状态下，信息显示区域中显示信息页面中的第一信息集合；装置包括：查询模块，用于响应于页面滚动事件，从预设的信息标识组中查询信息页面滚动后，信息显示区域中显示的第二信息集合中的信息标识；其中，信息标识组中包括按照显示顺序排列的多个信息的信息标识；确定模块，用于基于第二信息集合中的信息标识以及第一信息集合，确定第二信息集合相对于第一信息集合的变化信息标识；显示模块，用于基于变化信息标识，处理第一信息集合中信息的DOM对象，得到第二信息集合中信息的DOM对象；基于第二信息集合中信息的DOM对象，在信息显示区域显示第二信息集合。

第三方面，本发明实施例提供了一种电子设备，包括处理器和存储器，存储器存储有能够被处理器执行的机器可执行指令，处理器执行机器可执行指令以实现上述信息显示方法。

第四方面，本发明实施例提供了一种机器可读存储介质，机器可读存储介质存储有机器可执行指令，机器可执行指令在被处理器调用和执行时，机器可执行指令促使处理器实现上述信息显示方法。

本发明实施例带来了以下有益效果：

上述信息显示方法、装置和电子设备，在初始状态下，信息显示区域中显示信息页面中的第一信息集合；响应于页面滚动事件，从预设的信息标识组中查询信息页面滚动后，信息显示区域中显示的第二信息集合中的信息标识；基于第二信息集合中的信息标识以及第一信息集合，确定第二信息集合相对于第一信息集合的变化信息标识；基于变化信息标识，处理第一信息集合中信息的DOM对象，得到第二信息集合中信息的DOM对象；基于第二信息集合中信息的DOM对象，在信息显示区域显示第二信息集合。该方式中，通过设置信息标识组，可以查找出在页面滚动事件前后，发生变化的信息标识，进而基于变化的信息标识对DOM对象进行操作，该方式降低了页面滚动时，对DOM对象的操作量，降低了应用软件的性能开销，也减小了对应用软件的页面执行性能和渲染性能的影响，使用户在浏览页面时，滚动页面时更加流畅，提高了页面滚动的顺延性，提高了用户的体验感。

本发明的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种信息显示方法的流程图；

图2为本发明实施例提供的一种信息页面和信息显示区域的示意图；

图3为本发明实施例提供的一种信息标识组和滑动窗口的示意图；

图4为本发明实施例提供的一种信息显示装置的结构示意图；

图5为本发明实施例提供的一种电子设备的示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

首先，对本申请涉及的名词进行介绍：

DOM：文档对象模型，指W3C(World Wide Web Consortium，万维网联盟)组织推荐的处理可扩展置标语言的标准编程接口。DOM是一种与平台和语言无关的应用程序接口，可动态访问程序和脚本，更新其内容、结构和文档的风格。

以线上购物场景为例，购物网站或购物APP需要展示大量的产品数据，这些数据具有数据量大且实时直观的特点，因此，浏览器或APP等应用软件需要支持大数据量且无法分页加载数据的数据展示需求。当用户滚动页面时可能触发从服务器获取新的数据；此时，页面对应的HTML(Hyper Text Markup Language，超文本标记语言)文档中，DOM对象会不断增加，导致HTML文档数据量庞大，还会导致应用软件的JavaScript执行线程和GUI(GraphicalUser Interface,图形用户界面)渲染线程不断进行切换和通讯，从而影响页面执行性能和渲染性能，当用户刷新页面时，易出现页面卡顿、页面上的数据显示抖动等情况。

相关技术中，用户滚动页面时，根据页面的滚动距离确定新的显示页面中显示的数据，加载到数据后，增加新的显示页面中显示的数据的DOM对象，再对这些DOM对象进行渲染处理；同时，删除滚动页面之前，旧的显示页面中显示的数据的DOM地对象。该方式可以使DOM对象的数量保持在一定的范围内。

但是该方式也存在诸多缺点，例如，随着页面的不断滚动，需要反复针对DOM对象进行新增和删除操作，删除DOM操作本身也带来了额外的性能开销，增加了DOM操作次数，所以难以有效降低展示数据的应用软件的性能开销。另外，当滚动距离较小时，新旧显示页面之间存在重复的数据，对重复的数据的DOM对象删除后，再新增DOM对象，再重复渲染，占用了应用软件的GUI渲染进程资源。同时，上述方式会产生较多的中间变量，这些中间变量如果不能在短时间内得到回收，大量的中间变量在内存中聚集，则可能导致内存泄露。

综上，相关技术中在大数据量的信息显示过程中存在诸多问题，对显示信息应用软件产生了较大的性能开销，会影响应用软件的页面执行性能和渲染性能，导致用户在浏览页面时出现页面卡顿或抖动的现象，降低了用户的体验感。

基于此，本发明实施例提供的一种信息显示方法、装置和电子设备，该技术可以应用于浏览器、APP或其他应用软件中，尤其可以应用于大数据量且无法分页加载数据的数据信息展示需求的场景中。

在本公开其中一种实施例中的信息显示方法，可以运行于终端设备或者是服务器。其中，终端设备可以为本地终端设备。当信息显示方法运行于服务器时，该方法则可以基于云交互系统来实现与执行，其中，云交互系统包括服务器和客户端设备。

在一可选的实施方式中，云交互系统下可以运行各种云应用，例如：云浏览器。在云浏览器的运行模式下，浏览器程序的运行主体和浏览器画面呈现主体是分离的，信息显示方法的储存与运行是在云浏览器的服务器上完成的，客户端设备的作用用于数据的接收、发送以及浏览器画面的呈现，举例而言，客户端设备可以是靠近用户侧的具有数据传输功能的显示设备，如，移动终端、电视机、计算机、掌上电脑等；但是进行信息处理的终端设备为云端的云浏览器服务器。浏览器在显示信息时，玩家操作客户端设备向云浏览器服务器发送操作指令，云浏览器服务器根据操作指令显示信息，将信息画面等数据进行编码压缩，通过网络返回客户端设备，最后，通过客户端设备进行解码并输出信息画面。

在一可选的实施方式中，终端设备可以为本地终端设备。以浏览器为例，本地终端设备存储有浏览器程序并用于呈现信息画面。本地终端设备用于通过图形用户界面与用户进行交互，即，常规的通过电子设备下载安装浏览器程序并运行。该本地终端设备将图形用户界面提供给用户的方式可以包括多种，例如，可以渲染显示在终端的显示屏上，或者，通过全息投影提供给玩家。举例而言，本地终端设备可以包括显示屏和处理器，该显示屏用于呈现图形用户界面，该图形用户界面包括浏览器画面，该处理器用于运行该浏览器、生成图形用户界面以及控制图形用户界面在显示屏上的显示。

在一种可能的实施方式中，本发明实施例提供了一种信息显示方法，通过终端设备提供一图形用户界面，其中，该终端设备可以是前述提到的本地终端设备，也可以是前述提到的云交互系统中的客户端设备。通过该终端设备提供一图形用户界面，该图形用户界面中包括信息显示区域；信息显示区域用于滚动显示信息页面；在初始状态下，信息显示区域中显示信息页面中的第一信息集合。

上述信息显示区域的区域面积通常有限，仅能同时显示指定数量的信息。用户查看完当前显示的信息后，可以在信息显示区域执行滑动操作，从而对信息显示区域中的信息页面向特定方向滚动，以查看除了当前显示的信息以外的其他信息。具体的，用户可以在信息显示区域执行触控滑动操作，或者拖动该区域对应的滚动条控件，从而实现页面的滚动。

参见图1所示的一种信息显示方法的流程图，该方法包括如下步骤：

步骤S102，响应于页面滚动事件，从预设的信息标识组中查询信息页面滚动后，信息显示区域中显示的第二信息集合中的信息标识；其中，信息标识组中包括按照显示顺序排列的多个信息的信息标识；

在上述页面滚动事件发生之前，信息显示区域显示信息页面中的第一信息集合，即上述初始状态，该页面滚动事件可以触发该初始状态消失。第一信息集合可以包括一个或多个信息，例如，上述信息页面中可以以列表的形式展示信息，例如，一行中展示一个或多个信息。第一信息集合可以包括多个商品信息，多个新闻资讯信息。上述页面滚动事件可以通过多种方式触发，例如，用户在信息显示区域中显示的信息页面上执行滑动触控操作，拖动信息页面的滚动控件，或者触发信息刷新控件等。页面滚动事件触发后，信息显示区域中的信息页面需要向特定方向移动，例如向上或向下移动，因而显示的信息也会发生变化。

在本实施例中，预先设置信息标识组，该信息标识组包括多个信息的信息标识；信息标识与信息一一对应。信息标识可以为信息的某一个特定属性，也可以是为信息分配的标识符号。信息标识组中的各个信息标识的排列顺序，与信息页面中各个信息的排列顺序相匹配；具体的，在页面朝着特定方向滚动的过程中，优先显示的信息，其信息标识排列在信息标识组中较为靠前的位置。

触发页面滚动事件后，信息显示区域中显示的信息通常会发生变化。在页面滚动事件发生之前，信息显示区域显示第一信息集合，在页面滚动事件发生之后，信息显示区域显示第二信息集合；根据页面滚动的方向，以第一信息集合中的信息标识为基准，沿着特定的方向查找第二信息集合中的信息标识。例如，页面向下滚动，滚动了一个信息的显示位置，此时，以第一信息集合中的信息标识为基准，向后方移动一个信息，同时删除第一信息集合中原来的第一个信息标识，此时，即可得到第二信息集合中的信息标识。在实际实现时，可以基于页面滚动距离，以第一信息集合中的信息标识为基准，在信息标识组中查询第二信息集合中的信息标识，当页面滚动距离较长时，第二信息集合中的信息标识与第一信息集合中的信息标识完全不同；当页面滚动距离较短时，第二信息集合中的信息标识与第一信息集合中的信息标识部分相同。

步骤S104，基于第二信息集合中的信息标识以及第一信息集合，确定第二信息集合相对于第一信息集合的变化信息标识；

获取第一信息集合中的信息标识，将第二信息集合中的每个信息标识，与第一信息集合中的信息标识进行比对，将仅存在于第二信息集合中的信息标识，确定为上述变化信息标识。当页面滚动距离较短时，第二信息集合中的部分信息标识为变化信息标识，当页面滚动距离较长时，第二信息集合中的全部信息标识均为变化信息标识。

步骤S106，基于变化信息标识，处理第一信息集合中信息的DOM对象，得到第二信息集合中信息的DOM对象；基于第二信息集合中信息的DOM对象，在信息显示区域显示第二信息集合。

相关技术中，页面滚动事件触发后，会在信息页面的HTML文档中删除第一信息集合中信息的DOM对象，然后在HTML文档中新增第二信息集合中信息的DOM对象，并对新增的DOM对象进行渲染，从而显示在信息页面上。如果页面显示区域中可以同时显示10个信息，则页面滚动事件触发后，需要删除10个DOM对象，再新增10个DOM对象，并对新增的10个DOM对象进行渲染。

而本实施例中，首先设置信息标识组，通过该信息标识组找出页面滚动事件前后，发生变化的信息标识，然后再对HTML文档中的相关信息的DOM对象进行操作处理，该方式不需要对第一信息集合和第二信息集合中相同的信息的DOM对象进行删除和新增的处理，降低了针对DOM对象的操作次数。具体的，当页面滚动后，仅移动了一个信息的位置距离，此时，仅需要删除第一信息集合中的第一个DOM对象，并在最后一个DOM对象之后新增新的信息的DOM对象，对新的信息的DOM对象进行渲染并显示，其他DOM对象予以保留，无需任何操作。

上述信息显示方法中，在初始状态下，信息显示区域中显示信息页面中的第一信息集合；响应于页面滚动事件，从预设的信息标识组中查询信息页面滚动后，信息显示区域中显示的第二信息集合中的信息标识；基于第二信息集合中的信息标识以及第一信息集合，确定第二信息集合相对于第一信息集合的变化信息标识；基于变化信息标识，处理第一信息集合中信息的DOM对象，得到第二信息集合中信息的DOM对象；基于第二信息集合中信息的DOM对象，在信息显示区域显示第二信息集合。该方式中，通过设置信息标识组，可以查找出在页面滚动事件前后，发生变化的信息标识，进而基于变化的信息标识对DOM对象进行操作，该方式降低了页面滚动时，对DOM对象的操作量，降低了应用软件的性能开销，也减小了对应用软件的页面执行性能和渲染性能的影响，使用户在浏览页面时，滚动页面时更加流畅，提高了页面滚动的顺延性，提高了用户的体验感。

下述实施例具体说明查询第二信息集合中的信息标识的实现方式。响应于页面滚动事件，确定信息页面的页面滚动距离；基于页面滚动距离，以及信息页面中单行信息的行高，确定信息页面滚动后，信息显示区域中的信息变化量；在信息标识组中，从第一信息集合中的信息标识开始，基于信息变化量查询得到第二信息集合中的信息标识。

为了实现信息页面的滚动，通常在图形用户界面中设置一个滚动容器，通过该滚动容器显示信息页面，并在接收到页面滚动事件后，滚动显示信息页面。上述信息显示区域即该滚动容器的容器显示区域，也可以称为容器可视区域。上述页面滚动距离，可以理解为容器显示区域的顶部到容器实体顶部的距离。假设在初始状态下，位于容器显示区域的顶部的页面位置为D1，当触发页面滚动事件后，页面位置D1发生变化，假设变化后的位置为D2，此时页面滚动距离等于D1与D2的差值。在浏览器中，使用scrollTop方法可以得到页面滚动距离。

在信息页面中，通常以列表的形式展示各条信息，在上下方向滚动的滚动容器中，每行信息占据一定的行高，每个信息可以有一列或多列信息。假设信息显示区域的高度为H1，每行信息的行高为H2，且H1>H2，则信息显示区域可同时显示的信息行数为C＝Math.ceil(H1/H2)；其中，Math.ceil为向上取整的计算方式，由于列表在滚动容器中为上下滚动，在信息显示区域的顶部，可能信息仅一部分显示在信息显示区域之内，另一部分在信息显示区域以外，所以，需要采用向上取整的方式，得到最大的可显示的信息行数。上述H1和H2，可以通过document.querySelector()方法得到。

为了便于理解，图2示出了信息页面和信息显示区域的示意图。信息页面包含L行信息行，随着信息数据的不断加载，L的值不断增加，直至加载完全部的信息数据。信息行也可以称为元素。信息页面对应的区域可以称为可滚动区域。信息显示区域显示信息页面中的部分信息行，例如在图2中，信息显示区域中显示信息行7至信息行13，因此，信息行7作为起始索引，信息样14作为末尾索引；在信息行7的基础上，当前信息页面的起始偏移为6行，即信息行1至信息行6，当前信息页面的末尾偏移为L-14，即信息行15至信息行L。

在初始状态下，位于信息显示区域的顶部的信息行定义为第0行信息，通过计算D/H2可以得到页面滚动距离为D时，信息显示区域的顶部显示的是第几行信息。由于列表在滚动容器中为上下滚动，在信息显示区域的顶部，可能信息仅一部分显示在信息显示区域之内，另一部分在信息显示区域以外，所以，需要采用向下取整的方式计算，页面滚动距离为D时，信息显示区域的顶部显示的第N行信息，N＝Math.floor(D/H2)-1。Math.floor为向下取整的计算方式，这里的N，即上述信息页面滚动后，信息显示区域中的信息变化量。

当页面滚动后，第N行信息显示在信息显示区域的顶部，此时，信息显示区域中同时显示的信息为第N行至第N+C行的信息。由于页面滚动距离为D，则在页面滚动之前，信息显示区域中同时显示的信息为第0行至第C行的信息；即上述第一信息集合中的信息标识为第0行信息的信息标识，至第C行信息的信息标识，基于信息变化量N，在信息标识组中沿着特定的方向移动N，即可得到第二信息集合中的信息标识，即第N行信息的信息标识至第N+C行信息的信息标识。

为了便于查询第二信息集合，上述信息标识组中预设有滑动窗口；在初始状态下，滑动窗口中包含的信息标识为第一信息集合中的信息标识；在信息标识组中，从第一信息集合中的信息标识开始，控制预设的滑动窗口，沿着显示顺序移动信息变化量大小的信息标识，将滑动窗口移动后包含的信息标识，确定为第二信息集合中的信息标识。

具体的，将上述滑动窗口记为R，在初始状态下，R＝[0,C]，即滑动窗口中包括第一信息集合中的信息标识，控制滑动窗口在信息标识组中移动，由上述可知，信息变化量为N，则滑动窗口移动N，此时R＝[N,N+C]，即滑动窗口中包括第一信息集合中的信息标识。滑动窗口的移动方向与信息的显示顺序相关，该信息顺序与滚动方向相关；例如，当页面向上滚动时，沿着向下的方向确定信息的显示顺序，越靠近信息显示区域的信息越优先显示。上述信息变化量N通常大于或等于零，且N+C的区域小于信息页面中信息的总行数。通过滑动窗口的方式查询第二信息集合中的信息标识，便于操作，且易于实现。

信息页面上的信息需要预先加载，例如，终端设备从服务器中获取信息数据，或者从存储设备将数据加载至内存等。当已加载的数据将要显示完时，可以继续从服务器或存储设备中加载后续的数据。在实际实现时，用户执行下拉操作，可以触发信息加载流程。具体到本实施例中，信息标识组中的信息标识对应的信息，均已完成加载，当页面滚动事件触发后，从信息标识组中获取第二信息集合中的信息标识，基于第二信息集合中的信息标识对应的已加载的信息数据，生成DOM对象并渲染显示。

但是，信息标识组中的信息标识数量是有限的，如果第二信息集合中的信息标识已经接近信息标识组的末尾，此时需要继续加载信息数据。具体的，如果第二信息集合中的信息标识中，包括信息标识组中指定位置上的信息标识，在信息标识组的尾部添加第一数量的信息标识；从服务器中加载第一数量的信息标识所对应的信息数据。

上述指定位置可以为接近信息标识组末尾的某个特定的位置，例如，该指定位置可以为信息标识组中最后一个位置，或者信息标识组中倒数第K个位置，K为大于一的整数。作为示例，当第二信息集合中的信息标识中，包括信息标识组中倒数第三个位置上的信息标识，则在信息标识组的尾部添加第一数量的信息标识；该第一数量可以预先设置，例如十个、二十个等；单后再从服务器加载第一数量的信息标识所对应的信息数据，每个信息数据对应一个信息标识。

为了便于理解上述实施例，图3示出了一个信息标识组和滑动窗口的示例。在初始状态下，该信息标识组中包括10个信息标识，从信息标识0至信息标识9，滑动窗口包括信息标识0至信息标识4共5个信息标识。发生一次页面滚动实际后，滑动窗口中包括信息标识1至信息标识5共5个信息标识，滑动窗口中信息标识的总量不变，部分信息标识发生变化。依次类推，当第四次触发页面滚动时间后，滑动窗口中包括信息标识7，该信息标识7是信息标识组中倒数第三个位置，预先设置倒数第三个位置为指定位置，此时，第二信息集合中的信息标识包括了信息标识组中指定位置上的信息标识，需要继续加载信息数据。信息标识组中最后一个信息标识的后面又增加了10个信息标识，即图3中设置有下划线的信息标识10至19，从而加载这10个信息标识对应的信息数据。

在实际实现时，上述信息标识组可以通过多种形式实现，例如，JS对象中的数组，通过数组保存信息标识，可以使信息标识具有顺序性和可控性，可以通过数组的索引值快速对信息标识进行增删改查，提高对信息标识查询、新增等操作的效率。

上述方式中，使用信息标识组代替了针对DOM对象的操作，所有的计算都在信息标识组中进行，将相关技术中针对DOM对象计算转移到信息标识组中处理，通过对比前后R的差异计算出变化信息标识，再将变化信息标志反馈到DOM上，对DOM直接渲染。而相关技术中，全部以DOM对象作为目标对象做操作，每次都先删除原有DOM，再根据最新的数据重新插入DOM，虽然DOM数量不变，但整体过程一直在操作DOM，导致JS执行线程与GUI渲染线程不断地通讯与切换，增加了浏览器的负担。

本实施例中，用信息标识组模拟下拉加载，使得这个过程只有一次的JS执行线程与GUI渲染线程的通讯与切换。因为使用信息标识组处理变化信息标识，所以由JS执行线程单独处理，当得出变化信息标识时，再切换到GUI渲染线程上生成变化后的最终的DOM。因此在一次事件中将多次的线程通讯与切换变成只有一次，那么就可大大提高浏览器的线程执行效率从而提升执行性能。

用户在浏览信息页面的过程中，可能会频繁的滚动页面，从而频繁的触发页面滚动事件，如果每次页面滚动事件被触发后，都响应该页面滚动事件并执行本实施例中的信息显示方法，则会加重浏览器或应用程序的负担，导致页面滚动卡顿频繁。基于此，在下述实施例中，响应于页面滚动事件，确定页面滚动事件的触发时间，与上一次页面滚动事件的触发时间之间的时间差；如果时间差大于预设的时间差阈值，执行从预设的信息标识组中查询信息页面滚动后，信息显示区域中显示的第二信息集合中的信息标识的步骤。

上述时间差阈值可以预先设置，例如300毫秒、500毫秒等；以500毫秒为例，可以在500毫秒之内最多响应一次页面滚动事件，如果两个页面滚动事件的触发时间差小于或等于500毫秒，即时间差阈值，则可以针对第二个页面滚动事件不予响应。本实施例中的信息显示方法可以采用一事件处理函数实现，通过设置时间差阈值，可以控制事件处理函数的调用频率，降低浏览器的运算负担。

上述方式中，通过对页面滚动事件的响应进行开源节流，可有效控制页面滚动事件的响应频率，降低了应用软件的负担，保证了页面滚动的流畅性和顺延性。同时，通过设置时间差阈值，可以让JS执行线程有效地完成所有信息标识的对比，而不会像相关技术中在短时间内大量操作DOM导致线程出现大量拥堵；毕竟JS是单线程的，有效地控制线程的切换时间有利于页面流畅显示。

下述实施例描述基于变化信息标识处理DOM对象的实现方式。可以理解，上述变化信息标识包括：仅存在于第一信息集合或第二信息集合中的信息标识；其中，仅存在于第一信息集合的信息标识，其对应的信息是在页面滚动事件响应之前，显示在信息显示区域中的信息，在页面滚动事件响应之后，这些信息被滚动至信息显示区域以外。仅存在于第二信息集合的信息标识，其对应的信息是在页面滚动事件响应之前，位于信息显示区域以外的信息，在页面滚动事件响应之后，这些信息被滚动至信息显示区域内。对于同时存在于第一信息集合或第二信息集合中的信息标识，其信息在页面滚动事件响应之前和之后均显示在信息显示区域中，只是显示位置可能发生了变化，因此，同时存在于第一信息集合或第二信息集合中的信息标识不作为变化信息标识。

在信息页面的HTML数据中，删除仅存在于第一信息集合中的信息标识所对应信息的DOM对象，新增仅存在于第二信息集合中的信息标识所对应信息的DOM对象。当页面滚动距离较小时，仅有小部分信息标识为变化信息标识，因而仅有小部分信息对应的DOM对象需要执行操作，降低了针对DOM对象的操作量，在响应一次页面滚动事件中，线程通信与切换仅需要执行一次，可以大大提高应用软件的线程执行效率，进而提升了执行性能。

由于信息行存在一定的高度，在页面滚动过程中，在信息显示区域的顶部和底部，均有可能出现某行信息仅部分显示在信息显示区域，这种部分显示信息的效果需要通过滚动偏移实现。

首先，渲染第二信息集合中信息的DOM对象，得到包含第二信息集合的第一页面内容，在信息显示区域显示第一页面内容；其中，在第一页面内容中，第二信息集合中的首个信息与信息显示区域的第一区域边对齐，且首个信息完整显示在信息显示区域中；该第一页面内容为滚动偏移之前的初始页面，在第一页面内容的基础上，实现滚动偏移。

然后，基于页面滚动事件对应的页面滚动距离，确定首个信息相对于第一区域边的偏移距离；第一区域边可以理解为页面滚动时，页面滚动的方向所向的区域边，例如，大部分信息页面为上下滚动，用户通过向上滑动，使信息页面向上滚动，此时，信息显示区域的顶部边即上述第一区域边。通过对页面滚动距离D与每行信息的行高H2进行取余运算，即可得到偏移距离，即偏移距离S＝D％H2；其中％为取余计算方式。

当S＝0时，说明没有发生偏移，即第二信息集合中的首个信息与信息显示区域的顶部区域边对齐。当S>0时，说明发生了偏移，第二信息集合中的首个信息没有与信息显示区域的顶部区域边对齐，仅部分的显示在信息显示区域。需要说明的是，在信息页面中，可能一个信息行仅显示一个信息，也可能多个信息行显示多个信息，多个信息并列显示在同一行，因此，首个信息部分的显示在信息显示区域时，与首个信息同一行的其他也部分的显示在信息显示区域，即该信息行部分的显示在信息显示区域。

如果上述偏移距离大于零，生成第一图层，在第一图层渲染第一页面内容偏移上述偏移距离后的第二页面内容，在信息显示区域显示第二页面内容；其中，第一图层与信息显示区域显示的第一页面内容所在的图层不同；在第二页面内容中，第二信息集合中的首个信息部分的显示在信息显示区域中。第二页面内容为第一页面内容发生滚动偏移后的页面内容，相对于第一页面内容，第二页面内容的偏移距离为S。第一图层与第一页面内容所在的图层不同，在第一图层渲染第二页面内容时，不影响第一页面内容的显示布局，也不对第一页面内容执行再次渲染等操作处理。

对比而言，在相关技术中，如果偏移距离大于零，需要针对第一页面内容中信息的DOM对象，使用JS声明top为-S，从而实现DON对象的滚动偏移，针对第一页面内容进行滚动偏移处理，影响页面渲染速度。

而在本实施例中，在渲染第二页面内容时，通过矩阵变换的方式，将第一页面内容中第二信息集合中每个信息的DOM对象的对象图像显示在第一图层中；控制第二信息集合中每个信息的DOM对象的对象图像，向第一区域边移动偏移距离，得到第二页面内容；在信息显示区域中，控制第二页面内容覆盖第一页面内容，显示第二页面内容。

在实际实现时，可以对HTML文档中所有的DOM对象声明transform:translate3d(0,-S,0)这条CSS属性，即可开启浏览器的GPU(Graphics Processing Unit，图形处理器)加速功能。DOM对象的对象图像也可以称为DOM对象的视觉效果图像。具体可以通过矩阵变化的方式，将上述第一页面内容中的DOM对象的对象图像，从第一页面内容对应的图层提升到第一图层中。第一页面内容中的DOM对象的对象图像随即被删除，并在第一图层中所有信息对应的DOM对象的对象图像进行偏移。由于在第一图层中操作不影响其他图像的布局，也不对第一页面内容执行再次渲染等操作处理，因而可以提升浏览器的渲染速度。

另外，本实施例中在新的图层中处理滚动偏移的方式，不会产生大量的中间变量，无需占用内存，降低了页面显示过程出现卡顿、抖动的概率，进一步提高了页面显示效果。

对应于上述方法实施例，参见图4所示的一种信息显示装置的结构示意图，通过终端设备提供一图形用户界面，图形用户界面中包括信息显示区域；信息显示区域用于滚动显示信息页面；在初始状态下，信息显示区域中显示信息页面中的第一信息集合；该装置包括：

查询模块40，用于响应于页面滚动事件，从预设的信息标识组中查询信息页面滚动后，信息显示区域中显示的第二信息集合中的信息标识；其中，信息标识组中包括按照显示顺序排列的多个信息的信息标识；

确定模块42，用于基于第二信息集合中的信息标识以及第一信息集合，确定第二信息集合相对于第一信息集合的变化信息标识；

显示模块44，用于基于变化信息标识，处理第一信息集合中信息的DOM对象，得到第二信息集合中信息的DOM对象；基于第二信息集合中信息的DOM对象，在信息显示区域显示第二信息集合。

上述信息显示装置中，在初始状态下，信息显示区域中显示信息页面中的第一信息集合；响应于页面滚动事件，从预设的信息标识组中查询信息页面滚动后，信息显示区域中显示的第二信息集合中的信息标识；基于第二信息集合中的信息标识以及第一信息集合，确定第二信息集合相对于第一信息集合的变化信息标识；基于变化信息标识，处理第一信息集合中信息的DOM对象，得到第二信息集合中信息的DOM对象；基于第二信息集合中信息的DOM对象，在信息显示区域显示第二信息集合。该方式中，通过设置信息标识组，可以查找出在页面滚动事件前后，发生变化的信息标识，进而基于变化的信息标识对DOM对象进行操作，该方式降低了页面滚动时，对DOM对象的操作量，降低了应用软件的性能开销，也减小了对应用软件的页面执行性能和渲染性能的影响，使用户在浏览页面时，滚动页面时更加流畅，提高了页面滚动的顺延性，提高了用户的体验感。

上述查询模块，还用于：响应于页面滚动事件，确定信息页面的页面滚动距离；基于页面滚动距离，以及信息页面中单行信息的行高，确定信息页面滚动后，信息显示区域中的信息变化量；在信息标识组中，从第一信息集合中的信息标识开始，基于信息变化量查询得到第二信息集合中的信息标识。

上述信息标识组中预设有滑动窗口；在初始状态下，滑动窗口中包含的信息标识为第一信息集合中的信息标识；上述查询模块，还用于：在信息标识组中，从第一信息集合中的信息标识开始，控制预设的滑动窗口，沿着显示顺序移动信息变化量大小的信息标识，将滑动窗口移动后包含的信息标识，确定为第二信息集合中的信息标识。

上述装置还包括数据加载模块，用于：如果第二信息集合中的信息标识中，包括信息标识组中指定位置上的信息标识，在信息标识组的尾部添加第一数量的信息标识；从服务器中加载第一数量的信息标识所对应的信息数据。

上述显示模块，还用于：响应于页面滚动事件，确定页面滚动事件的触发时间，与上一次页面滚动事件的触发时间之间的时间差；如果时间差大于预设的时间差阈值，执行从预设的信息标识组中查询信息页面滚动后，信息显示区域中显示的第二信息集合中的信息标识的步骤。

上述变化信息标识包括：仅存在于第一信息集合或第二信息集合中的信息标识；上述显示模块，还用于：在信息页面的HTML数据中，删除仅存在于第一信息集合中的信息标识所对应信息的DOM对象，新增仅存在于第二信息集合中的信息标识所对应信息的DOM对象。

上述显示模块，还用于：渲染第二信息集合中信息的DOM对象，得到包含第二信息集合的第一页面内容，在信息显示区域显示第一页面内容；其中，在第一页面内容中，第二信息集合中的首个信息与信息显示区域的第一区域边对齐，且首个信息完整显示在信息显示区域中；基于页面滚动事件对应的页面滚动距离，确定首个信息相对于第一区域边的偏移距离；如果偏移距离大于零，生成第一图层，在第一图层渲染第一页面内容偏移偏移距离后的第二页面内容，在信息显示区域显示第二页面内容；其中，第一图层与信息显示区域显示的第一页面内容所在的图层不同；在第二页面内容中，第二信息集合中的首个信息部分的显示在信息显示区域中。

上述显示模块，还用于：通过矩阵变换的方式，将第一页面内容中第二信息集合中每个信息的DOM对象的对象图像显示在第一图层中；控制第二信息集合中每个信息的DOM对象的对象图像，向第一区域边移动偏移距离，得到第二页面内容；在信息显示区域中，控制第二页面内容覆盖第一页面内容，显示第二页面内容。

本实施例还提供一种电子设备，包括处理器和存储器，存储器存储有能够被处理器执行的机器可执行指令，处理器执行机器可执行指令以实现上述信息显示方法。该电子设备可以是服务器，也可以是终端设备。

参见图5所示，该电子设备包括处理器100和存储器101，该存储器101存储有能够被处理器100执行的机器可执行指令，该处理器100执行机器可执行指令以实现上述信息显示方法。

进一步地，图5所示的电子设备还包括总线102和通信接口103，处理器100、通信接口103和存储器101通过总线102连接。

其中，存储器101可能包含高速随机存取存储器(RAM，Random Access Memory)，也可能还包括非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。通过至少一个通信接口103(可以是有线或者无线)实现该系统网元与至少一个其他网元之间的通信连接，可以使用互联网，广域网，本地网，城域网等。总线102可以是ISA总线、PCI总线或EISA总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图5中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

处理器100可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器100中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器100可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DigitalSignal Processor，简称DSP)、专用集成电路(Application Specific IntegratedCircuit，简称ASIC)、现场可编程门阵列(Field-Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本发明实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器101，处理器100读取存储器101中的信息，结合其硬件完成前述实施例的方法的步骤。

本实施例还提供一种机器可读存储介质，机器可读存储介质存储有机器可执行指令，机器可执行指令在被处理器调用和执行时，机器可执行指令促使处理器实现上述信息显示方法。

本发明实施例所提供的信息显示方法、装置、电子设备及存储介质的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行前面方法实施例中所述的方法，具体实现可参见方法实施例，在此不再赘述。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

另外，在本发明实施例的描述中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

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

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

最后应说明的是：以上实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (11)

1.一种信息显示方法，其特征在于，通过终端设备提供一图形用户界面，所述图形用户界面中包括信息显示区域；所述信息显示区域用于滚动显示信息页面；在初始状态下，所述信息显示区域中显示所述信息页面中的第一信息集合；所述方法包括：

响应于页面滚动事件，从预设的信息标识组中查询所述信息页面滚动后，所述信息显示区域中显示的第二信息集合中的信息标识；其中，所述信息标识组中包括按照显示顺序排列的多个信息的信息标识；

基于所述第二信息集合中的信息标识以及所述第一信息集合，确定所述第二信息集合相对于所述第一信息集合的变化信息标识；

基于所述变化信息标识，处理所述第一信息集合中信息的DOM对象，得到所述第二信息集合中信息的DOM对象；基于所述第二信息集合中信息的DOM对象，在所述信息显示区域显示所述第二信息集合。

2.根据权利要求1所述的方法，其特征在于，响应于页面滚动事件，从预设的信息标识组中查询所述信息页面滚动后，所述信息显示区域中显示的第二信息集合中的信息标识的步骤，包括：

响应于页面滚动事件，确定所述信息页面的页面滚动距离；

基于所述页面滚动距离，以及所述信息页面中单行信息的行高，确定所述信息页面滚动后，所述信息显示区域中的信息变化量；

在所述信息标识组中，从所述第一信息集合中的信息标识开始，基于所述信息变化量查询得到所述第二信息集合中的信息标识。

3.根据权利要求2所述的方法，其特征在于，所述信息标识组中预设有滑动窗口；在初始状态下，所述滑动窗口中包含的信息标识为所述第一信息集合中的信息标识；

所述在所述信息标识组中，从所述第一信息集合中的信息标识开始，基于所述信息变化量查询得到所述第二信息集合中的信息标识的步骤，包括：

在所述信息标识组中，从所述第一信息集合中的信息标识开始，控制预设的滑动窗口，沿着所述显示顺序移动所述信息变化量大小的信息标识，将所述滑动窗口移动后包含的信息标识，确定为所述第二信息集合中的信息标识。

4.根据权利要求1所述的方法，其特征在于，响应于页面滚动事件，从预设的信息标识组中查询所述信息页面滚动后，所述信息显示区域中显示的第二信息集合中的信息标识的步骤之后，所述方法还包括：

如果所述第二信息集合中的信息标识中，包括所述信息标识组中指定位置上的信息标识，在所述信息标识组的尾部添加第一数量的信息标识；

从服务器中加载所述第一数量的信息标识所对应的信息数据。

5.根据权利要求1所述的方法，其特征在于，响应于页面滚动事件，从预设的信息标识组中查询所述信息页面滚动后，所述信息显示区域中显示的第二信息集合中的信息标识的步骤，包括：

响应于页面滚动事件，确定所述页面滚动事件的触发时间，与上一次页面滚动事件的触发时间之间的时间差；

如果所述时间差大于预设的时间差阈值，执行从预设的信息标识组中查询所述信息页面滚动后，所述信息显示区域中显示的第二信息集合中的信息标识的步骤。

6.根据权利要求1所述的方法，其特征在于，所述变化信息标识包括：仅存在于所述第一信息集合或所述第二信息集合中的信息标识；

所述基于所述变化信息标识，处理所述第一信息集合中信息的DOM对象，得到所述第二信息集合中信息的DOM对象的步骤，包括：

在所述信息页面的HTML数据中，删除仅存在于所述第一信息集合中的信息标识所对应信息的DOM对象，新增仅存在于所述第二信息集合中的信息标识所对应信息的DOM对象。

7.根据权利要求1所述的方法，其特征在于，基于所述第二信息集合中信息的DOM对象，在所述信息显示区域显示所述第二信息集合的步骤，包括：

渲染所述第二信息集合中信息的DOM对象，得到包含所述第二信息集合的第一页面内容，在所述信息显示区域显示所述第一页面内容；其中，在所述第一页面内容中，所述第二信息集合中的首个信息与所述信息显示区域的第一区域边对齐，且所述首个信息完整显示在所述信息显示区域中；

基于所述页面滚动事件对应的页面滚动距离，确定所述首个信息相对于所述第一区域边的偏移距离；

如果所述偏移距离大于零，生成第一图层，在所述第一图层渲染所述第一页面内容偏移所述偏移距离后的第二页面内容，在所述信息显示区域显示所述第二页面内容；其中，所述第一图层与所述信息显示区域显示的第一页面内容所在的图层不同；在所述第二页面内容中，所述第二信息集合中的首个信息部分的显示在所述信息显示区域中。

8.根据权利要求7所述的方法，其特征在于，在所述第一图层渲染所述第一页面内容偏移所述偏移距离后的第二页面内容，在所述信息显示区域显示所述第二页面内容的步骤，包括：

通过矩阵变换的方式，将所述第一页面内容中所述第二信息集合中每个信息的DOM对象的对象图像显示在所述第一图层中；

控制所述第二信息集合中每个信息的DOM对象的对象图像，向所述第一区域边移动所述偏移距离，得到第二页面内容；

在所述信息显示区域中，控制所述第二页面内容覆盖所述第一页面内容，显示所述第二页面内容。

9.一种信息显示装置，其特征在于，通过终端设备提供一图形用户界面，所述图形用户界面中包括信息显示区域；所述信息显示区域用于滚动显示信息页面；在初始状态下，所述信息显示区域中显示所述信息页面中的第一信息集合；所述装置包括：

查询模块，用于响应于页面滚动事件，从预设的信息标识组中查询所述信息页面滚动后，所述信息显示区域中显示的第二信息集合中的信息标识；其中，所述信息标识组中包括按照显示顺序排列的多个信息的信息标识；

确定模块，用于基于所述第二信息集合中的信息标识以及所述第一信息集合，确定所述第二信息集合相对于所述第一信息集合的变化信息标识；

显示模块，用于基于所述变化信息标识，处理所述第一信息集合中信息的DOM对象，得到所述第二信息集合中信息的DOM对象；基于所述第二信息集合中信息的DOM对象，在所述信息显示区域显示所述第二信息集合。

10.一种电子设备，其特征在于，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的机器可执行指令，所述处理器执行所述机器可执行指令以实现权利要求1-8任一项所述的信息显示方法。

11.一种机器可读存储介质，其特征在于，所述机器可读存储介质存储有机器可执行指令，所述机器可执行指令在被处理器调用和执行时，所述机器可执行指令促使所述处理器实现权利要求1-8任一项所述的信息显示方法。

Images