数据渲染方法、装置、电子设备及存储介质制造方法及图纸

本发明专利技术涉及人工智能技术领域，提供一种数据渲染方法、装置、电子设备及存储介质，所述方法包括：获取浏览器显示的待渲染页面及渲染条件；获取浏览器显示的待渲染页面对应的滑动条的当前起始滑动位置坐标；基于渲染条件及滑动条的当前起始滑动位置坐标，创建可视区；响应于待渲染页面中的滑动条的滑动，获取滑动条的滑动列表的高度；根据创建的可视区及滑动列表的高度，确定待渲染列表；将待渲染列表加载至可视区进行渲染。本发明专利技术通过将所述待渲染列表加载至所述可视区进行渲染，无需渲染可视区外的数据，提高了渲染效率。提高了渲染效率。提高了渲染效率。

【技术实现步骤摘要】
数据渲染方法、装置、电子设备及存储介质


[0001]本专利技术涉及人工智能
，具体涉及一种数据渲染方法、装置、电子设备及存储介质。

技术介绍

[0002]前端发展至今，如今的前端越来越复杂，知识点越来越丰富，从最早的html,css与Javascript三剑客到现在演变出了无数的库和框架，其中主流的UI框架有基于vue的element UI,vant UI，基于react的ant design等等，主要是基于轻量化的各种场景，缺少对于大数据场景下支持，随着大数据愈发蓬勃发展，对于大数据场景下的渲染需求越来越大。
[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]第三获取模块，用于响应于所述待渲染页面中的滑动条的滑动，获取所述滑动条的滑动列表的高度；
[0042]确定模块，用于根据创建的可视区及所述滑动列表的高度，确定待渲染列表；
[0043]渲染模块，用于将所述待渲染列表加载至所述可视区进行渲染。
[0044]本专利技术的第三方面提供一种电子设备，所述电子设备包括处理器和存储器，所述处理器用于执行所述存储器中存储的计算机程序时实现所述的数据渲染方法。
[0045]本专利技术的第四方面提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现所述的数据渲染方法。
[0046]综上所述，本专利技术所述的数据渲染方法、装置、电子设备及存储介质，通过获取所述浏览器显示的待渲染页面对应的滑动条的当前起始滑动位置坐标，基于所述渲染条件及所述滑动条的当前起始滑动位置坐标，创建可视区，只需要渲染可视区中的待渲染数据，无需将所述的待渲染数据同时都渲染，提高渲染效率。响应于所述待渲染页面中的滑动条的滑动，获取所述滑动条的滑动列表的高度，根据创建的可视区及所述滑动列表的高度，确定待渲染列表，确保了待渲染列表的准确率，进而提高了渲染效率及准确率。将所述待渲染列表加载至所述可视区进行渲染，无需渲染可视区外的数据，提高了渲染效率。
附图说明
[0047]图1是本专利技术实施例一提供的数据渲染方法的流程图。
[0048]图2是本专利技术实施例二提供的数据渲染装置的结构图。
[0049]图3是本专利技术实施例三提供的电子设备的结构示意图。
具体实施方式
[0050]为了能够更清楚地理解本专利技术的上述目的、特征和优点，下面结合附图和具体实施例对本专利技术进行详细描述。需要说明的是，在不冲突的情况下，本专利技术的实施例及实施例中的特征可以相互组合。
[0051]除非另有定义，本文所使用的所有的技本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种数据渲染方法，其特征在于，所述方法包括：响应于用户的数据渲染请求，获取浏览器显示的待渲染页面及渲染条件；获取所述浏览器显示的待渲染页面对应的滑动条的当前起始滑动位置坐标；基于所述渲染条件及所述滑动条的当前起始滑动位置坐标，创建可视区；响应于所述待渲染页面中的滑动条的滑动，获取所述滑动条的滑动列表的高度；根据创建的可视区及所述滑动列表的高度，确定待渲染列表；将所述待渲染列表加载至所述可视区进行渲染。2.如权利要求1所述的数据渲染方法，其特征在于，所述获取所述浏览器显示的待渲染页面对应的滑动条的当前起始滑动位置坐标包括：识别所述浏览器显示的待渲染页面的外层容器；从所述外层容器中获取对应的滑动条的当前起始滑动位置坐标。3.如权利要求1所述的数据渲染方法，其特征在于，所述基于所述渲染条件及所述滑动条的当前起始滑动位置坐标，创建可视区包括：解析所述渲染条件，获取可视区渲染行数、可视区渲染行数列表及对应的每行渲染数据的高度；将所述当前起始滑动位置坐标及所述可视区渲染行数列表的起始行的行编码，确定为所述可视区的起始索引；将所述可视区渲染行数、对应的每行渲染的高度及所述可视区渲染行数列表的结束行的行编码，确定为所述可视区的结束索引；基于所述可视区的起始索引和结束索引创建可视区。4.如权利要求3所述的数据渲染方法，其特征在于，所述基于所述可视区的起始索引和结束索引创建可视区包括：将所述滑动条的当前起始滑动位置坐标确定为所述可视区的初始位置坐标；计算所述可视区渲染行数与对应的每行渲染的高度乘积之和，得到可视区的高度；计算所述可视区的高度与所述可视区的初始位置坐标之和，得到可视区的结束位置坐标；基于所述可视区的初始位置坐标和结束位置坐标创建可视区。5.如权利要求1所述的数据渲染方法，其特征在于，所述响应于所述待渲染页面中的滑动条的滑动，获取所述滑动条的滑动列表的高度包括：响应于所述滑动条从当前起始滑动位置开始滑动，记录滑动列表的每行滑动数据的高度；累加所述滑动列表中的每行滑动数据的高度之和，得到所述滑动条的当前...

【专利技术属性】
技术研发人员：董蕊，
申请(专利权)人：平安国际智慧城市科技股份有限公司，
类型：发明
国别省市：