CN110717120B - 一种网页列表显示方法和装置 - Google Patents

Abstract

本发明公开了一种网页列表显示方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：根据网页的滚动距离以及列表数据在所述网页中的显示尺寸，确定滚动距离中的隐列表数据；根据列表数据与DOM对象的对应关系，更改与隐列表数据相应的DOM对象在DOM队列中的位置，并基于待显示列表数据更改DOM对象的文本节点，以通过DOM对象对待显示列表数据进行显示。该实施方式基于固定DOM对象数量、重复利用DOM对象的思想，网页滚动过程中只是更改了DOM对象的位置和相应的文本节点，以有效控制设备内存的使用率，减少解析并渲染页面的时间，从而达到节约内存、提高页面响应速度的目的。

Description

一种网页列表显示方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种网页列表显示方法和装置。

背景技术

在网页上呈现多条数据的形式，称之为列表。当数据量较大或者存在图片等时，会出现网页尺寸超出设备屏幕尺寸、部分数据隐藏在设备屏幕外的情况。用户只有通过上下左右移动界面，才能查看到所隐藏的数据。

现有技术对于列表数据的显示方式，通常是：

网页是通过HTML(Hyper Text Markup Language，超文本标记语言)描述的，服务端动态生成包含全部列表数据的HTML文档，设备浏览器通过对应的URL(Uniform ResourceLocator，统一资源定位符)获取该HTML文档，并将其解释为网页显示出来；

在实现本发明的过程中，发明人发现现有技术至少存在如下问题：设备浏览器一次性解释并渲染多个HTML元素，耗时过长，同时设备内存中DOM对象的数量也多，造成设备内存消耗过大，网页界面响应迟钝的现象。

发明内容

有鉴于此，本发明实施例提供一种网页列表显示方法和装置，至少能够解决现有技术中显示列表数据的内存消耗过大、网页响应速度慢的问题，尤其在设备本身性能较差或者终端内存被其他应用消耗过多的情况下，上述情况表现的更加明显。

为实现上述目的，根据本发明实施例的一个方面，提供了一种网页列表显示方法，包括：

根据网页的滚动距离以及列表数据在所述网页中的显示尺寸，确定滚动距离中的隐列表数据；根据列表数据与DOM对象的对应关系，更改与隐列表数据相应的DOM对象在DOM队列中的位置，并基于待显示列表数据更改DOM对象中的文本节点，以通过DOM对象对待显示列表数据进行显示。

可选的，更改与隐列表数据相应的DOM对象在DOM队列中的位置，并基于待显示列表数据更改DOM对象中的文本节点，以通过DOM对象对待显示列表数据进行显示，包括：

当滚动距离逐渐增大、且是显示尺寸的整数倍时，确定与列表中第一个列表数据相应的第一DOM对象，移动第一DOM对象至DOM队列的末端；确定与第一DOM对象相应、且位于第一列表数据之后的下一列表数据，基于下一列表数据更改第一DOM对象中的文本节点，并通过第一DOM对象对下一列表数据进行显示。

可选的，在确定与第一DOM对象相应、且位于第一列表数据之后的下一列表数据之前，还包括：根据网页的列表数据长度、以及列表中第一个列表数据的标识，确定与第一个列表数据所处区间相邻的下一区间，将处于下一区间的列表数据作为待显示列表数据；其中区间与下一区间的长度相同。

可选的，在根据网页的列表数据长度、以及列表中第一个列表数据的标识，确定与第一个列表数据所处区间相邻的下一区间之前，还包括：根据网页的可视区域高度、页面缩放比例以及列表数据在网页中的显示尺寸，确定网页的列表数据长度。

可选的，更改与隐列表数据相应的DOM对象在DOM队列中的位置，并基于待显示列表数据更改DOM对象中的文本节点，以通过DOM对象对待显示列表数据进行显示，包括：

当滚动距离逐渐减小、且是显示尺寸的整数倍时，确定与列表中最后一个列表数据相应的第二DOM对象，移动第二DOM对象至DOM队列的始端；确定与第二DOM对象相应、且位于最后一个列表数据之前的上一列表数据，基于上一列表数据更改第二DOM对象中的文本节点，并通过第二DOM对象对上一列表数据进行显示。

可选的，还包括：当滚动距离不是显示尺寸的整数倍时，确定滚动距离中的最后一个列表数据未隐藏完全；基于滚动距离，更改DOM队列中的DOM对象与网页始端的间距。

为实现上述目的，根据本发明实施例的另一方面，提供了一种网页列表显示装置，包括：

确定模块，用于根据网页的滚动距离以及列表数据在述网页中的显示尺寸，确定滚动距离中的隐列表数据；

