一种数据渲染方法和装置与流程

本发明涉及Web技术领域，尤其涉及一种数据渲染方法和装置。

背景技术：

本部分旨在为权利要求书中陈述的本发明的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。

网站(Web)已经深入各行各业，成为最流行的信息和业务平台，包括：电子政务、电子商务、网上银行、网上营业厅等。在Web 2.0的技术趋势下，各类机构还在不断增加网站上的功能，尤其是增加互动功能，以提供更好的用户体验。

在当今的Web界面中，树形结构是用于资源管理类系统界面显示的主要方式之一，其通常用于管理展示多层级的资源。但由于树形结构具有层级，不利于进行分页展示，目前Web界面中现有的树形结构解决方案并不适用于海量数据的展示，主要有以下缺陷：(1)树在渲染时每个叶子或者层级使用一个DOM节点，导致海量数据下需要渲染大量DOM节点，导致占用内存过高，页面卡顿，甚至崩溃；(2)数据有层级关系，在处理多级数据分页且需要保持层级关系时，实现难度太大，且复杂度高；(3)使用Flash等第三方技术或插件，此类技术已经逐步淘汰。

因此，如何降低使用DOM节点数量和节省内存开销，提高用户体验是亟待解决的技术问题之一。

技术实现要素：

本发明实施例提供的一种数据渲染方法和装置，用以解决现有技术中存在的树形结构DOM节点太多，导致占用内存过高的问题。

本发明实施例提供一种数据渲染方法，包括：

在进行数据渲染时，根据滑动块相对于滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识；以及

根据单位展示高度、所述第一序列标识以及展示区域高度确定展示区域内末行展示数据在待展示数据集合中的第二序列标识；

根据第一序列标识和第二序列标识确定本次将在展示区域展示的第一数据；

比较所述第一数据和展示区域当前展示的第二数据得到差异数据；

对所述差异数据进行渲染显示。

具体实施时，按照以下方法确定滑动块相对于所述滚动条顶部的距离：

在检测到滑动块移动时，记录滑动块相对于上一次移动后的位移；

根据上一次移动后所述滑动块相对于所述滚动条顶部的距离与所述位移确定本次所述滑动块相对于所述滚动条顶部的距离，其中，所述滑动块相对于所述滚动条顶部的初始距离为预设值。

较佳地，按照以下公式确定所述第一序列标识：其中：

k为所述第一序列标识；

Ts为滑动块相对于滚动条顶部的距离；

Dcl为所述待展示数据集合大小；

Vh为所述展示区域高度。

具体地，按照以下公式确定所述第二序列标识：其中：k′为所述第二序列标识。

具体实施时，在根据滑动块相对于所述滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识之前，所述方法，还包括：

根据待展示数据集合大小、单位展示高度和展示区域高度确定滑动块高度；并

确定滑动块相对于所述滚动条顶部的距离小于所述展示区域高与所述度滑动块高度的差值；

如果滑动块相对于所述滚动条顶部的距离不小于所述差值，则按照以下公式确定所述第一序列标识：其中：Ih为单位展示高度。

根据待展示数据集合大小、单位展示高度和展示区域高度确定滑动块高度，具体包括：

将展示区域高度与单位展示高度的比值和所述待展示数据集合大小进行比较；

如果确定出所述待展示数据集合大小大于所述展示区域高度与单位展示高度的比值，则按照以下公式确定所述滑动块高度：其中：Th为滑动块高度。

如果确定出所述待展示数据集合大小不大于所述展示区域高度与单位展示高度的比值，则确定不显示滚动条区域。

具体实施时，所述方法，还包括：

针对所述展示区域当前展示的第三数据，在检测到针对所述第三数据的打开操作时，根据所述第三数据包含的子数据的大小重新确定待展示数据集合大小、滑动块大小和滑动块相对于所述滚动条顶部的距离；

根据所述滑动块大小和滑动块相对于所述滚动条顶部的距离，重新确定所述第一序列标识和所述第二序列标识；并

根据重新确定出的第一序列标识和第二序列标识重新确定本次在展示区域展示的第一数据；

根据重新确定出的第一数据重新进行渲染显示。

本发明实施例提供一种数据渲染装置，包括：

第一确定单元，用于在进行数据渲染时，根据滑动块相对于滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识；

第二确定单元，用于根据单位展示高度、所述第一序列标识以及展示区域高度确定展示区域内末行展示数据在待展示数据集合中的第二序列标识；

第三确定单元，用于根据第一序列标识和第二序列标识确定本次将在展示区域展示的第一数据；

比较单元，用于比较所述第一数据和展示区域当前展示的第二数据得到差异数据；

