CN114117274A - 一种数据渲染的方法、装置、计算机设备以及存储介质 - Google Patents

Abstract

本申请实施例公开了一种数据渲染的方法、装置、计算机设备以及存储介质，用于提升客户端对网页的数据渲染性能。本申请实施例中，根据网页展示窗口的尺寸以及宽高配置参数确定网页展示窗口的可视化区域的目标值，创建多个DOM对象，并根据待渲染数据对该多个DOM对象进行渲染并在可视化区域中展示渲染后的数据，当监听到数据变化更新的指令时，客户端无需重新创建新的DOM对象，只需复用之前已创建的DOM对象进行数据更新渲染，并将更新渲染后的数据展示在可视化区域，因此，本实施例中DOM对象可以复用，不再重复地创建和销毁，大大节省了客户端的处理资源，进而提升客户端的网页渲染性能。

Description

一种数据渲染的方法、装置、计算机设备以及存储介质

技术领域

本申请实施例涉及数据处理领域，具体涉及一种数据渲染的方法、装置、计算机设备以及存储介质。

背景技术

随着网页技术的发展，网页已经成为低成本实现数据多功能展示的最佳选择。传统的网页渲染技术基于列表形式将数据渲染至网页中，进行数据渲染时，客户端计算当前需要创建的DOM对象(document object model，文档对象模型)的数量，根据DOM对象的数量从需要渲染的原始数据中获取待渲染数据，并将待渲染数据渲染至DOM对象对应的显示区域中。例如，客户端计算当前需要创建100个DOM对象，则从需要渲染的原始数据中获取100条待渲染数据，并分别将每条待渲染数据一一渲染至1个DOM对象对应的显示区域中，每个DOM对象分别对应1条数据。

在完成对当前一批数据的渲染之后，若客户端需要对下一批待渲染数据进行渲染，则客户端需要销毁当前一批数据对应的DOM对象，才能针对下一批待渲染数据创建新的DOM对象。可见，客户端在对网页进行数据渲染时需要不断地创建DOM对象以及销毁DOM对象，这十分影响客户端的处理性能，导致网页数据加载迟缓，甚至会导致数据加载卡顿，严重影响用户对网页的浏览体验。

发明内容

本申请实施例提供了一种数据渲染的方法、装置、计算机设备以及存储介质，用于提升客户端对网页的数据渲染性能。

本申请实施例第一方面提供了一种数据渲染的方法，应用于具有至少一个网页展示窗口的客户端上，所述方法包括：

根据所述网页展示窗口的尺寸以及所述网页展示窗口的可视化区域的宽高配置参数以确定所述网页展示窗口的可视化区域的目标值；

对获取到的待渲染的数据源进行解析，得到多条待渲染数据，所述待渲染数据包括第一待渲染数据和第二待渲染数据；

创建与所述目标值相同的多个DOM对象，每个所述可视化区域分别对应一个所述DOM对象；

根据所述第一待渲染数据渲染所述DOM对象，将所述DOM对象渲染后的数据展示在所述DOM对象对应的可视化区域中；

当监听到数据切换指令时，根据所述第二待渲染数据更新渲染目标DOM对象，将所述目标DOM对象渲染后的数据展示在所述目标DOM对象对应的可视化区域中，所述目标DOM对象为所述多个DOM对象中的一个。

作为本发明另一可选的方案，每条所述待渲染数据对应唯一的一个虚拟ID，每一个所述虚拟ID关联于1个DOM对象；

所述根据所述第一待渲染数据渲染所述DOM对象，包括：

根据所述第一待渲染数据渲染与所述第一待渲染数据的虚拟ID关联的DOM对象；

所述根据所述第二待渲染数据更新渲染目标DOM对象，包括：

确定与所述第二待渲染数据的虚拟ID关联的所述目标DOM对象，根据所述第二待渲染数据更新渲染所述目标DOM对象。

作为本发明另一可选的方案，所述网页展示窗口的每一行包括N个所述可视化区域，N条所述待渲染数据为一组，每组所述待渲染数据唯一地对应一个虚拟分组ID，每一个所述虚拟分组ID关联于N个DOM对象；其中N为大于1的正整数；

所述根据所述第一待渲染数据渲染所述DOM对象，包括：

根据N条第一待渲染数据渲染与所述N条第一待渲染数据的虚拟分组ID关联的N个DOM对象；

所述根据所述第二待渲染数据更新渲染目标DOM对象，包括：

确定与N条第二待渲染数据的虚拟分组ID关联的N个目标DOM对象，根据所述N条第二待渲染数据更新渲染所述N个目标DOM对象。

作为本发明另一可选的方案，所述宽高配置参数包括所述可视化区域的行高配置参数；

所述方法还包括：

将所述网页展示窗口中滚动条的顶部至所述网页展示窗口的顶部的距离除以所述行高配置参数得到的商并取整，以及将得到的数值作为起始位置数值；