显示模块，用于根据列表数据与DOM对象的对应关系，更改与隐列表数据相应的DOM对象在DOM队列中的位置，并基于待显示列表数据更改DOM对象中的文本节点，以通过DOM对象对待显示列表数据进行显示。

可选的，显示模块，用于：

当滚动距离逐渐增大、且是显示尺寸的整数倍时，确定与列表中第一个列表数据相应的第一DOM对象，移动第一DOM对象至DOM队列的末端；确定与第一DOM对象相应、且位于第一列表数据之后的下一列表数据，基于下一列表数据更改第一DOM对象中的文本节点，并通过第一DOM对象对下一列表数据进行显示。

可选的，显示模块，用于：根据网页的列表数据长度、以及列表中第一个列表数据的标识，确定与第一个列表数据所处区间相邻的下一区间，将处于下一区间的列表数据作为待显示列表数据；其中区间与下一区间的长度相同。

可选的，显示模块，用于：根据网页的可视区域高度、页面缩放比例以及列表数据在网页中的显示尺寸，确定网页的列表数据长度。

可选的，显示模块，用于：当滚动距离逐渐减小、且是显示尺寸的整数倍时，确定与列表中最后一个列表数据相应的第二DOM对象，移动第二DOM对象至DOM队列的始端；确定与第二DOM对象相应、且位于最后一个列表数据之前的上一列表数据，基于上一列表数据更改第二DOM对象中的文本节点，并通过第二DOM对象对上一列表数据进行显示。

可选的，还包括间距更改模块，用于：当滚动距离不是显示尺寸的整数倍时，确定滚动距离中的最后一个列表数据未隐藏完全；基于滚动距离，更改DOM队列中的DOM对象与网页始端的间距。

为实现上述目的，根据本发明实施例的再一方面，提供了一种网页列表显示电子设备。

本发明实施例的电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现上述任一所述的网页列表显示方法。

为实现上述目的，根据本发明实施例的再一方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现上述任一所述的网页列表显示方法。

根据本发明所述提供的方案，上述发明中的一个实施例具有如下优点或有益效果：每一个HTML元素都对应于设备内存中的一个DOM对象，本发明摒弃现有技术思路，保证设备内存中与列表数据相关的DOM数量固定，且页面的滚动只是更改了DOM的位置和文本节点，重复利用DOM，可以降低创建DOM的时间，降低内存消耗，同时提高页面响应速度。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的一种网页列表显示方法的主要流程示意图；

图2是网页的滚动距离中隐列表数据示意图；

图3是根据本发明实施例的一种可选的网页列表显示方法的流程示意图；

图4是向上滚动页面过程中DOM对象位置更改以及内容更改示意图；

图5是根据本发明实施例的另一种可选的网页列表显示方法的流程示意图；

图6是向下滚动页面过程中DOM对象位置更改以及内容更改示意图；

图7是根据本发明实施例的一种网页列表显示装置的主要模块示意图；

图8是本发明实施例可以应用于其中的示例性系统架构图；

图9是适于用来实现本发明实施例的移动设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

需要说明的是，本发明实施例主要适用于通过网页呈现列表数据的场景，主要解决背景技术中“设备屏幕有限，但所要显示的列表数据量又过大，导致需要滚动网页查看隐藏数据”的设备内存消耗和响应速度问题。

在网页列表中，列表中的每一行可以显示一个数据项(比如：姓名)、也可以显示两个甚至多个(比如：姓名，年龄，特长，行业等)，具体根据工作人员设定来执行。本发明均适用于上述情况，但为简化描述，仅以列表中一项仅显示一个数据项(比如：姓名，年龄，特长，行业等)为例进行说明。

另外，需要说明的是，网页所显示的每一条数据(可以是文本、图片等)，是通过HTML元素来定义的。其中HTML元素可由JAVASCRIPT生成，每个HTML元素以开始标签起始、结束标签终止，与HTML元素对象相关联的文本节点是开始标签与结束标签之间的内容。

DOM对象是以层次接口组织的节点(或信息片段)的集合。DOM对象中包含属性接点、元素节点以及文本节点，例如，<p tittle＝”this is a para”>我是文本节点的相关联的文本节点</p>。当DOM对象的位置更改后，其中的属性节点和元素节点都不会发生变化，完全复用，改变的只是文本节点。

进一步需要说明的是，一条数据可能对应于多个HTML元素，而一个HTML元素又对应于设备内存中的一个DOM对象，即一条数据可能对应于多个DOM对象。

为简化描述，可分析与该数据相关的所有DOM对象的集合，将这些关联DOM对象置于同一父DOM对象中，该父DOM对象可视为是布局容器；该父DOM对象中的这些关联DOM对象，可视为是容器中的小容器，称之为数据容器。布局容器与数据容器之间可视为是“父子”关系，布局容器用于固定数据容器，数据容器用于存放数据。