渲染单元，用于对所述差异数据进行渲染显示。

所述第一确定单元，具体包括：

记录子单元，用于在检测到滑动块移动时，记录滑动块相对于上一次移动后的位移；

第一确定子单元，用于根据上一次移动后所述滑动块相对于所述滚动条顶部的距离与所述位移确定本次所述滑动块相对于所述滚动条顶部的距离，其中，所述滑动块相对于所述滚动条顶部的初始距离为预设值。

所述第一确定单元，具体用于按照以下公式确定所述第一序列标识：其中：

k为所述第一序列标识；

Ts为滑动块相对于滚动条顶部的距离；

Dcl为所述待展示数据集合大小；

Vh为所述展示区域高度。

所述第二确定单元，具体用于按照以下公式确定所述第二序列标识：其中：k′为所述第二序列标识。

所述装置，还包括第四确定单元，其中：

所述第四确定单元，用于在所述第一确定单元根据滑动块相对于所述滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识之前，根据待展示数据集合大小、单位展示高度和展示区域高度确定滑动块高度；并确定滑动块相对于所述滚动条顶部的距离小于所述展示区域高与所述度滑动块高度的差值；如果滑动块相对于所述滚动条顶部的距离不小于所述差值，则按照以下公式确定所述第一序列标识：其中：Ih为单位展示高度。

所述第四确定单元，具体包括：

比较子单元，用于将展示区域高度与单位展示高度的比值和所述待展示数据集合大小进行比较；

第二确定子单元，用于如果所述比较子单元确定出所述待展示数据集合大小大于所述展示区域高度与单位展示高度的比值，则按照以下公式确定所述滑动块高度：其中：Th为滑动块高度。

所述第二确定子单元，还用于如果所述比较子单元确定出所述待展示数据集合大小不大于所述展示区域高度与单位展示高度的比值，则确定不显示滚动条区域。

所述装置，还包括重新确定单元，其中：

所述重新确定单元，用于针对所述展示区域当前展示的第三数据，在检测到针对所述第三数据的打开操作时，根据所述第三数据包含的子数据的大小重新确定待展示数据集合大小、滑动块大小和滑动块相对于所述滚动条顶部的距离；根据所述滑动块大小和滑动块相对于所述滚动条顶部的距离，重新确定所述第一序列标识和所述第二序列标识；并根据重新确定出的第一序列标识和第二序列标识重新确定本次在展示区域展示的第一数据；根据重新确定出的第一数据重新进行渲染显示。

本发明实施例还提供了一种数据渲染装置，例如，可以包括存储器和处理器，其中，处理器可以用于读取存储器中的程序，执行下列过程：在进行数据渲染时，根据滑动块相对于滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识；以及根据单位展示高度、所述第一序列标识以及展示区域高度确定展示区域内末行展示数据在待展示数据集合中的第二序列标识；根据第一序列标识和第二序列标识确定本次将在展示区域展示的第一数据；比较所述第一数据和展示区域当前展示的第二数据得到差异数据；对所述差异数据进行渲染显示。

本发明实施例还提供了一种程序产品，其包括程序代码，当所述程序产品运行时，所述程序代码用于执行以下过程：在进行数据渲染时，根据滑动块相对于滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识；以及根据单位展示高度、所述第一序列标识以及展示区域高度确定展示区域内末行展示数据在待展示数据集合中的第二序列标识；根据第一序列标识和第二序列标识确定本次将在展示区域展示的第一数据；比较所述第一数据和展示区域当前展示的第二数据得到差异数据；对所述差异数据进行渲染显示。

本发明有益效果包括：

本发明实施例提供的数据渲染方法和装置，在进行数据渲染时，根据滑动块相对于滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识，以及根据单位展示高度、所述第一序列标识以及展示区域高度确定展示区域内末行展示数据在待展示数据集合中的第二序列标识，根据第一序列标识和第二序列标识确定本次在展示区域展示的第一数据，比较所述第一数据和展示区域当前展示的第二数据；确定所述第一数据和第二数据之间的差异数据；对所述差异数据进行渲染显示，由此即可实现采用较少的DOM节点来渲染海量数据，节省了内存开销，此外，根据滑动块相对于滚动条顶部的距离，能够定位展示区域内首行展示数据在待展示数据集合中的位置，准确性较高，且提高了用户体验。

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

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本发明的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1为本发明提供的树形结构示意图；

图2a为本发明提供的数据渲染方法的实施流程示意图；

图2b-1为本发明提供的数据渲染方法中确定待展示数据集合大小的参考示意图；

图2b-2为本发明提供的数据渲染方法中确定待展示数据集合大小的另一参考示意图；