将所述网页展示窗口的高度值除以所述行高配置参数得到的商作为结束位置数值；

所述根据所述第一待渲染数据渲染所述DOM对象，包括：

在所述多条待渲染数据中确定对应于所述起始位置数值的虚拟ID以及对应于所述结束位置数值的虚拟ID，将对应于所述起始位置数值的虚拟ID至对应于所述结束位置数值的虚拟ID之间的多个虚拟ID对应的多条待渲染数据确定为所述第一待渲染数据，分别根据每条所述第一待渲染数据渲染所述DOM对象。

作为本发明另一可选的方案，所述当监听到数据切换指令时，根据所述第二待渲染数据更新渲染目标DOM对象，包括：

当监听到所述滚动条的拖动操作时，根据计算得到的所述起始位置数值和所述结束位置数值，在所述多条待渲染数据中确定对应于所述起始位置数值的虚拟ID以及对应于所述结束位置数值的虚拟ID，将对应于所述起始位置数值的虚拟ID至对应于所述结束位置数值的虚拟ID之间的多个虚拟ID对应的多条待渲染数据确定为所述第二待渲染数据，分别根据每条所述第二待渲染数据渲染所述目标DOM对象。

作为本发明另一可选的方案，所述将所述DOM对象渲染后的数据展示在所述DOM对象对应的可视化区域中之后，所述方法还包括：

将所述可视化区域展示的数据对应的虚拟ID与所述宽高配置参数的乘积确定为所述可视化区域的坐标；

当监听到拖拽操作时，确定所述拖拽操作的拖拽起点与拖拽终点构成的选择范围，将坐标落在所述选择范围内的可视化区域所展示的数据确定为所述拖拽操作选中的目标数据，对所述目标数据执行操作指令所指示的操作。

本申请实施例第二方面提供了一种数据渲染的装置，应用于具有至少一个网页展示窗口的客户端上，包括：

确定单元，用于根据所述网页展示窗口的尺寸以及所述网页展示窗口的可视化区域的宽高配置参数以确定所述网页展示窗口的可视化区域的目标值；

解析单元，用于对获取到的待渲染的数据源进行解析，得到多条待渲染数据，所述待渲染数据包括第一待渲染数据和第二待渲染数据；

创建单元，用于创建与所述目标值相同的多个DOM对象，每个所述可视化区域分别对应一个所述DOM对象；

渲染单元，用于根据所述第一待渲染数据渲染所述DOM对象，将所述DOM对象渲染后的数据展示在所述DOM对象对应的可视化区域中；

所述渲染单元还用于当监听到数据切换指令时，根据所述第二待渲染数据更新渲染目标DOM对象，将所述目标DOM对象渲染后的数据展示在所述目标DOM对象对应的可视化区域中，所述目标DOM对象为所述多个DOM对象中的一个。

本申请实施例第三方面提供了一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现前述第一方面的方法。

本申请实施例第四方面提供了一种计算机存储介质，计算机存储介质中存储有指令，该指令在计算机上执行时，使得计算机执行前述第一方面的方法。

从以上技术方案可以看出，本申请实施例具有以下优点：

本申请实施例中，根据网页展示窗口的尺寸以及宽高配置参数确定网页展示窗口的可视化区域的目标值，创建多个DOM对象，并根据待渲染数据对该多个DOM对象进行渲染并在可视化区域中展示渲染后的数据，当监听到数据变化更新的指令时，客户端无需重新创建新的DOM对象，只需复用之前已创建的DOM对象进行数据更新渲染，并将更新渲染后的数据展示在可视化区域，因此，本实施例中DOM对象可以复用，不再重复地创建和销毁，大大节省了客户端的处理资源，进而提升客户端的网页渲染性能。

附图说明

图1为本申请实施例中数据渲染的方法一个流程示意图；

图2为本申请实施例中数据渲染的方法另一流程示意图；

图3为本申请实施例中数据渲染的装置一个结构示意图；

图4为本申请实施例中数据渲染的装置另一结构示意图。

具体实施方式

本发明提供一种数据渲染的方法、装置、计算机设备以及存储介质，为使得本申请的特征和优点能够更加的明显和易懂，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而非全部实施例。基于本申请中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

在本申请实施例的描述中，需要理解的是，在本申请的描述中，除非另有说明，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

需要说明的是，本发明实施例的数据渲染的方法可以应用但不局限于以下场景：

场景一，用户将采集到的数据通过网络传输到云端，由云端采用本发明数据渲染的方法进行数据渲染；

场景二，用户将采集到的数据输入到本地计算机设备中，由本地计算机设备采用本发明数据渲染的方法进行数据渲染。

本申请实施例提供了一种数据渲染的方法、装置、计算机设备以及存储介质，用于提升客户端对网页的数据渲染性能。

请参阅图1，本申请实施例中数据渲染的方法一个实施例包括：

