[发明专利]数据渲染系统、方法及电子设备

说明书

本申请提供一种数据渲染系统、方法及电子设备，包括建立具有显示区的虚拟数据表，执行行垂直高度转换处理以获得目标数据的渲染行垂直高度，再根据滚动条的当前位置计算最小显示行垂直高度和最大显示行垂直高度，据以提取渲染行垂直高度介于最小显示行垂直高度和最大显示行垂直高度之间的目标数据并渲染至显示区中以最终呈现给用户，借此，本申请能按需渲染网页中的表格数据，可以改善浏览器的渲染性能并节省计算机资源。

技术领域

本申请实施例涉及一种数据渲染技术，尤指一种针对网页中的表格数据进行渲染的数据渲染系统、方法及电子设备。

背景技术

在浏览网页中，通过会用表格显示服务端返回的数据，但如果服务端返回的数据过大，又或者是一个树结构的数据，则容易造成网页渲染过多的元素而导致性能低下，特别是在浏览器重绘以及回流的过程中会导致浏览器卡死，其主要原因是因为大多数浏览器设备的刷新频率是60次/秒，也就说是浏览器对每一帧画面的渲染工作要在16ms完成，如果网页表格中显示的元素过多，造成渲染的时间超出这个时间，则页面的渲染就会出现卡顿现象。

再者，随着移动设备功能的越来越强大，人们开始习惯使用移动设备以替代传统电脑来浏览网页，然而，由于移动设备的处理能力有限，导致上述所提及的网页渲染时存在的卡顿现象在移动设备中显得尤为明显，极大影响了用户的使用体验。

有鉴于此，如何克服此技术问题，即为本申请待解决的技术问题。

发明内容

鉴于上述问题，本申请的主要目的在于提供一种数据渲染方法、系统及电子设备，可以改善浏览器的渲染性能，并节省计算机的资源。

本申请的另一目的在于提供一种数据渲染方法、系统及电子设备，可提升使用者的使用感受。

为达上述目的及其它相关目的，本申请的一实施例提供一种数据渲染方法，用于针对网页中的表格数据进行渲染，其包括：建立虚拟数据表，并于所述虚拟数据表中定义显示区、顶部隐藏区、以及底部隐藏区，且针对所述显示区设定显示高度；获取待渲染的目标数据，并针对所述目标数据执行行垂直高度转换处理，以获得各所述目标数据的渲染行垂直高度，其中，所述渲染行垂直高度用于定义所述目标数据的所在数据行在所述虚拟数据表中的绝对高度位置；获取滚动条的当前位置，并根据所述显示区的所述显示高度，计算最小显示行垂直高度和最大显示行垂直高度；以及提取所述渲染行垂直高度大于等于所述最小显示行垂直高度且小于等于所述最大显示行垂直高度的所述目标数据，并将所述目标数据渲染至所述显示区中；提取所述渲染行垂直高度小于所述最小显示行垂直高度的所述目标数据，并累计各所述目标数据的所述渲染行垂直高度以生成顶部行垂直高度累计变量，并将所述顶部行垂直高度累计变量作为所述顶部隐藏区的高度值；提取所述渲染行垂直高度大于所述最大显示行垂直高度的所述目标数据，并累计各所述目标数据的所述渲染行垂直高度以生成底部行垂直高度累计变量，并将所述底部行垂直高度累计变量作为所述底部隐藏区的高度值。

可选地，在本申请的实施例中，所述方法还包括借由显示屏幕显示被渲染至所述显示区的所述目标数据。

可选地，在本申请的实施例中，所述方法还包括设定所述虚拟数据表的显示宽度，其中，所述显示宽度用于定义所述虚拟数据表中的各数据行可显示的所述目标数据的数量；以及获取所述目标数据的总数量，并依据所述显示宽度对所述目标数据执行所述行垂直高度转换处理。

可选地，在本申请的实施例中，所述显示区的所述显示高度和/或所述显示宽度为固定参数。

可选地，在本申请的实施例中，所述显示区的所述显示高度和/或所述显示宽度为可变参数，且所述方法还包括设定与所述显示屏幕的显示规格相对应的所述显示区的所述显示高度和/或所述显示宽度；以及识别所述显示屏幕的显示规格，据以获取所述显示区的所述显示高度和/或所述显示宽度。