图2c为本发明提供的数据渲染方法中确定滑动块相对于滚动条顶部的距离的的实施流程示意图；

图2d为本发明提供的数据渲染方法中根据第一数据进行渲染显示的实施流程示意图；

图3a为本发明提供的数据渲染方法中确定滑动块高度的方法的实施流程示意图；

图3b为本发明提供的数据渲染方法中在确定滑动块高度具体实施的流程示意图；

图4中为本发明提供的数据渲染方法中待展示数据集合大小改变时执行的流程示意图；

图5为本发明提供的数据渲染装置的结构示意图；

图6为本发明提供的另一数据渲染装置的结构示意图。

具体实施方式

下面将参考若干示例性实施方式来描述本发明的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本发明，而并非以任何方式限制本发明的范围。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

本领域技术人员知道，本发明的实施方式可以实现为一种系统、装置、设备、方法或计算机程序产品。因此，本公开可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式。

本发明实施例提供一种数据渲染方法和装置，用以解决现有技术中存在的树形结构DOM节点太多，导致占用内存过高、页面发生卡顿的问题。

以下结合说明书附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明，并且在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

在本文中，需要理解的是，所涉及的术语中：

参照图1所示，为本发明实施例中涉及的树形结构示意图。

滑动块相对于滚动条顶部的距离，为图1中标号为3所示的距离，即滑动块的顶部相对于滚动条顶部的距离，为了便于描述，本发明实施中用Ts表示滑动块相对于滚动条顶部的距离，具体实施时，可以通过移动滑动块来定位待展示数据集合中待展示的数据的位置。

展示区域高度，为可视高度，即整个控件内容展示区域的总高度，如图1中标号为1所示的高度，为了便于描述，本发明实施中用Vh表示。

单位展示高度，也可称为元素高度，其可定义为在展示区域内每个元素的高度，如图1中标号为2所示的高度，为了便于描述，本发明实施中用Ih表示。

滑动块高度，为在滚动条内滑动块所占的高度，用于映射待展示数据和展示区域的比例关系，如图1中标号为4所示的高度，为了便于描述，本发明实施中用Th表示。

待展示数据集合大小，为待展示数据集合的大小。例如，待展示数据集合为：Dc＝{I1,I2,I3,...,In}，In表示待展示数据集合中的数据，由于数据间存在层级关系，故层级数据有打开与非打开两种状态，在确定待展示数据集合大小时，针对层级数据，只有父级节点、无子节点的节点以及父级节点为打开状态的子节点才能纳入数据集合大小统计中，直观理解为数据集合中包含的数据的数量。例如，对于数据集合Dc＝{I1,I2,I3,...,In}，假设I1＝{I11,I12,I13}，I2＝{I21,I22,I23,I24}，其中，I1为打开状态，其余节点为非打开状态，则数据集合Dc的大小为n+3，如果后续操作中，检测到I2变为打开状态，则数据集合Dc的大小变为n+7。

例如，待展示数据集合中数据均处于打开状态，则待展示数据集合的大小为待展示数据集合中所有数据的大小，为了便于描述，本发明实施中用Dcl表示。

此外，附图中的任何元素数量均用于示例而非限制，以及任何命名都仅用于区分，而不具有任何限制含义。

下面参考本发明的若干代表性实施方式，详细阐释本发明的原理和精神。

本发明人发现，在当今的Web界面显示方法中，树形结构是用于资源管理类系统界面显示的主要方式之一，其通常用于管理展示多层级的资源。但由于树形结构具有层级，不利于进行分页展示，目前Web界面中现有的树形结构解决方案并不适用于海量数据的展示，其存在占用内存过高，页面卡顿，甚至崩溃等缺陷。

有鉴于此，本发明实施例中提供了一种数据渲染方法，在进行数据渲染时，根据滑动块相对于滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识，以及根据单位展示高度、所述第一序列标识以及展示区域高度确定展示区域内末行展示数据在待展示数据集合中的第二序列标识，根据第一序列标识和第二序列标识确定本次在展示区域展示的第一数据，比较所述第一数据和展示区域当前展示的第二数据；确定所述第一数据和第二数据之间的差异数据；对所述差异数据进行渲染显示，由此即可实现采用较少的DOM节点来渲染海量数据，节省了内存开销，此外，根据滑动块相对于滚动条顶部的距离，能够定位展示区域内首行展示数据在待展示数据集合中的位置，准确性较高，且提高了用户体验。

在介绍了本发明的基本原理之后，下面具体介绍本发明的各种非限制性实施方式。

实施例一

如图2a所示，为本发明实施例提供的数据渲染方法的实施流程示意图，可以包括以下步骤：