101、根据网页展示窗口的尺寸以及网页展示窗口的可视化区域的宽高配置参数以确定网页展示窗口的可视化区域的目标值；

本实施例的方法可应用于客户端，该客户端具有网页展示功能，例如可以是浏览器客户端、H5页面或者其它具有网页展示功能的应用程序客户端。当客户端进行网页展示时，客户端提供网页展示窗口，网页展示窗口用于展示经过数据渲染后的网页页面，该网页展示窗口可以是任意的尺寸大小，例如网页展示窗口可以占据整个显示屏幕，也可以占据显示屏幕的部分区域，本实施例对网页展示窗口的尺寸大小不作限定。

网页展示窗口包括多个可视化区域，每一个可视化区域用于展示一条渲染后的数据。该可视化区域的宽高可以任意地配置，因此客户端可获取可视化区域的宽高配置参数，进而结合网页展示窗口的尺寸来计算网页展示窗口的可视化区域的目标值。

102、对获取到的待渲染的数据源进行解析，得到多条待渲染数据；

获取待渲染的数据源是进行网页展现的基础，待渲染的数据源主要包括两种途径：一是从服务器端下载的网页数据资源(首次网页资源)，二是基于从服务器端下载的资源动态生成的网页数据资源(二次网页资源)。来自于服务器端的网页数据资源，是用户通过客户端向服务器发送包含页面地址的访问请求后，服务端响应该请求向客户端提供该网页数据资源。从服务器端下载到的网页数据资源可以即时提供给客户端，也可以根据实际应用需要，先将下载的网页数据资源进行缓存，待对网页数据资源的获取触发产生后才提供。与此相应地，本实施例获取网页数据资源的方式可以包括多种，比如，可以是即时请求即时获得方式，也可以是在接收到网页数据资源获取触发后，从缓存中提取网页数据资源。对于生成的网页数据资源，其是借助于本地系统的处理计算功能，运行下载网页数据资源中的某些程序段生成的网页数据资源，比如，脚本程序运行产生的网页代码，某些控件被触发产生的网页数据资源等等。需要说明的是，本申请所需的网页数据资源既包括上述来自服务器的网页数据资源，也包括在本地生成的网页数据资源，此处不作限定。该网页数据资源可以是文本、图片、声音、视频等数据资源中任何一种或几组的组合。

获取到待渲染的数据源之后，对该数据源进行解析，确定数据源中的多条待渲染数据，待渲染数据包括第一待渲染数据和第二待渲染数据，第一待渲染数据是指获取到该数据源之后客户端进行初次渲染时所使用的数据，第二待渲染数据是指在初次渲染之后当检测到数据更新时进行数据更新渲染所使用的数据。

103、创建与目标值相同的多个DOM对象；

DOM对象反映了网页中的各个页面元素之间的关系、位置等信息，这些页面元素通过DOM对象的节点体现，位置等信息为DOM对象节点的属性，通过对包含多个DOM对象节点的整个DOM对象的渲染，即可实现页面的展现。因此，客户端创建多个DOM对象，DOM对象的数量与网页展示窗口的可视化区域的目标值相同，每个可视化区域分别对应1个DOM对象。

104、根据第一待渲染数据渲染DOM对象，将DOM对象渲染后的数据展示在DOM对象对应的可视化区域中；

在进行网页渲染时，可以选用客户端支持的任何一种渲染器对DOM对象进行渲染，例如在Vue框架下使用渲染器根据第一待渲染数据渲染DOM对象，并将DOM对象渲染后的数据展示在DOM对象对应的可视化区域中，当所有DOM对象都完成渲染且渲染后的数据均展示在可视化区域时，网页展示窗口即展示了数据渲染后的页面，用户可以浏览已完成数据渲染的页面。

105、当监听到数据切换指令时，根据第二待渲染数据更新渲染目标DOM对象，将目标DOM对象渲染后的数据展示在目标DOM对象对应的可视化区域中；

本实施例中，该数据切换指令是指对显示的网页页面中的数据进行切换更新的指令。因此，当监听到数据切换指令时，根据第二待渲染数据更新渲染目标DOM对象，并将目标DOM对象渲染后的数据展示在目标DOM对象对应的可视化区域中，其中目标DOM对象为客户端在前述步骤创建的多个DOM对象中的一个。

本实施例中，根据网页展示窗口的尺寸以及宽高配置参数确定网页展示窗口的可视化区域的目标值，创建多个DOM对象，并根据待渲染数据对该多个DOM对象进行渲染并在可视化区域中展示渲染后的数据，当监听到数据变化更新的指令时，客户端无需重新创建新的DOM对象，只需复用之前已创建的DOM对象进行数据更新渲染，并将更新渲染后的数据展示在可视化区域，因此，本实施例中DOM对象可以复用，不再重复地创建和销毁，大大节省了客户端的处理资源，进而提升客户端的网页渲染性能。