不同情况下，列表中每一项数据的高度、复杂度都是不同的，所以所需布局容器的数量和每个布局容器中数据容器的数量也是不相同的。但是，在任何特定情况下，布局容器和相应数据容器的数量都是可以确定的，例如，需要M个(例如10个)包含N个(例如16个)数据容器的布局容器。

本发明重复利用的是这M个布局容器、以及布局容器中的数据容器DOM对象。当布局容器DOM对象位置发生更改时，相应数据容器的位置也会随之更改，并替换该布局容器中数据容器里相关联的文本节点即可。

对于本发明所涉及的名词，做解释如下：

DOM(Document Object Model，文档对象模型)：可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构，是表示和处理HTML或XML文档的常用方法。

JAVASCRIPT：一种轻量级的编程语言，是可插入HTML页面的编程代码。

AJAX：异步的JAVASCRIPT和XML(Asynchronous JavaScript andXML)，在无需重新加载整个网页的情况下，能够更新部分网页的技术。

数组：是用于储存多个相同类型数据的集合。

回调函数：就是一个通过函数指针调用的函数。如果把函数的指针(地址)作为参数传递给另一个函数，当这个指针被用为调用它所指向的函数时，就说这是回调函数。回调函数一般用于截获消息、获取系统信息或处理异步事件。

参见图1，示出的是本发明实施例提供的一种网页列表显示方法的主要流程图，包括如下步骤：

S101：根据网页的滚动距离以及列表数据在所述网页中的显示尺寸，确定滚动距离中的隐列表数据；

S102：根据列表数据与DOM对象的对应关系，更改与隐列表数据相应的DOM对象在DOM队列中的位置，并基于待显示列表数据更改DOM对象中的文本节点，以通过DOM对象对待显示列表数据进行显示。

上述实施方式中，对于步骤S101，当网页尺寸过大超出设备屏幕尺寸、或者数据量过大导致部分数据隐藏在设备屏幕之外，用户只有上下左右移动网页页面才能够查看到，这些数据即为隐列表数据。

对于用户，可以查看到界面中所显示的是哪些数据、哪些数据只能看到部分、哪些数据是已经看过的、还有多少未查看、是否已经看到最后一个。但对于设备，仅了解页面数据量、每项数据的显示高度、用户对页面的滚动距离等。

对于页面滚动距离，可以利用JAVASCRIPT监听网页的滚动事件，通过事件的回调函数获得，并记为D，以判断是否达到页面末端。

需要说明的是，这里的末端，可以是页面可视区域的末端，例如，可视区域为400px，列表的完整高度为1500px(当然用户只能看到400px的列表)，那么滚动距离为1100px时表示滚动至末端，若滚动距离小于1100px，则表示未至末端，页面仍然可以滚动。

假设每个数据在设备浏览器可视区域的占用高度为H，当D正好为H的整数倍(记为custor)时，更改滚动距离中最后一个数据的下标index值为该custor。例如，参见图2所示，其中左框代表DOM对象，表示与一个列表数据对应的所有DOM对象的集合，列表数据在初始化时，index为0(这里采用计算机表述的方式，从0开始)，当第一条数据只看到部分时，index还是0；当第一条数据刚好完全看不到时，即D/H＝1时，index为1；同样，当第二个数据只能看到部分时，index为1,；当第二个数据刚好完全看不到时，D/H＝2，index为2，以此类推。

对于隐列表数据的确定，还可以通过向下取整“网页的滚动距离与每页数据长度的比值”确定，例如，滚动高度为250px，每个数据高度为50px，则已隐藏5个数据，但若滚动距离为230px，表示只完全隐藏4个数据。

但需要说明的是，对于滚动距离中的隐列表数据，只是已滚动距离中所有数据的一部分，例如，滚动距离为250px，每个数据高度为50px，则表示已经有5个数据隐藏在屏幕之外，但仅选取最后部分数据作为本发明所要考虑的隐列表数据，例如，两个或者一个，具体依据工作人员设定。

对于步骤S102，对于列表数据长度，即网页页面中所设定每次可显示的列表数据量，可以是任意数据，具体依据工作人员设定选择，本发明均以10为例进行说明。

DOM对象的数量与列表数据长度相应，同样为10。DOM对象所处DOM队列，可以视为是环状结构，以循环使用DOM对象对列表数据进行显示，且无需新创建新的DOM对象，达到控制DOM对象数量的目的。

