一种查询数据渲染方法、装置和电子设备制造方法及图纸

本发明专利技术涉及计算机技术领域，具体涉及一种查询数据渲染方法、装置和电子设备，包括：获取可视区域高度、待查询数据中每条数据的高度；根据所述可视区域高度、所述每条数据的高度获取可视区域的数据渲染项；通过监听滚动事件获取滚动偏移距离，根据所述滚动偏移距离、所述每条数据的高度获取非可视区域数据渲染项；对所述可视区域的数据渲染项、所述非可视区域数据渲染项进行渲染。本发明专利技术通过只对可视区域数据进行渲染，对非可视区域中的数据不渲染或部分渲染，由原来的几万条展示缩小至几十条以内，极大提升浏览器渲染性能，使系统更加稳定流畅。流畅。流畅。

【技术实现步骤摘要】
一种查询数据渲染方法、装置和电子设备


[0001]本专利技术涉及计算机
，尤其涉及一种查询数据渲染方法、装置和电子设备。

技术介绍

[0002]目前在SQL(Structured Query Language，结构化查询语言)在线自助查询中对表中数据要求全部展示，通常会有上万条数据，且在该场景下，服务端不做任何处理全部返回到前端，在浏览器展示过程中由于数据量巨大，造成页面渲染时间长、卡顿等问题。

技术实现思路