下面将在前述图1所示实施例的基础上，进一步详细地描述本申请实施例。请参阅图2，本申请实施例中数据的渲染方法另一实施例包括：

201、根据网页展示窗口的尺寸以及网页展示窗口的可视化区域的宽高配置参数以确定网页展示窗口的可视化区域的目标值；

本实施例中，网页展示窗口的尺寸以及网页展示窗口的可视化区域的宽高均可以自主配置。在获取到网页展示窗口的尺寸以及可视化区域的宽高配置参数之后，根据网页展示窗口的尺寸以及可视化区域的宽高配置参数确定可视化区域的数量。

可视化区域的目标值可以是可视化区域的任意参数，例如可以是网页展示窗口中可视化区域的数量。

例如，在列表视图下，假设配置的网页展示窗口的尺寸为高20cm、宽45cm，而可视化区域的宽高配置参数为行高2cm，则可计算得到网页展示窗口的可视化区域的数量为10个；在九宫格视图下，假设配置的网页展示窗口的尺寸为高20cm、宽45cm，而可视化区域的宽高配置参数为行高2cm、列宽3cm，则可计算得到网页展示窗口的可视化区域的数量为150个。

202、对获取到的待渲染的数据源进行解析，得到多条待渲染数据；

本实施例中，对待渲染的数据源的解析操作，可以采用JavaScript语言对网页数据资源进行词法分析，确定该数据源中的多条待渲染数据。

在确定多条待渲染数据之后，为每一条待渲染数据配置一个虚拟ID，每条待渲染数据对应唯一的一个虚拟ID，并设置每一个虚拟ID关联于1个DOM对象，以便于在后续数据渲染步骤中根据每条待渲染数据的虚拟ID渲染DOM对象。

203、创建与目标值相同的多个DOM对象；

客户端可根据确定出来的可视化区域的数量，调用DOM对象创建函数来创建多个DOM对象，客户端创建的DOM对象的数量与网页展示窗口的可视化区域的数量相等。

204、根据第一待渲染数据渲染DOM对象，将DOM对象渲染后的数据展示在DOM对象对应的可视化区域中；

由于每一条待渲染数据均配置了一个虚拟ID，因此，在根据第一待渲染数据渲染DOM对象时，可根据第一待渲染数据渲染与第一待渲染数据的虚拟ID关联的DOM对象，进而DOM对象渲染后的数据展示在DOM对象对应的可视化区域中，实现网页的数据渲染和数据展示。

可根据滚动条顶部与网页展示窗口顶部之间的距离计算数据渲染的起始位置和结束位置。具体的，可将网页展示窗口中滚动条的顶部至网页展示窗口的顶部的距离除以行高配置参数得到的商取整，商取整得到的数值作为起始位置数值，将网页展示窗口的高度值除以行高配置参数得到的商作为结束位置数值。因此，当根据第一待渲染数据渲染DOM对象时，在前述步骤解析数据源所确定出的多条待渲染数据中，确定对应于该起始位置数值的虚拟ID以及对应于该结束位置数值的虚拟ID，将对应于该起始位置数值的虚拟ID至对应于该结束位置数值的虚拟ID之间的多个虚拟ID对应的多条待渲染数据确定为第一待渲染数据，分别根据每条第一待渲染数据渲染DOM对象。

例如，对100条待渲染数据配置虚拟ID，假设将01～99这100个虚拟ID中的每一个分别分配给一条待渲染数据，在列表视图下，假设配置的网页展示窗口的尺寸为高20cm、宽45cm，而可视化区域的宽高配置参数为行高2cm，若当前网页展示窗口中滚动条的顶部至网页展示窗口的顶部的距离为0，则可以计算得到网页展示窗口中滚动条的顶部至网页展示窗口的顶部的距离除以行高配置参数得到的商为0，即起始位置数值为0，对应于虚拟ID为01的待渲染数据，而网页展示窗口的高度值除以行高配置参数得到的商为10，即结束位置数值为10，对应于虚拟ID为10的待渲染数据，进而将虚拟ID为01至10之间的10条待渲染数据确定为第一待渲染数据，分别根据每条第一待渲染数据渲染DOM对象，并对渲染后的数据进行展示。

205、当监听到数据切换指令时，根据第二待渲染数据更新渲染目标DOM对象，将目标DOM对象渲染后的数据展示在目标DOM对象对应的可视化区域中；

由于每一条待渲染数据均配置了一个虚拟ID，因此，当监听到数据切换指令时，可确定与第二待渲染数据的虚拟ID关联的目标DOM对象，并根据第二待渲染数据更新渲染目标DOM对象，进而将目标DOM对象渲染后的数据展示在目标DOM对象对应的可视化区域中，实现网页的数据渲染和数据展示。