针对于环状DOM队列，无论获取列表数据的方式是一次性全部获取还是分页式获取(例如，利用AJAX技术异步获取)，数据与DOM对象均有映射关系，例如，数据1～HTML元素1～DOM对象1，数据2～HTML元素2～DOM对象2，数据11～HTML元素11～DOM对象1，数据12～HTML元素12～DOM对象2。

传输过程有：

1)以一次性获取数据为例，对于数据11，是需要等待DOM对象1传输数据1完毕后才可以传输；

2)以分页获取数据为例，每次获取10个数据。对于1～10数据，数据1传输完毕后，相应DOM对象移动至DOM队列末端对数据11进行传输显示；

由此，基于环状DOM队列对列表数据的展示，主要体现为：将与隐列表数据对应的DOM对象空闲出来，供其他待显示的列表数据使用。

进一步的，由于一个HTML元素对应于设备内存中的一个DOM对象，对于与隐列表数据相应的DOM对象，在利用JAVASCRIPT变更DOM对象位置的同时或之前，也需要更改该DOM对象中的文本节点为待显示数据的文本节点。对于后续没有数据显示的情况，文本节点为空即可。

上述实施例所提供的方法，对网页来说，更改DOM对象的位置和相应的文本节点较为容易，且DOM对象是一直存在并且可重复利用的，相较于传统方式需要多少DOM就创建多少DOM，可以大幅降低设备内存消耗。

参见图3，示出了根据本发明实施例的一种可选的网页列表显示方法流程示意图，包括如下步骤：

S301：根据网页的滚动距离以及列表数据在所述网页中的显示尺寸，确定滚动距离中的隐列表数据；

S302：当滚动距离逐渐增大、且是显示尺寸的整数倍时，确定与列表中第一个列表数据相应的第一DOM对象，移动第一DOM对象至DOM队列的末端；

S303：确定与第一DOM对象相应、且位于第一列表数据之后的下一列表数据，基于下一列表数据更改第一DOM对象中的文本节点，并通过第一DOM对象对下一列表数据进行显示。

上述实施方式中，对于步骤S301，可参见图1所示步骤S101的描述，在此不再赘述。

上述实施方式中，对于步骤S302，对于列表数据的显示，包括初始阶段以及后续阶段：

1)初始化时，通过JAVASCRIPT遍历列表的第一部分数据，例如，1～10数据，并生成HTML元素。利用JAVASCRIPT操作DOM的能力，插入到网页中用来显示列表数据的区域，最终将列表的第一页数据显示在网页中。

2)随着用户对页面的滑动，网页的向上滚动，滚动距离D越来越大，具体参见图4所示：

①若D不满足H的整数倍时，利用JAVASCRIPT操作DOM的能力，则更改DOM对象与设备屏幕始端的距离，达到滚动的效果。假定内存中只有10个区域，即只有10个DOM对象，只要改变这10个区域，就能达到移动的效果。

②但若D为H的整数倍时，则将之前列表中第一条数据对应的DOM对象移动到列表的末位，之前列表中第二条数据对应的DOM对象就变为当前第一位置，以此类推；

例如，隐列表数据有两个：index 1和index为2，相应的DOM对象同样隐藏在屏幕之外，此时仅将第一个DOM对象1移动至DOM队列的10之后，以对第11个数据进行传输显示，DOM对象2仍是对应数据2。

需要说明的是，这里的整数倍，表示的是滚动距离中有多少个数据完全隐藏。例如，一个列表有1000行，每一行的高度是50px，可视区域显示20行，那么“整数倍”这个含义指的50px的整数倍。

对于步骤S303，在网页的回调函数中，更改DOM对象位置后，还需要更改其中文本节点的内容。

1)在更改DOM对象的内容之前，判断是否需要异步确定下一页列表数据：

若当前页面没有滚动操作，或者列表第一条数据只被隐藏了部分，是不需要获取下一页数据的。只有当前列表中第一条数据滚动至隐藏区域、或者包括第一条数据在内的指定数量数据(例如，两个)滚动至隐藏区域时，才获取。体现在网页中，即为滚动距离在网页中的占比超出一定阈值。

这里的下一页列表数据，对于一次性获取，指的是下一批已获取的数据，例如，下一批数据11～20，在当前传输1～10数据时，一直执行等待操作；但对于分页获取，需要有新获取操作，例如，当前传输1～10数据，下一页为11～20数据，再下一页为21～30区间的数据。

需要说明的是，数据区间的长度，是以页面列表数据长度为度量单位的。例如，可以获取1～10区间的数据，也可以是2～11区间的数据，还可以是3～12区间的数据，取决于页面移动的位置。

2)对于下一页列表数据，可以通过AJAX技术，基于当前列表数据的index值，确定当前所显示的是第几批数据：

以异步分页获取数据为例，当前数据index为9，表示处于1～10区间(计算机中为0～9)，则所获取的下一页数据范围为11～20；