[0003]本专利技术提供了一种查询数据渲染方法、装置和电子设备，用以提升浏览器渲染性能，使系统更加稳定流畅。
[0004]本说明书实施例提供一种查询数据渲染方法，包括：
[0005]获取可视区域高度、待查询数据中每条数据的高度；
[0006]根据所述可视区域高度、所述每条数据的高度获取可视区域的数据渲染项；
[0007]通过监听滚动事件获取滚动偏移距离，根据所述滚动偏移距离、所述每条数据的高度获取非可视区域数据渲染项；
[0008]对所述可视区域的数据渲染项、所述非可视区域数据渲染项进行渲染。
[0009]优选的，所述获取可视区域高度、待查询数据中每条数据的高度，包括：
[0010]监听前端页面的调整窗口大小事件；
[0011]当页面窗口大小发生变化，则自动获取当前前端页面的可视区域高度；
[0012]通过预设函数自动计算待查询数据中每条数据的高度。
[0013]优选的，所述通过监听滚动事件获取滚动偏移距离，包括：
[0014]获取所述可视区域的数据渲染项的终止项位置；
[0015]监听所述待查询数据的滚动事件；
[0016]当所述待查询数据发生滚动时，根据所述可视区域的数据渲染项的终止项位置与发生滚动后所述可视区域的数据渲染项的终止项位置的距离差值获取滚动偏移距离。
[0017]优选的，在所述对所述可视区域的数据渲染项、所述非可视区域数据渲染项进行渲染之前，包括：
[0018]判断可视区域的数据是否需要滚动；
[0019]当可视区域的数据需要滚动时，通过层叠样式控制渲染区域偏移至可视区域中，所述渲染区域偏移距离与所述滚动偏移距离相同。
[0020]本说明书实施例还提供一种查询数据渲染装置，包括：
[0021]信息获取模块，用于获取可视区域高度、待查询数据中每条数据的高度；
[0022]信息处理模块，用于根据所述可视区域高度、所述每条数据的高度获取可视区域的数据渲染项；
[0023]事件监听模块，用于通过监听滚动事件获取滚动偏移距离，根据所述滚动偏移距
离、所述每条数据的高度获取非可视区域数据渲染项；
[0024]渲染模块，用于对所述可视区域的数据渲染项、所述非可视区域数据渲染项进行渲染。
[0025]优选的，所述信息获取模块包括：
[0026]前端页面监听单元，用于监听前端页面的调整窗口大小事件；
[0027]信息获取单元，用于当页面窗口大小发生变化，则自动获取当前前端页面的可视区域高度；
[0028]高度计算单元，用于通过预设函数自动计算待查询数据中每条数据的高度。
[0029]优选的，所述事件监听模块包括：
[0030]位置获取单元，用于获取所述可视区域的数据渲染项的终止项位置；
[0031]事件监听单元，用于监听所述待查询数据的滚动事件；
[0032]偏移距离计算单元，用于当所述待查询数据发生滚动时，根据所述可视区域的数据渲染项的终止项位置与发生滚动后所述可视区域的数据渲染项的终止项位置的距离差值获取滚动偏移距离。
[0033]优选的，在所述对所述可视区域的数据渲染项、所述非可视区域数据渲染项进行渲染之前，包括：
[0034]滚动判定模块，用于判断可视区域的数据是否需要滚动；
[0035]偏移执行模块，用于当可视区域的数据需要滚动时，通过层叠样式控制渲染区域偏移至可视区域中，所述渲染区域偏移距离与所述滚动偏移距离相同。
[0036]一种电子设备，其中，该电子设备包括：
[0037]处理器以及存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行上述任一项所述的方法。
[0038]一种计算机可读存储介质，其中，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被处理器执行时，实现上述任一项所述的方法。
[0039]本专利技术通过只对可视区域数据进行渲染，对非可视区域中的数据不渲染或部分渲染，由原来的几万条展示缩小至几十条以内，极大提升浏览器渲染性能，使系统更加稳定流畅。
附图说明
[0040]此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
[0041]图1为本说明书实施例提供的一种查询数据渲染方法的原理示意图；
[0042]图2为本说明书实施例提供的一种查询数据渲染装置的结构示意图；
[0043]图3为本说明书实施例提供的一种电子设备的结构示意图；
[0044]图4为本说明书实施例提供的一种计算机可读介质的原理示意图。
具体实施方式
[0045]现在将参考附图更全面地描述本专利技术的示例性实施例。然而，示例性实施例能够以多种形式实施，且不应被理解为本专利技术仅限于在此阐述的实施例。相反，提供这些示例性
实施例能够使得本专利技术更加全面和完整，更加便于将专利技术构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的元件、组件或部分，因而将省略对它们的重复描述。
[0046]在符合本专利技术的技术构思的前提下，在某个特定的实施例中描述的特征、结构、特性或其他细节不排除可以以合适的方式结合在一个或更多其他的实施例中。
[0047]在对于具体实施例的描述中，本专利技术描述的特征、结构、特性或其他细节是为了使本领域的技术人员对实施例进行充分理解。但是，并不排除本领域技术人员可以实践本专利技术的技术方案而没有特定特征、结构、特性或其他细节的一个或更多。
[0048]附图中所示的图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。
[0049]附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
[0050]术语“和/或”或者“及/或”包括相关联的列出项目中的任一个或多者的所有组合。
[0051]参照图1为本说明书实施例提供的一种查询数据渲染方法的原理示意图，包括：
[0052]S101：获取可本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种查询数据渲染方法，其特征在于，包括：获取可视区域高度、待查询数据中每条数据的高度；根据所述可视区域高度、所述每条数据的高度获取可视区域的数据渲染项；通过监听滚动事件获取滚动偏移距离，根据所述滚动偏移距离、所述每条数据的高度获取非可视区域数据渲染项；对所述可视区域的数据渲染项、所述非可视区域数据渲染项进行渲染。2.如权利要求1所述的一种查询数据渲染方法，其特征在于，所述获取可视区域高度、待查询数据中每条数据的高度，包括：监听前端页面的调整窗口大小事件；当页面窗口大小发生变化，则自动获取当前前端页面的可视区域高度；通过预设函数自动计算待查询数据中每条数据的高度。3.如权利要求1
‑
2中任一项所述的一种查询数据渲染方法，其特征在于，所述通过监听滚动事件获取滚动偏移距离，包括：获取所述可视区域的数据渲染项的终止项位置；监听所述待查询数据的滚动事件；当所述待查询数据发生滚动时，根据所述可视区域的数据渲染项的终止项位置与发生滚动后所述可视区域的数据渲染项的终止项位置的距离差值获取滚动偏移距离。4.如权利要求1
‑
3中任一项所述的一种查询数据渲染方法，其特征在于，在所述对所述可视区域的数据渲染项、所述非可视区域数据渲染项进行渲染之前，包括：判断可视区域的数据是否需要滚动；当可视区域的数据需要滚动时，通过层叠样式控制渲染区域偏移至可视区域中，所述渲染区域偏移距离与所述滚动偏移距离相同。5.一种查询数据渲染装置，其特征在于，包括：信息获取模块，用于获取可视区域高度、待查询数据中每条数据的高度；信息处理模块，用于根据所述可视区域高度、所述每条数据的高度获取可视区域的数据渲染项；事件监听模块，用于通过监听滚动事件获取滚动偏移距离，根据所述滚动偏移距离、所述每条数据...

【专利技术属性】
技术研发人员：韩月强，周飞，徐国兴，
申请(专利权)人：上海淇玥信息技术有限公司，
类型：发明
国别省市：