例如，对100条待渲染数据配置虚拟ID，假设将01～99这100个虚拟ID中的每一个分别分配给一条待渲染数据，在列表视图下，假设配置的网页展示窗口的尺寸为高20cm、宽45cm，而可视化区域的宽高配置参数为行高2cm，则可计算得到网页展示窗口的可视化区域的数量为10个，则虚拟ID为01至10之间的10条待渲染数据可称为第一待渲染数据，可根据虚拟ID为01至10之间的10条待渲染数据渲染对应的DOM对象，进而将渲染后的数据进行展示。当监听到数据切换指令时，例如数据切换指令指示对之后的待渲染数据进行渲染，则虚拟ID为11至20之间的10条待渲染数据可称为第二待渲染数据，同样进行DOM对象渲染并将渲染后的数据展示，以此类推，可按照网页展示窗口包括的可视化区域的数量依次渲染多条数据，完成网页页面展示。

因为用户拖动网页展示窗口中的滚动条表示用户需要查看网页中当前未显示的内容，因此，客户端可以将滚动条拖动时滚动条的拖动操作识别为数据切换指令。滚动条拖动会使滚动条的顶部至网页展示窗口的顶部的距离产生变化，因此，基于前述计算起始位置数值以及结束位置数值的操作，当监听到滚动条的拖动操作时，根据计算得到的起始位置数值和结束位置数值，在多条待渲染数据中确定对应于起始位置数值的虚拟ID以及对应于结束位置数值的虚拟ID，将对应于起始位置数值的虚拟ID至对应于结束位置数值的虚拟ID之间的多个虚拟ID对应的多条待渲染数据确定为第二待渲染数据，分别根据每条第二待渲染数据渲染目标DOM对象。

例如，沿用上述例子，在虚拟ID为01至10之间的10条待渲染数据完成数据渲染以及数据展示之后，当监听到数据切换指令时，确定滚动条的顶部至网页展示窗口的顶部的距离，假设该距离为4cm，则可计算得到起始位置数值为2，对应于虚拟ID为03的待渲染数据，而结束位置数值10加上2的值为12，对应于虚拟ID为12的待渲染数据，进而将虚拟ID为03至12之间的10条待渲染数据确定为第二待渲染数据，分别根据每条第二待渲染数据渲染目标DOM对象，并对渲染后的数据进行展示。以此类推，可根据滚动条的顶部至网页展示窗口的顶部的距离确定用以更新替换DOM对象原本的元素的待渲染数据，实现网页页面的更新渲染。

以上描述了对待渲染数据配置虚拟ID以进行数据渲染的操作，在本实施例的另一实施方式中，也可以在九宫格视图下对多条待渲染数据所在的组配置虚拟分组ID，进而根据虚拟分组ID进行数据渲染。具体的，在九宫格视图下，网页展示窗口的每一行包括N个可视化区域，N条待渲染数据为一组，每组待渲染数据唯一地对应一个虚拟分组ID，每一个虚拟分组ID关联于N个DOM对象，其中N为大于1的正整数。因此，在根据第一待渲染数据渲染DOM对象时，具体执行方式可以是，根据N条第一待渲染数据渲染与该N条第一待渲染数据所在的分组的虚拟分组ID所关联的N个DOM对象，进而将该N个DOM对象渲染后的数据展示在可视化区域中。

而在根据第二待渲染数据更新渲染目标DOM对象时，具体的执行方式可以是，确定与N条第二待渲染数据所组成的分组的虚拟分组ID关联的N个目标DOM对象，根据该N条第二待渲染数据更新渲染确定出的N个目标DOM对象，进而将该N个DOM对象渲染后的数据展示在可视化区域中。

例如，在九宫格视图下，每10条待渲染数据组成一个分组，可分别为每个分组配置一个虚拟分组ID，假设有10个分组，分别配置01～10这10个虚拟分组ID中的一个，则在数据渲染时，可根据每个分组的虚拟分组ID确定DOM对象，进而根据每一分组的10条待渲染数据渲染对应的DOM对象，并将渲染后的数据展示在对应的可视化区域中。

206、将可视化区域展示的数据对应的虚拟ID与宽高配置参数的乘积确定为可视化区域的坐标；

本实施例中，在将DOM对象渲染后的数据展示在DOM对象对应的可视化区域中之后，用户可浏览网页展示窗口所展示的数据，并使用鼠标在网页中输入拖拽操作以选择需要执行操作的数据。具体的，本实施例中，由于每条待渲染数据唯一地对应一个虚拟ID，每一个虚拟ID关联于1个DOM对象，因此，可视化区域展示的每条数据也对应了1个虚拟ID，客户端将可视化区域展示的数据对应的虚拟ID与宽高配置参数的乘积确定为可视化区域的坐标。

例如，对100条待渲染数据配置虚拟ID，假设将01～99这100个虚拟ID中的每一个分别分配给一条待渲染数据，假设宽高配置参数为行高2cm、列宽3cm，则虚拟ID为02的数据所在的可视化区域的坐标即为(6，2)或者(3，4)。