对于一次性获取数据，当前数据index为9，对应于下一批中的数据19。

需要说明的是，数据在获取之前，就有一定的排序顺序，例如，编号1～1000。利用AJAX技术所获取的列表数据，可以以数组的形式，追加在JAVASCRIPT的变量中。设置变量为data，设备浏览器可见的第一条数据所对应的data下标index，初始时刻设为0，第二条数据对应data的第(index+1)个，以此类推。

3)对于所获取的数据，需要将下一页数据附加在当前列表data后面，利用更改位置的DOM对象对下一页数据进行展示，重复该过程，直至列表数据完全获取。

以手机为例，滚动距离，为用户在屏幕上真实滑动的距离。当用户在屏幕上滑动时，页面会跟随着滑动，但滑动具有一定限制：当用户累计滑动的距离超出“列表真正需要的距离时”，页面不再随用户在屏幕上的滑动而滚动。虽然用户可以继续在屏幕上向上滑动，但是页面不会跟着走。

上述实施例所提供的方法，主要应用于向上滚动网页的场景，基于环状DOM队列，网页的滚动只是更改了DOM对象的位置和文本节点，实现了DOM对象的重复利用，有效控制了设备内存的使用率以及解析并渲染网页页面的时间，从而达到节约内存、提高页面响应速度的效果。

参见图5，示出了根据本发明实施例的另一种可选的网页列表显示方法流程示意图，包括如下步骤：

S501：根据网页的滚动距离以及列表数据在所述网页中的显示尺寸，确定滚动距离中的隐列表数据；

S502：当滚动距离逐渐减小、且是显示尺寸的整数倍时，确定与列表中最后一个列表数据相应的第二DOM对象，移动第二DOM对象至DOM队列的始端；

S503：确定与第二DOM对象相应、且位于最后一个列表数据之前的上一列表数据，基于上一列表数据更改第二DOM对象中的文本节点，并通过第二DOM对象对上一列表数据进行显示。

上述实施方式中，步骤S501可参见图1所示步骤S101的描述，在此不再赘述。

上述实施方式中，对于步骤S502，当用户查看之前已阅列表、并向下滑动页面时，滚动距离D越来越小：

1)若D不满足H的整数倍时，利用JAVASCRIPT操作DOM的能力，则更改DOM对象与设备屏幕始端的距离，达到滚动的效果；

2)但若D正好为H的整数倍时，则将之前列表中最后一条数据对应的DOM对象移动至列表中的第一位置，之前列表中第一条数据对应的DOM对象变为当前的第二位置，以此类推。

例如，参见图6所示，原列表末端的最后一个DOM对象2，移动至了列表始端，此时DOM对象2对应的数据由原先数据12变为了数据2；原列表始端的DOM对象3移动至了列表第二位置，但仍是对应数据3。

对于步骤S503，在网页的回调函数中，更改DOM对象位置后，还需要更改其中内容：

1)在更改DOM对象的内容之前，判断是否需要异步确定上一页列表数据。

若当前页面没有滚动操作，或者列表第一条数据只被隐藏了部分，是不需要获取上一页数据的。只有当前列表中第一条数据滚动至显示区域、或者包括第一条数据在内的预定数量数据全部滚动至页面可视区域时，才获取。

这里的上一页列表数据，是指已经显示过、并隐藏在屏幕之外的数据，只不过用户此时滑动页面返回重新查看。对于该部分数据，同样可以基于AJAX技术异步获取。

2)对于上一页列表数据的异步获取操作，与下一页列表数据的获取操作同理，只不过此时获取的是上一页数据；

以异步分页获取数据为例，当前数据index为19，表示处于11～20区间(计算机中为10～19)，则所获取的上一页数据的范围为1～10；

对于一次性获取数据，当前数据index为19，对应于上一批中的数据9。

3)对于所获取的数据，需要将上一页数据附加在当前列表data前面，利用更改位置的DOM对象对上一页数据的文本节点进行展示，重复该过程，直至上一页列表数据完全获取。

同样以手机为例，用户在屏幕上向下滑动时，页面会跟随向下滑动，直到页面达到了顶部。

需要说明的是，用户永远可以在屏幕上随意滑动，但根据当前数据下标index所处位置，可判断用户在屏幕上的滑动对页面滚动是否有效。例如，1～1000数据，当1000个数据在页面上显示后，用户再往上滑动界面就没有意义；当第一条数据在页面上显示后(index＝0)，用户再往下滑动界面也是没有意义的。

上述实施例所提供的方法，主要应用于向下滚动网页的场景，基于DOM对象的位置和文本节点的更改，有效控制了设备内存的使用率以及解析并渲染网页页面的时间，从而达到节约内存、提高页面响应速度的效果。