S21、在进行数据渲染时，根据滑动块相对于滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识。

在进行数据渲染之前，由于具有层级结构的数据多为管理资源数据，稳定性比较高，因此，可以采用预加载的方法，预先异步获取所有待展示数据，并将数据存储备用。当然，也可以不采用预加载的方法，实时获取待展示的数据，然后对数据进行渲染，待展示数据集合大小可根据获取的所有待展示数据确定出，例如，参考图2b-1所示的Windows资源管理器，从图2b-1中可以看出，桌面和回收站为无父级的节点，我的电脑、我的文档和网上邻居等为父级节点，在确定待展示数据集合大小时，父级节点未打开的算一个，即图2b-1，待展示数据集合Dc为{桌面，我的文档，我的电脑，SYSTEM，软件，文档，娱乐，办公，DVD驱动器，控制面板，共享文档，Administrator的文档，网上邻居，回收站}：其待展示数据集合大小Dcl＝14；当将父级节点SYSTEM打开时，参考图2b-2，待展示数据集合发生变化，其相应待展示数据集合大小也相应发生变化，在此不再计算变化后的待展示数据集合大小。

具体实施时，在对数据进行渲染时，可以按照图2c所示的方法确定滑动块相对于所述滚动条顶部的距离：

S211、在检测到滑动块移动时，记录滑动块相对于上一次移动后的位移。

具体实施时，在记录滑动块相对于上一次移动后的位移时，以单位展示高度来评价，如在检测到滑动块移动时，确定该滑动块相对于上一次移动后的位移是几个单位展示高度，如所述位移为5个单位展示高度，为了便于描述，本发明以该滑动块相对于上一次移动后的位移是5个单位展示高度为例进行说明。

需要说明的是，如果确定出该滑动块相对于上一次移动后的位移不是整数倍个单位展示高度，需要将其取整，如5.5个单位展示高度，将其取整可以是5个单位展示高度，也可以为6个单位展示高度，用户可以自行设定取整规则，本发明实施例对此不进行限定。

S212、根据上一次移动后所述滑动块相对于所述滚动条顶部的距离与所述位移确定本次所述滑动块相对于所述滚动条顶部的距离。

其中，所述滑动块相对于所述滚动条顶部的初始距离为预设值，假设该初始距离为0，即初始滑动块位于滚动条顶部。从初始位置开始移动滑动块，也就是说上一次移动后所述滑动块相对于所述滚动条顶部的距离为0，根据步骤S211确定出的所述位移为5个单位展示高度，则可以确定出本次所述滑动块相对于所述滚动条顶部的距离为上一次移动后所述滑动块相对于所述滚动条顶部的距离加上所述位移，从而得出本次所述滑动块相对于所述滚动条顶部的距离为5个单位展示高度。根据单位展示高度的值即可得出本次所述滑动块相对于所述滚动条顶部的距离，至于单位展示高度的值，用户可以根据实际需要自行设定，本发明对此不进行限定，为了描述方便，本发明实施例以单位展示高度Ih为5cm为例进行说明。

或者从其它位置移动滑动块，将滑动块移动了5个单位展示高度，也可以根据上一次移动后所述滑动块相对于所述滚动条顶部的距离和所述位移确定出本次所述滑动块相对于所述滚动条顶部的距离，例如，上一次移动后所述滑动块相对于所述滚动条顶部的距离为5个单位展示高度，则根据所述位移为5和单位展示高度，可以确定出本次所述滑动块相对于所述滚动条顶部的距离为10个单位展示高度。根据单位展示高度的值即可得出本次所述滑动块相对于所述滚动条顶部的距离。根据单位展示高度的值即可得出本次所述滑动块相对于所述滚动条顶部的距离。

在确定出滑动块相对于滚动条顶部的距离后，按照公式(1)确定所述第一序列标识：

其中，k为所述第一序列标识；Ts为滑动块相对于滚动条顶部的距离；Dcl为所述展示数据集合的大小；Vh为所述展示区域高度。

假设从初始位置开始移动，步骤S121中记录的所述位移为5个单位展示高度，即5*5cm＝25cm，则Ts＝25cm，待展示数据集合大小Dcl可根据所有待展示数据求出，为了描述方便，本发明实施例以Dcl＝100为例进行说明，此外，展示区域高度Vh为整个控件内容展示区域的总高度，其也可以根据实际需要自行设定，本发明实施例以Vh＝100cm为例进行说明，利用公式(1)方可得出第一序列标识k的值，k＝25，即展示区域内首行展示数据在待展示数据集合中的第一标识为25，根据该第一序列标识，可从数据集合中查找到第一序列标识为25对应的数据。