207、当监听到拖拽操作时，确定拖拽操作的拖拽起点与拖拽终点构成的选择范围，将坐标落在选择范围内的可视化区域所展示的数据确定为拖拽操作选中的目标数据，对目标数据执行操作指令所指示的操作；

具体的，客户端根据用户的拖拽操作确定用户所选择的数据的方式是，确定拖拽操作的拖拽起点与拖拽终点构成的选择范围，拖拽起点即用户使用鼠标点击的起点，拖拽终点即用户拖拽鼠标之后松开鼠标按键的位置点，将坐标落在该选择范围内的可视化区域所展示的数据确定为拖拽操作选中的目标数据，对目标数据执行操作指令所指示的操作。其中，确定可视化区域的坐标是否落在该选择范围内，可以是将坐标小于或者等于该选择范围的可视化区域确定为落在该选择范围内的可视化区域，例如沿用上述例子，该选择范围确定为(6，6)时，坐标为(3，2)、(3，4)、(6，2)、(6，4)、(3，6)及(6，6)的可视化区域所展示的数据可确定为用户的拖拽操作所选中的目标数据。对目标数据执行操作指令所指示的操作可以是复制目标数据、对目标数据进行高亮等等。

在实际的操作中，可使用@load方法来处理数据的滚动加载，使用dataSource方法来获取需要渲染的数据源，使用draging方法来确定是否用户是否正在执行拖拽操作，使用canDrag方法来确定网页所展示的数据是否支持拖拽选择，使用width方法来配置宽高配置参数中的宽度参数，使用itemHeight方法来配置宽高配置参数中的高度参数，通过以上方法可实现数据的持续性渲染和页面数据展示。

本实施例中，客户端只渲染可视化区域内的元素，做到按需渲染，DOM对象复用，通过对渲染容器可视化区域数量的计算，按数量渲染固定的DOM对象，在保证渲染能力的同时，可以最大程度地保证大数据下客户端对网页的数据渲染性能。目前客户端在32位下，列表数量在5W以内可保证正常渲染，而客户端在64位下可对10W+级的列表数量进行正常渲染，能够充分保障网页的数据展示性能。在当今大数据的时代，无需来回翻页查找数据，这大大提高了数据的操作体验和用户对网页数据的浏览体验。

上面对本申请实施例中的数据渲染的方法进行了描述，下面对本申请实施例中的数据渲染的装置进行描述，该数据渲染的装置应用于具有至少一个网页展示窗口的客户端上；请参阅图3，本申请实施例中数据渲染的装置300一个实施例包括：

确定单元301，用于根据网页展示窗口的尺寸以及网页展示窗口的可视化区域的宽高配置参数以确定网页展示窗口的可视化区域的目标值；

解析单元302，用于对获取到的待渲染的数据源进行解析，得到多条待渲染数据，待渲染数据包括第一待渲染数据和第二待渲染数据；

创建单元303，用于创建与目标值相同的多个DOM对象，每个可视化区域分别对应一个DOM对象；

渲染单元304，用于根据第一待渲染数据渲染DOM对象，将DOM对象渲染后的数据展示在DOM对象对应的可视化区域中；

渲染单元304还用于当监听到数据切换指令时，根据第二待渲染数据更新渲染目标DOM对象，将目标DOM对象渲染后的数据展示在目标DOM对象对应的可视化区域中，目标DOM对象为多个DOM对象中的一个。

本实施例一种优选的实施方式中，每条待渲染数据对应唯一的一个虚拟ID，每一个虚拟ID关联于1个DOM对象；

渲染单元304具体用于根据第一待渲染数据渲染与第一待渲染数据的虚拟ID关联的DOM对象；确定与第二待渲染数据的虚拟ID关联的目标DOM对象，根据第二待渲染数据更新渲染目标DOM对象。

本实施例一种优选的实施方式中，网页展示窗口的每一行包括N个可视化区域，N条待渲染数据为一组，每组待渲染数据唯一地对应一个虚拟分组ID，每一个虚拟分组ID关联于N个DOM对象；其中N为大于1的正整数；

渲染单元304具体用于根据N条第一待渲染数据渲染与N条第一待渲染数据的虚拟分组ID关联的N个DOM对象；确定与N条第二待渲染数据的虚拟分组ID关联的N个目标DOM对象，根据N条第二待渲染数据更新渲染N个目标DOM对象。

本实施例一种优选的实施方式中，每条待渲染数据唯一地对应一个虚拟ID，每一个虚拟ID关联于1个DOM对象；宽高配置参数包括可视化区域的行高配置参数；

确定单元301还用于将网页展示窗口中滚动条的顶部至网页展示窗口的顶部的距离除以行高配置参数得到的商并取整，以及将得到的数值作为起始位置数值；将网页展示窗口的高度值除以行高配置参数得到的商作为结束位置数值；