本发明实施例中，在对列表数据进行网页展示之前，还包括，网页的生成过程：

设备浏览器通过URL加载HTML结构信息，并将其解析并渲染为网页进行显示。HTML结构信息，即最基本的HTML，可视为是不包含数据的HTML文档。由于此时网页中没有数据，可以在数据显示区域进行友好提示，例如，数据正在加载中。该友好提示也可以不显示，具体依据工作人员设定。

本发明实施例中，在网页中列表数据显示之后，对于网页的滚动监听以及滚动距离的确定，可以按照以下方式进行：

1)对于超出页面显示区域的内容，设备浏览器都可以滚动页面查看这些内容，并且动态设置未显示的区域长度为：未显示的内容数量*每个数据的显示尺寸；

通过JAVASCRIPT监听网页滚动事件，获取网页滚动的距离(例如，页面竖向/横向滚动条的滚动信息)，判断是否滚动到网页横向/纵向末端，对于两者操作过程类似，只不过横向页面滚动与纵向页面滚动条所处位置不一样而已，一个横向一个纵向，但都是根据滚动距离确定的，本发明主要以纵向为例进行说明。

2)通过监听设备浏览器的滑动事件，即在设备上为触摸事件、在个人设备上按住鼠标左键并移动鼠标，在上述滑动事件的回调函数中，获取用户在设备屏幕上垂直或水平移动的距离，结合未显示内容的区域长度，判断上述移动的距离是否需要对网页产生滚动，也可判断是否滚动到网页末端。

需要说明的是，移动的距离就是用户滚动网页控制上下左右移动的距离，对用户来说感觉就是在滚动页面上的滚动条。

本发明实施例中，对于网页中每页所显示的数据量，即列表数据长度，通常依据“网页可视区域高度”以及“每项数据的在网页中的占用尺寸”计算，例如，1000px/50px＝20个，另外：

1)对于页面可视区域高度，与页面屏幕大小有关，例如，设备1每页最多可显示20个数据、设备2可显示50个，但设备3仅能显示10个；

2)通常情况下，数据呈现方式，例如显示高度，都是相同的，不会一条数据占用原两条数据占用高度的情况；

3)除此之外，还需要考虑其他因素，例如，页面缩放比例，页面在比例100％时可显示30个数据，缩放至75％时可显示40个。

但需要说明的是，对于占用比例较大的数据，例如图片，可能导致当前只能看到部分的情况，本发明不会对该图片进行压缩等处理，对于剩余隐藏部分，可以滚动页面进行查看。

本发明实施例中，设备内存中，所保留的用于展示列表DOM对象的数量M，为每页数据长度L*每条数据所对应的HTML数量N，即L*N＝M。该M只是对DOM对象数量的描述，针对于具体的某种情况。

M个DOM对象足以占满设备屏幕，并略有多余，记多余数量为E。这里的E表示的是多余DOM对象/数据中HTML数量，例如，每个数据中HTML元素有4个，多余16个DOM对象，则E为4，即表示网页所隐藏的、用户所查看不到的数据有4个。之前描述的DOM对象，仅仅是每个数据所对应的DOM对象的集合，记为1个。当DOM对象正好占满设备屏幕时，此时的E为0。

E存在的意义是保证移动时的连贯性。通常情况下，E最低要求是2，最高为5或6即可。若E是奇数，例如3，表示网页一边有一个隐藏，另一边为2个。

本发明为方便表述，设定E为4，可保证网页未滚动时，有4个对象隐藏在设备屏幕的末端；在网页滚动的过程中，分别有E/2个对象被隐藏在设备屏幕的两端，当网页滚动至末端时，有4个对象隐藏在设备屏幕的始端。

本发明实施例所提供的方法，基于固定DOM对象数量、且重复利用DOM对象的思想，网页滚动过程中只是更改了DOM对象的位置和相应的文本节点；所示方法，可以有效控制设备内存的使用率，减少解析并渲染页面的时间，从而达到节约内存、提高页面响应速度的目的。

参见图7，示出了本发明实施例提供的一种网页列表显示装置700的主要模块示意图，包括：

确定模块701，用于根据网页的滚动距离以及列表数据在述网页中的显示尺寸，确定滚动距离中的隐列表数据；

显示模块702，用于根据列表数据与DOM对象的对应关系，更改与隐列表数据相应的DOM对象在DOM队列中的位置，并基于待显示列表数据更改DOM对象中的文本节点，以通过DOM对象对待显示列表数据进行显示。

本发明实施装置中，显示模块702，用于：