S22、根据单位展示高度、所述第一序列标识以及展示区域高度确定展示区域内末行展示数据在待展示数据集合中的第二序列标识。

在确定出第一序列标识后，可根据公式(2)得出展示区域内末行展示数据在待展示数据集合中的第二序列标识：

具体实施时，步骤S21已确定出第一序列标识k＝25，展示区域高度Vh＝100cm，以及根据步骤S212中列举的单位展示高度Ih＝5cm，即可确定出第二序列标识即第二序列标识为k′＝44，则根据该第二序列标识可从待展示数据集合中查找到该第二序列标识对应的待展示数据。

S23、根据第一序列标识和第二序列标识确定本次在展示区域展示的第一数据。

根据步骤S21和S22确定出的第一序列标识和第二序列标识，可从待展示数据集合中查找到第一序列标识k＝25对应的待展示数据I25，以及查找到第二序列标识k′＝44对应的待展示数据I44，由此即可确定本次在展示区域内展示的第一数据为I25与I44之间的数据。

S24、根据所述第一数据进行渲染显示。

具体实施时，在根据第一数据进行渲染显示时，可按照图2d所示的方法对待展示的数据进行渲染显示，可以包括以下步骤：

S241、比较所述第一数据和展示区域当前展示的第二数据。

例如，当前展示的第二数据为待展示数据集合中I11至I30之间的数据，由步骤S23中确定出所述第一数据为待展示数据集合中I25与I44之间的数据。比较I25与I44之间的数据和展示区域当前展示的I11至I30之间的数据。

S242、确定所述第一数据和第二数据之间的差异数据。

假设此次滑动块移动之前，用户没有对待展示数据集合中的父级节点的数据执行打开操作，则可以确定出当前展示的第二数据有一部分数据与本次确定出的待展示数据重合，即I25与I30之间的数据，则I31与I44之间的数据即为所述第一数据和第二数据之间的差异数据。

S243、对所述差异数据进行渲染显示。

针对确定出的差异数据，本发明提供的数据渲染方法只需对所述差异数据进行渲染显示，即只需渲染显示I31与I44之间的数据，I25与I30之间的数据保持不变，从而节省了内存开销。

本发明实施例提供的数据渲染方法，在进行数据渲染时，根据滑动块相对于滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识；以及根据单位展示高度、所述第一序列标识以及展示区域高度确定展示区域内末行展示数据在待展示数据集合中的第二序列标识；根据第一序列标识和第二序列标识确定本次在展示区域展示的第一数据；将所述第一数据和当前展示区域内展示的第二数据进行比较，确定出差异数据，将确定出的差异数据进行渲染显示，采用本发明实施例提供的数据渲染方法，无需根据待展示数据大小生成相应的DOM节点，只需根据展示区域高度和单位展示高度的比值，配置相应的DOM节点，在展示区域内更新需要更新的DOM节点即可，减少了DOM节点的使用，节省了内存开销，且提高了用户体验。

实施例二

在利用本发明实施例对数据进行数据渲染时，在根据滑动块相对于所述滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识之前，所述方法，还包括图3a所示的步骤：

S31、根据待展示数据集合大小、单位展示高度和展示区域高度确定滑动块高度。

具体实施时，可按照图3b所示的方法确定滑动块的大小，可以包括以下步骤：

S311、将展示区域高度与单位展示高度的比值和所述待展示数据集合大小进行比较。

由实施例一步骤S212中待展示数据集合大小Dcl＝100，展示区域高度Vh＝100cm，单位展示高度Ih＝5cm，可得出

S312、确定所述待展示数据集合大小是否大于所述展示区域高度与单位展示高度的比值，如果是，则执行步骤S313；否则，执行步骤S314。

根据步骤S311易得出Dcl＝100大于即待展示数据集合大小大于所述展示区域高度与单位展示高度的比值，则执行步骤S313。

S313、按照公式(3)确定所述滑动块高度。

其中，Th为滑动块高度，根据步骤S311～S312可得出滑动块高度为

S314、确定不显示滚动条区域。

例如，待展示数据集合大小Dcl＝10，则易得出Dcl＝10小于即待展示数据集合大小不大于所述展示区域高度与单位展示高度的比值，如果还按照公式(3)确定滑动块高度，则可得出Th＝200，而展示区域高度Vh＝100cm，要求滑动块高度必须小于展示区域高度，因此，不能采用公式(3)提供的方法确定滑动块高度。此外，由于待展示数据集合大小Dcl＝10，表明有10个数据待展示，而展示区域高度Vh＝100cm，单位展示高度Ih＝5cm，表明当前展示区域内可以一次展示个数据。因此该展示区域内可将待展示数据一次展示完整，无需显示滚动条区域。