渲染单元304具体用于在多条待渲染数据中确定对应于起始位置数值的虚拟ID以及对应于结束位置数值的虚拟ID，将对应于起始位置数值的虚拟ID至对应于结束位置数值的虚拟ID之间的多个虚拟ID对应的多条待渲染数据确定为第一待渲染数据，分别根据每条第一待渲染数据渲染DOM对象。

本实施例一种优选的实施方式中，渲染单元304具体用于当监听到滚动条的拖动操作时，根据计算得到的起始位置数值和结束位置数值，在多条待渲染数据中确定对应于起始位置数值的虚拟ID以及对应于结束位置数值的虚拟ID，将对应于起始位置数值的虚拟ID至对应于结束位置数值的虚拟ID之间的多个虚拟ID对应的多条待渲染数据确定为第二待渲染数据，分别根据每条第二待渲染数据渲染目标DOM对象。

本实施例一种优选的实施方式中，每条待渲染数据唯一地对应一个虚拟ID，每一个虚拟ID关联于1个DOM对象；

确定单元301还用于将可视化区域展示的数据对应的虚拟ID与宽高配置参数的乘积确定为可视化区域的坐标；当监听到拖拽操作时，确定拖拽操作的拖拽起点与拖拽终点构成的选择范围，将坐标落在选择范围内的可视化区域所展示的数据确定为拖拽操作选中的目标数据，对目标数据执行操作指令所指示的操作。

本实施例中，数据渲染的装置中各单元所执行的操作与前述图1至图2所示实施例中描述的类似，此处不再赘述。

本实施例中，确定单元301根据网页展示窗口的尺寸以及宽高配置参数确定网页展示窗口的可视化区域的目标值，创建单元303创建多个DOM对象，渲染单元304根据待渲染数据对该多个DOM对象进行渲染并在可视化区域中展示渲染后的数据，当监听到数据变化更新的指令时，客户端无需重新创建新的DOM对象，只需渲染单元304复用之前已创建的DOM对象进行数据更新渲染，并将更新渲染后的数据展示在可视化区域，因此，本实施例中DOM对象可以复用，不再重复地创建和销毁，大大节省了客户端的处理资源，进而提升客户端的网页渲染性能。

下面对本申请实施例中的数据渲染的装置进行描述，请参阅图4，本申请实施例中数据渲染的装置一个实施例包括：

该数据渲染的装置400可以包括一个或一个以上中央处理器(centralprocessing units，CPU)401和存储器405，该存储器405中存储有一个或一个以上的应用程序或数据。

其中，存储器405可以是易失性存储或持久存储。存储在存储器405的程序可以包括一个或一个以上模块，每个模块可以包括对数据渲染的装置中的一系列指令操作。更进一步地，中央处理器401可以设置为与存储器405通信，在数据渲染的装置400上执行存储器405中的一系列指令操作。

数据渲染的装置400还可以包括一个或一个以上电源402，一个或一个以上有线或无线网络接口403，一个或一个以上输入输出接口404，和/或，一个或一个以上操作系统，例如Windows ServerTM，Mac OS XTM，UnixTM,LinuxTM，FreeBSDTM等。

该中央处理器401可以执行前述图1至图2所示实施例中客户端所执行的操作，具体此处不再赘述。

本申请实施例还提供了一种计算机存储介质，其中一个实施例包括：该计算机存储介质中存储有指令，该指令在计算机上执行时，使得该计算机执行前述图1至图2所示实施例中客户端所执行的操作。

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

在本申请所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

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

Claims (10)

1.一种数据渲染的方法，应用于具有至少一个网页展示窗口的客户端上，其特征在于，所述方法包括：

根据所述网页展示窗口的尺寸以及所述网页展示窗口的可视化区域的宽高配置参数以确定所述网页展示窗口的可视化区域的目标值；

对获取到的待渲染的数据源进行解析，得到多条待渲染数据，所述待渲染数据包括第一待渲染数据和第二待渲染数据；

创建与所述目标值相同的多个DOM对象，每个所述可视化区域分别对应一个所述DOM对象；

根据所述第一待渲染数据渲染所述DOM对象，将所述DOM对象渲染后的数据展示在所述DOM对象对应的可视化区域中；

当监听到数据切换指令时，根据所述第二待渲染数据更新渲染目标DOM对象，将所述目标DOM对象渲染后的数据展示在所述目标DOM对象对应的可视化区域中，所述目标DOM对象为所述多个DOM对象中的一个。

2.根据权利要求1所述的方法，其特征在于，每条所述待渲染数据对应唯一的一个虚拟ID，每一个所述虚拟ID关联于1个DOM对象；

所述根据所述第一待渲染数据渲染所述DOM对象，包括：

根据所述第一待渲染数据渲染与所述第一待渲染数据的虚拟ID关联的DOM对象；