当滚动距离逐渐增大、且是显示尺寸的整数倍时，确定与列表中第一个列表数据相应的第一DOM对象，移动第一DOM对象至DOM队列的末端；确定与第一DOM对象相应、且位于第一列表数据之后的下一列表数据，基于下一列表数据更改第一DOM对象中的文本节点，并通过第一DOM对象对下一列表数据进行显示。

本发明实施装置中，显示模块702，用于：根据网页的列表数据长度、以及列表中第一个列表数据的标识，确定与第一个列表数据所处区间相邻的下一区间，将处于下一区间的列表数据作为待显示列表数据；其中区间与下一区间的长度相同。

本发明实施装置中，显示模块702，用于：根据网页的可视区域高度、页面缩放比例以及列表数据在网页中的显示尺寸，确定网页的列表数据长度。

本发明实施装置中，显示模块702，用于：

当滚动距离逐渐减小、且是显示尺寸的整数倍时，确定与列表中最后一个列表数据相应的第二DOM对象，移动第二DOM对象至DOM队列的始端；确定与第二DOM对象相应、且位于最后一个列表数据之前的上一列表数据，基于上一列表数据更改第二DOM对象中的文本节点，并通过第二DOM对象对上一列表数据进行显示。

本发明实施装置还包括间距更改模块703(图中未标出)，用于：当滚动距离不是显示尺寸的整数倍时，确定滚动距离中的最后一个列表数据未隐藏完全；基于滚动距离，更改DOM队列中的DOM对象与网页始端的间距。

另外，在本发明实施例中所述的网页列表展示装置的具体实施内容，在上面所述网页列表展示方法中已经详细说明了，故在此重复内容不再说明。

本发明实施例所提供的装置，基于固定DOM对象数量、且重复利用DOM对象的思想，网页滚动过程中只是更改了DOM对象的位置和文本节点；所示装置，可以有效控制设备内存的使用率，减少解析并渲染页面的时间，从而达到节约内存、提高页面响应速度的目的。

图8示出了可以应用本发明实施例的网页列表展示方法或网页列表展示装置的示例性系统架构800。

如图8所示，系统架构800可以包括终端设备801、802、803，网络804和服务器805(仅仅是示例)。网络804用以在终端设备801、802、803和服务器805之间提供通信链路的介质。网络804可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备801、802、803通过网络804与服务器805交互，以接收或发送消息等。终端设备801、802、803上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备801、802、803可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器805可以是提供各种服务的服务器，例如对用户利用终端设备801、802、803所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果(例如目标推送信息、产品信息--仅为示例)反馈给终端设备。

需要说明的是，本发明实施例所提供的网页列表展示方法一般由服务器805执行，相应地，网页列表展示装置一般设置于服务器805中。

应该理解，图8中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图9，其示出了适于用来实现本发明实施例的终端设备的计算机系统900的结构示意图。图9示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图9所示，计算机系统900包括中央处理单元(CPU)901，其可以根据存储在只读存储器(ROM)902中的程序或者从存储部分908加载到随机访问存储器(RAM)903中的程序而执行各种适当的动作和处理。在RAM 903中，还存储有系统900操作所需的各种程序和数据。CPU 901、ROM 902以及RAM 903通过总线904彼此相连。输入/输出(I/O)接口905也连接至总线904。

以下部件连接至I/O接口905：包括键盘、鼠标等的输入部分906；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分907；包括硬盘等的存储部分908；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分909。通信部分909经由诸如因特网的网络执行通信处理。驱动器910也根据需要连接至I/O接口905。可拆卸介质911，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器910上，以便于从其上读出的计算机程序根据需要被安装入存储部分908。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分909从网络上被下载和安装，和/或从可拆卸介质911被安装。在该计算机程序被中央处理单元(CPU)901执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括确定模块、显示模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，显示模块还可以被描述为列表数据在网页中以列表模式显示的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：

根据网页的滚动距离以及列表数据在所述网页中的显示尺寸，确定滚动距离中的隐列表数据；

根据列表数据与DOM对象的对应关系，更改与隐列表数据相应的DOM对象在DOM队列中的位置，并基于待显示列表数据更改DOM对象中的文本节点，以通过DOM对象对待显示列表数据进行显示。

根据本发明实施例的技术方案，基于固定DOM对象数量、且重复利用DOM对象的思想，网页滚动过程中只是更改了DOM对象的位置和文本节点；可以有效控制设备内存的使用率，减少解析并渲染页面的时间，从而达到节约内存、提高页面响应速度的目的。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (6)

1.一种网页列表显示方法，其特征在于，包括：

根据网页的滚动距离以及列表数据在所述网页中的显示尺寸，确定所述滚动距离中的隐列表数据；