S32、确定滑动块相对于所述滚动条顶部的距离是否小于所述展示区域高与所述滑动块高度的差值，如果是，则执行步骤S33，否则，执行步骤S34。

根据步骤S212得出滑动块相对于所述滚动条顶部的距离Ts＝25cm，而所述展示区域高度与所述滑动块高度差值为Vh-Th＝100cm-20cm＝80cm，即可得出滑动块相对于所述滚动条顶部的距离小于所述展示区域高度与所述滑动块高度差值，则执行步骤S33。

S33、根据滑动块相对于所述滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识。

其中，步骤S33的具体实施可参考本发明实施例一中的步骤S21，在此不再赘述。

S34、按照公式(4)确定所述第一序列标识。

其中：Ih为单位展示高度。

例如，如果滑动块相对于所述滚动条顶部的距离Ts大于80，由展示区域高度为100，则表面滑动块距离滚动条底部的距离小于20，而根据上述步骤S313已确定出滑动块高度为20cm，因此表面滑动块处于滚动条底部，且无法继续向下移动，也相应表面当前需要展示的数据为待展示数据的最后个数据，则其第一序列标识应按照公式(4)进行确定，即从待展示数据集合中第一序列标识为81对应的数据开始至待展示数据集合中最后一个数据进行展示。

本发明实施例二提供的数据渲染方法，当滑动块移动后，为了较准确的定位到展示区域内待展示的数据，还需根据待展示数据集合大小、单位展示高度和展示区域高度确定滑动块高度；并确定滑动块相对于所述滚动条顶部的距离小于所述展示区域高与所述度滑动块高度的差值；如果如果滑动块相对于所述滚动条顶部的距离不小于所述差值，表面当前滑动块在滚动条底部，需展示待展示数据集合中的最后一页数据，提高了定位数据的准确性。

实施例三

为了避免重复渲染在展示区域内已展示的数据，本发明实施例还提供了如图4所示的方法，可以包括以下步骤：

S41、针对展示区域当前展示的第三数据，在检测到针对第三数据的打开操作时，根据第三数据包含的子数据的大小重新确定待展示数据集合大小、滑动块大小和滑动块相对于所述滚动条顶部的距离。

S42、根据滑动块大小和滑动块相对于所述滚动条顶部的距离，重新确定所述第一序列标识和所述第二序列标识。

S43、根据重新确定出的第一序列标识和第二序列标识重新确定本次在展示区域展示的第一数据。

S44、根据重新确定出的第一数据重新进行渲染显示。

具体实施时，参考图2b-1和图2b-2所示的Windows资源管理的两个树形结构图，从两个图中易看出，图2b-2的SYSTEM相较于图2b-1的SYSTEM，图2b-2的SYSTEM处于打开操作，相应的图2b-2的待展示数据集合大小发生了变化，因此还需要重新确定滑动块大小和滑动块相对于所述滚动条顶部的距离，还需要执行步骤S41～S44步骤重新确定第一数据，并根据重新确定出的第一数据重新进行渲染显示。本发明实施例三的详细步骤可参见实施例一和实施例二的描述，重复之处不再赘述。

本发明实施例提供的数据渲染方法，针对展示区域当前展示的第三数据，在检测到针对第三数据的打开操作时，根据第三数据包含的子数据的大小重新确定待展示数据集合大小、滑动块大小和滑动块相对于所述滚动条顶部的距离，并根据滑动块大小和滑动块相对于所述滚动条顶部的距离，重新确定所述第一序列标识和所述第二序列标识，根据重新确定出的第一序列标识和第二序列标识重新确定本次在展示区域展示的第一数据，根据重新确定出的第一数据重新进行渲染显示，只需通过更新DOM节点，将确定出的需要渲染的数据进行渲染显示，节省了内存开销。

实施例四

基于同一发明构思，本发明实施例中还提供了一种数据渲染装置，由于上述装置解决问题的原理与数据渲染方法相似，因此上述装置的实施可以参见方法的实施，重复之处不再赘述。

如图5所示，为本发明实施例提供的数据渲染装置的结构示意图，包括：第一确定单元51、第二确定单元52、第三确定单元53和比较单元54和渲染单元55，其中：

第一确定单元51，用于在进行数据渲染时，根据滑动块相对于滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识。

第二确定单元52，用于根据单位展示高度、所述第一序列标识以及展示区域高度确定展示区域内末行展示数据在待展示数据集合中的第二序列标识。

第三确定单元53，用于根据第一序列标识和第二序列标识确定本次将在展示区域展示的第一数据。