所述根据所述第二待渲染数据更新渲染目标DOM对象，包括：

确定与所述第二待渲染数据的虚拟ID关联的所述目标DOM对象，根据所述第二待渲染数据更新渲染所述目标DOM对象。

3.根据权利要求1所述的方法，其特征在于，所述网页展示窗口的每一行包括N个所述可视化区域，N条所述待渲染数据为一组，每组所述待渲染数据唯一地对应一个虚拟分组ID，每一个所述虚拟分组ID关联于N个DOM对象；其中N为大于1的正整数；

所述根据所述第一待渲染数据渲染所述DOM对象，包括：

根据N条第一待渲染数据渲染与所述N条第一待渲染数据的虚拟分组ID关联的N个DOM对象；

所述根据所述第二待渲染数据更新渲染目标DOM对象，包括：

确定与N条第二待渲染数据的虚拟分组ID关联的N个目标DOM对象，根据所述N条第二待渲染数据更新渲染所述N个目标DOM对象。

4.根据权利要求2所述的方法，其特征在于，所述宽高配置参数包括所述可视化区域的行高配置参数；

所述方法还包括：

将所述网页展示窗口中滚动条的顶部至所述网页展示窗口的顶部的距离除以所述行高配置参数得到的商并取整，以及将得到的数值作为起始位置数值；

将所述网页展示窗口的高度值除以所述行高配置参数得到的商作为结束位置数值；

所述根据所述第一待渲染数据渲染所述DOM对象，包括：

在所述多条待渲染数据中确定对应于所述起始位置数值的虚拟ID以及对应于所述结束位置数值的虚拟ID，将对应于所述起始位置数值的虚拟ID至对应于所述结束位置数值的虚拟ID之间的多个虚拟ID对应的多条待渲染数据确定为所述第一待渲染数据，分别根据每条所述第一待渲染数据渲染所述DOM对象。

5.根据权利要求4所述的方法，其特征在于，所述当监听到数据切换指令时，根据所述第二待渲染数据更新渲染目标DOM对象，包括：

当监听到所述滚动条的拖动操作时，根据计算得到的所述起始位置数值和所述结束位置数值，在所述多条待渲染数据中确定对应于所述起始位置数值的虚拟ID以及对应于所述结束位置数值的虚拟ID，将对应于所述起始位置数值的虚拟ID至对应于所述结束位置数值的虚拟ID之间的多个虚拟ID对应的多条待渲染数据确定为所述第二待渲染数据，分别根据每条所述第二待渲染数据渲染所述目标DOM对象。

6.根据权利要求1-5任一项所述的方法，其特征在于，所述将所述DOM对象渲染后的数据展示在所述DOM对象对应的可视化区域中之后，所述方法还包括：

将所述可视化区域展示的数据对应的虚拟ID与所述宽高配置参数的乘积确定为所述可视化区域的坐标；

当监听到拖拽操作时，确定所述拖拽操作的拖拽起点与拖拽终点构成的选择范围，将坐标落在所述选择范围内的可视化区域所展示的数据确定为所述拖拽操作选中的目标数据，对所述目标数据执行操作指令所指示的操作。

7.一种数据渲染的装置，应用于具有至少一个网页展示窗口的客户端上，其特征在于，包括：

确定单元，用于根据所述网页展示窗口的尺寸以及所述网页展示窗口的可视化区域的宽高配置参数以确定所述网页展示窗口的可视化区域的目标值；

解析单元，用于对获取到的待渲染的数据源进行解析，得到多条待渲染数据，所述待渲染数据包括第一待渲染数据和第二待渲染数据；

创建单元，用于创建与所述目标值相同的多个DOM对象，每个所述可视化区域分别对应一个所述DOM对象；

渲染单元，用于根据所述第一待渲染数据渲染所述DOM对象，将所述DOM对象渲染后的数据展示在所述DOM对象对应的可视化区域中；

所述渲染单元还用于当监听到数据切换指令时，根据所述第二待渲染数据更新渲染目标DOM对象，将所述目标DOM对象渲染后的数据展示在所述目标DOM对象对应的可视化区域中，所述目标DOM对象为所述多个DOM对象中的一个。

8.根据权利要求7所述的客户端，其特征在于，每条所述待渲染数据对应唯一的一个虚拟ID，每一个所述虚拟ID关联于1个DOM对象；

所述渲染单元具体用于根据所述第一待渲染数据渲染与所述第一待渲染数据的虚拟ID关联的DOM对象；确定与所述第二待渲染数据的虚拟ID关联的所述目标DOM对象，根据所述第二待渲染数据更新渲染所述目标DOM对象。

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至6中任一项所述的方法。

10.一种计算机存储介质，其特征在于，所述计算机存储介质中存储有指令，所述指令在计算机上执行时，使得所述计算机执行如权利要求1至6中任一项所述的方法。

Images