表格页面渲染方法、装置、电子装置和存储介质制造方法及图纸

本申请涉及一种表格页面渲染方法、装置、电子装置和存储介质，其中，该表格页面渲染方法包括：获取表格参数、可视区域以及虚拟列表区域，根据所述表格参数，获取第一渲染数据以及生成表格总范围；根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染，生成表格页面；检测所述虚拟列表区域的数据是否全部有值；若所述虚拟列表区域的数据不是全部有值，则获取虚拟列表区域的第二渲染数据，对所述虚拟列表区域的页面进行渲染更新所述表格页面。通过本申请，解决了页面滚动渲染慢的问题，实现表格数据的按需加载和分片渲染，极大的提高了浏览器对大型表格数据的渲染性能，对类似需求场景下的开发工作具有很好的普适性。求场景下的开发工作具有很好的普适性。求场景下的开发工作具有很好的普适性。

【技术实现步骤摘要】
表格页面渲染方法、装置、电子装置和存储介质


[0001]本申请涉及互联网
，特别是涉及表格页面渲染方法、装置、电子装置和存储介质。

技术介绍

[0002]随着互联网行业的迅猛发展，web前端技术也处于高速发展阶段。Web项目的数量和规模在不断扩大，项目的复杂度在不断提升。
[0003]Web前端发展的初期阶段，前端开发主要是实现后台数据的简单排版，以及数据展示。这种方式主要通过后台来实现数据的维护和表格参数的整体刷新，加之初期受浏览器性能限制，页面资源消耗很大。
[0004]web前端发展到2.0阶段后，出现了Ajax通信与页面局部更新机制，有限缓解了整体页面刷新导致的性能瓶颈。这种方案的主流实现方案为模板引擎技术，将数据通过模板引擎渲染到视图，再将旧视图进行替换，从而实现页面的局部更新。但是随着项目复杂度越来越高，加载的数据量越来越大，会引发潜在的性能问题：如果海量数据要加载渲染，导致页面渲染的DOM节点也很多，这样视图在更新时，要对大量的DOM节点进行替换操作，而DOM节点的操作是浏览器的性能瓶颈，所以造成的性能开销很大，容易造成页面白屏或卡顿现象。
[0005]通过表格对表格参数进行展示，是很多web项目中常见的应用场景。而表格中的行和列都对应一个DOM节点，如果不做任何优化，直接渲染大量的DOM节点，即使框架本身用了虚拟DOM，但是在首次渲染的时候，仍然生成了大量的真实DOM，进入页面后，需要渲染这批节点，就会花费很长的时间，从而出现白屏现象。此外，如果在页面触发了滚动时间，则会使得内存使用率增加，出现页面卡顿的操作感受。如果同时渲染大批量的DOM节点，仍会造成以下几个问题：1.浏览器失帧。因为渲染较慢，所以无法维持浏览器的帧率，用户主观感受为严重的卡顿。2.页面失去响应或者其他时间无法及时被触发。
[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]第四个方面，在本实施例中提供了一种存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述第一个方面所述的表格页面渲染方法。
[0042]与相关技术相比，在本实施例中提供的表格页面渲染方法，通过虚拟表格结合防
抖动机制，解决了页面滚动渲染慢的问题，实现表格数据的按需加载和分片渲染，极大的提高了浏览器对大型表格数据的渲染性能，对类似需求场景下的开发工作具有很好的普适性。
[0043]本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。
附图说明
[0044]此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
[0045]图1是本实施例的表格页面渲染方法的终端的硬件结构框图；
[0046]图2是本实施例的表格页面渲染方法的流程图；
[0047]图3是本实施例的另一种表格页面渲染方法的流程图；
[0048]图4是本实施例的表格页面渲染装置的结构框图。
具体实施方式
[0049]为更清楚地理解本申请的目的、技术方案和优点，下面本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种表格页面渲染方法，其特征在于，包括：获取表格参数、可视区域以及虚拟列表区域，其中，所述表格页面显示在屏幕上的区域为可视区域，所述虚拟列表区域包含所述可视区域；根据所述表格参数，获取第一渲染数据以及生成表格总范围；根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染，生成表格页面；检测所述虚拟列表区域的数据是否全部有值；若所述虚拟列表区域的数据不是全部有值，则获取虚拟列表区域的第二渲染数据，对所述虚拟列表区域的页面进行渲染更新所述表格页面。2.根据权利要求1所述的表格页面渲染方法，其特征在于，所述获取表格参数、可视区域以及虚拟列表区域包括：获取所述可视区域的位置参数；根据所述位置参数，更新所述虚拟列表区域。3.根据权利要求1所述的表格页面渲染方法，其特征在于，所述根据所述第一渲染数据对所述虚拟列表区域的页面进行渲染，生成表格页面包括：接收客户端发送的刷新页面请求；根据所述刷新页面请求，更新所述虚拟列表区域的表格内容。4.根据权利要求3所述的表格页面渲染方法，其特征在于，所述接收客户端发送的刷新页面请求之前包括：其中，所述变量新操作请求中包括变量的输入信息；获取变量新操作请求，判断所述变量新操作请求的输入信息是否合法；若所述变量新操作请求合法，则提示操作成功；若所述变量新操作请求不合法，则提示操作不成功。5.根据权利要求3所述的表格页面渲染方法，其特征在于，所述根据所述刷新页面请求，更新所述表格页面包括：接收预设时间间隔中的所有刷新页面请求；根据最后一次的刷新页面请求，更新所述表格页面。6.根...

【专利技术属性】
技术研发人员：柏立悦，王杰畅，陈善镇，
申请(专利权)人：浙江中控技术股份有限公司，
类型：发明
国别省市：