比较单元54，用于比较所述第一数据和展示区域当前展示的第二数据得到差异数据。

渲染单元55，用于对所述差异数据进行渲染显示。

具体实施时，第一确定单元51，具体包括记录子单元和第一确定子单元，其中：

记录子单元，用于在检测到滑动块移动时，记录滑动块相对于上一次移动后的位移。

第一确定子单元，用于根据上一次移动后所述滑动块相对于所述滚动条顶部的距离与所述位移确定本次所述滑动块相对于所述滚动条顶部的距离，其中，所述滑动块相对于所述滚动条顶部的初始距离为预设值。

较佳地，所述第一确定单元51，具体用于按照以下公式确定所述第一序列标识：其中：

k为所述第一序列标识；

Ts为滑动块相对于滚动条顶部的距离；

Dcl为所述待展示数据集合大小；

Vh为所述展示区域高度。

具体实施时，所述第二确定单元52，具体用于按照以下公式确定所述第二序列标识：其中：k′为所述第二序列标识。

具体实施时，所述装置，还包括第四确定单元56，其中：

所述第四确定单元56，用于在所述第一确定单元51根据滑动块相对于所述滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识之前，根据待展示数据集合大小、单位展示高度和展示区域高度确定滑动块高度；并确定滑动块相对于所述滚动条顶部的距离小于所述展示区域高与所述度滑动块高度的差值；如果滑动块相对于所述滚动条顶部的距离不小于所述差值，则按照以下公式确定所述第一序列标识：其中：Ih为单位展示高度。

具体地，所述第四确定单元56，具体包括比较子单元、第二确定子单元，其中：

比较子单元，用于将展示区域高度与单位展示高度的比值和所述待展示数据集合大小进行比较；

第二确定子单元，用于如果所述比较子单元确定出所述待展示数据集合大小大于所述展示区域高度与单位展示高度的比值，则按照以下公式确定所述滑动块高度：其中：Th为滑动块高度。

较佳地，所述第二确定子单元，还用于如果所述第一比较子单元确定出所述待展示数据集合大小不大于所述展示区域高度与单位展示高度的比值，则确定不显示滚动条区域。

具体实施时，所述装置，还包括重新确定单元57，其中：

所述重新确定单元57，用于针对所述展示区域当前展示的第三数据，在检测到针对所述第三数据的打开操作时，根据所述第三数据包含的子数据的大小重新确定待展示数据集合大小、滑动块大小和滑动块相对于所述滚动条顶部的距离；根据所述滑动块大小和滑动块相对于所述滚动条顶部的距离，重新确定所述第一序列标识和所述第二序列标识；并根据重新确定出的第一序列标识和第二序列标识重新确定本次在展示区域展示的第一数据；根据重新确定出的第一数据重新进行渲染显示。

为了描述的方便，以上各部分按照功能划分为各模块(或单元)分别描述。当然，在实施本发明时可以把各模块(或单元)的功能在同一个或多个软件或硬件中实现。

本申请的实施例所提供的数据渲染装置可通过计算机程序实现。本领域技术人员应该能够理解，上述的模块划分方式仅是众多模块划分方式中的一种，如果划分为其他模块或不划分模块，只要数据渲染装置具有上述功能，都应该在本申请的保护范围之内。

本发明实施例提供的数据渲染装置，在进行数据渲染时，根据滑动块相对于滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识，以及根据单位展示高度、所述第一序列标识以及展示区域高度确定展示区域内末行展示数据在待展示数据集合中的第二序列标识，根据第一序列标识和第二序列标识确定本次在展示区域展示的第一数据，比较所述第一数据和展示区域当前展示的第二数据；确定所述第一数据和第二数据之间的差异数据；对所述差异数据进行渲染显示，由此即可实现采用较少的DOM节点来渲染海量数据，节省了内存开销，此外，根据滑动块相对于滚动条顶部的距离，能够定位展示区域内首行展示数据在待展示数据集合中的位置，准确性较高，且提高了用户体验。

本发明实施例还提供了一种数据渲染装置，例如，可以包括存储器和处理器，其中，处理器可以用于读取存储器中的程序，执行下列过程：在进行数据渲染时，根据滑动块相对于滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识；以及根据单位展示高度、所述第一序列标识以及展示区域高度确定展示区域内末行展示数据在待展示数据集合中的第二序列标识；根据第一序列标识和第二序列标识确定本次将在展示区域展示的第一数据；比较所述第一数据和展示区域当前展示的第二数据得到差异数据；对所述差异数据进行渲染显示。