根据列表数据与DOM对象的对应关系，更改与所述隐列表数据相应的DOM对象在DOM队列中的位置，并基于待显示列表数据更改所述DOM对象中的文本节点，以通过所述DOM对象对所述待显示列表数据进行显示；其中，DOM对象的数量M与列表数据长度相同，通过每页数据长度和每条数据所对应的HTML数量的乘积得到，M个DOM对象足以占满设备屏幕，并存在多余情况，设置多余数量E，E表示多余DOM对象和每个数据中HTML数量的商；

当所述滚动距离逐渐增大、且是所述显示尺寸的整数倍时，确定与列表中第一个列表数据相应的第一DOM对象，移动所述第一DOM对象至所述DOM队列的末端；

确定与所述第一DOM对象相应、且位于所述第一个列表数据之后的下一列表数据，基于所述下一列表数据更改所述第一DOM对象中的文本节点，并通过所述第一DOM对象对所述下一列表数据进行显示；其中，根据所述网页的可视区域高度、页面缩放比例以及列表数据在所述网页中的显示尺寸，确定所述网页的列表数据长度；根据所述网页的列表数据长度、以及所述列表中第一个列表数据的标识，确定与所述第一个列表数据所处区间相邻的下一区间，将处于所述下一区间的列表数据作为待显示列表数据；其中所述区间与所述下一区间的长度相同；

当所述滚动距离不是所述显示尺寸的整数倍时，确定所述滚动距离中的最后一个列表数据未隐藏完全；其中，整数倍表示的是滚动距离中完全隐藏的数据量；基于所述滚动距离，更改所述DOM队列中的DOM对象与所述网页始端的间距。

2.根据权利要求1所述的方法，其特征在于，所述更改与所述隐列表数据相应的DOM对象在DOM队列中的位置，并基于待显示列表数据更改所述DOM对象中的文本节点，以通过所述DOM对象对所述待显示列表数据进行显示，包括：

当所述滚动距离逐渐减小、且是所述显示尺寸的整数倍时，确定与所述列表中最后一个列表数据相应的第二DOM对象，移动所述第二DOM对象至所述DOM队列的始端；

确定与所述第二DOM对象相应、且位于所述最后一个列表数据之前的上一列表数据，基于所述上一列表数据更改所述第二DOM对象中的文本节点，并通过所述第二DOM对象对所述上一列表数据进行显示。

3.一种网页列表显示装置，其特征在于，包括：

确定模块，用于根据网页的滚动距离以及列表数据在所述网页中的显示尺寸，确定所述滚动距离中的隐列表数据；

显示模块，用于根据列表数据与DOM对象的对应关系，更改与所述隐列表数据相应的DOM对象在DOM队列中的位置，并基于待显示列表数据更改所述DOM对象中的文本节点，以通过所述DOM对象对所述待显示列表数据进行显示；其中，DOM对象的数量M与列表数据长度相同，通过每页数据长度和每条数据所对应的HTML数量的乘积得到，M个DOM对象足以占满设备屏幕，并存在多余情况，设置多余数量E，E表示多余DOM对象和每个数据中HTML数量的商；

当所述滚动距离逐渐增大、且是所述显示尺寸的整数倍时，确定与列表中第一个列表数据相应的第一DOM对象，移动所述第一DOM对象至所述DOM队列的末端；

确定与所述第一DOM对象相应、且位于所述第一个列表数据之后的下一列表数据，基于所述下一列表数据更改所述第一DOM对象中的文本节点，并通过所述第一DOM对象对所述下一列表数据进行显示；其中，根据所述网页的可视区域高度、页面缩放比例以及列表数据在所述网页中的显示尺寸，确定所述网页的列表数据长度；根据所述网页的列表数据长度、以及所述列表中第一个列表数据的标识，确定与所述第一个列表数据所处区间相邻的下一区间，将处于所述下一区间的列表数据作为待显示列表数据；其中所述区间与所述下一区间的长度相同；

间距更改模块，用于当所述滚动距离不是所述显示尺寸的整数倍时，确定所述滚动距离中的最后一个列表数据未隐藏完全；其中，整数倍表示的是滚动距离中完全隐藏的数据量；基于所述滚动距离，更改所述DOM队列中的DOM对象与所述网页始端的间距。

4.根据权利要求3所述的装置，其特征在于，所述显示模块，用于：

当所述滚动距离逐渐减小、且是所述显示尺寸的整数倍时，确定与所述列表中最后一个列表数据相应的第二DOM对象，移动所述第二DOM对象至所述DOM队列的始端；

确定与所述第二DOM对象相应、且位于所述最后一个列表数据之前的上一列表数据，基于所述上一列表数据更改所述第二DOM对象中的文本节点，并通过所述第二DOM对象对所述上一列表数据进行显示。

5.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-2中任一所述的方法。

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