本发明实施例还提供了一种程序产品，其包括程序代码，当所述程序产品运行时，所述程序代码用于执行以下过程：在进行数据渲染时，根据滑动块相对于滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识；以及根据单位展示高度、所述第一序列标识以及展示区域高度确定展示区域内末行展示数据在待展示数据集合中的第二序列标识；根据第一序列标识和第二序列标识确定本次将在展示区域展示的第一数据；比较所述第一数据和展示区域当前展示的第二数据得到差异数据；对所述差异数据进行渲染显示。

在介绍了本发明提供的数据渲染方法和装置之后，接下来，介绍根据本发明的另一示例性实施方式的数据渲染装置。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。

在一些可能的实施方式中，根据本发明的数据渲染装置可以包括至少一个处理单元、以及至少一个存储单元。其中，所述存储单元存储有程序代码，当所述程序代码被所述处理单元执行时，使得所述处理单元执行本说明书上述“实施例方法”部分中描述的根据本发明各种示例性实施方式的数据渲染方法中的各种步骤。例如，所述处理单元可以执行如图2a中所示的步骤S21、在进行数据渲染时，根据滑动块相对于滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识，步骤S22、根据单位展示高度、所述第一序列标识以及展示区域高度确定展示区域内末行展示数据在待展示数据集合中的第二序列标识，步骤S23、根据第一序列标识和第二序列标识确定本次在展示区域展示的第一数据，步骤S24、根据所述第一数据进行渲染显示。

应当注意，尽管在上文详细描述中提及了装置的若干单元或子单元，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多单元的特征和功能可以在一个单元中具体化。反之，上文描述的一个单元的特征和功能可以进一步划分为由多个单元来具体化。

此外，尽管在附图中以特定顺序描述了本发明方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

下面参照图6来描述根据本发明的这种实施方式的数据渲染装置60。图6所示的数据渲染装置仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图6所示，数据渲染装置60可以以通用计算设备的形式表现。数据渲染装置60的组件可以包括但不限于：上述至少一个处理单元61、上述至少一个存储单元62、连接不同系统组件(包括存储单元62和处理单元61)的总线63。

总线63表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器、外围总线、处理器或者使用多种总线结构中的任意总线结构的局域总线。

存储单元62可以包括易失性存储器形式的可读介质，例如随机存取存储器(RAM)621和/或高速缓存存储器622，还可以进一步包括只读存储器(ROM)623。

存储单元62还可以包括具有一组(至少一个)程序模块624的程序/实用工具625，这样的程序模块624包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

数据渲染装置60也可以与一个或多个外部设备64(例如键盘、指向设备等)通信，还可与一个或者多个使得用户能与数据渲染装置60交互的设备通信，和/或与使得该数据渲染装置60能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口65进行。并且，数据渲染装置60还可以通过网络适配器66与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器66通过总线63与数据渲染装置60的其它模块通信。应当理解，尽管图中未示出，可以结合数据渲染装置60使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

在一些可能的实施方式中，本发明提供的数据渲染方法的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在服务器设备上运行时，所述程序代码用于使所述服务器设备执行本说明书上述“实施例方法”部分中描述的根据本发明各种示例性实施方式的数据渲染方法中的步骤，例如，所述服务器设备可以执行如图2a中所示的步骤S21、在进行数据渲染时，根据滑动块相对于滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识，步骤S22、根据单位展示高度、所述第一序列标识以及展示区域高度确定展示区域内末行展示数据在待展示数据集合中的第二序列标识，步骤S23、根据第一序列标识和第二序列标识确定本次在展示区域展示的第一数据，步骤S24、根据所述第一数据进行渲染显示。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

根据本发明的实施方式的数据渲染程序产品可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在服务器设备上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括——但不限于——电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于——无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

此外，尽管在附图中以特定顺序描述了本发明方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

综上所述，本发明实施例提供的数据渲染方法和装置，在进行数据渲染时，根据滑动块相对于滚动条顶部的距离、待展示数据集合大小和展示区域高度确定展示区域内首行展示数据在待展示数据集合中的第一序列标识，以及根据单位展示高度、所述第一序列标识以及展示区域高度确定展示区域内末行展示数据在待展示数据集合中的第二序列标识，根据第一序列标识和第二序列标识确定本次将在展示区域展示的第一数据，比较所述第一数据和展示区域当前展示的第二数据；确定所述第一数据和第二数据之间的差异数据；对所述差异数据进行渲染显示，由此即可实现采用较少的DOM节点来渲染海量数据，节省了内存开销，此外，根据滑动块相对于滚动条顶部的距离，能够定位展示区域内首行展示数据在待展示数据集合中的位置，准确性较高，且提高了用户体验。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。