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

本发明专利技术实施例适用于前端开发技术领域，提供了一种数据渲染方法、装置、电子设备及存储介质，其中，数据渲染方法包括：在监听到滚动条的滚动事件发生的情况下，获取浏览器中所述滚动条对应的滚动区域的上边界与所述浏览器的可视化区域的上边界的第一距离值；所述滚动区域的高度基于待渲染于所述可视化区域中的第一数据的索引长度确定；基于所述第一距离值在所述索引长度的索引中确定起始索引和结束索引；基于所述起始索引和所述结束索引从所述第一数据中提取第二数据；将所述第二数据装载到数据容器中，以在所述可视化区域中渲染所述第二数据；所述数据容器用于装载展示于所述可视化区域中的数据。化区域中的数据。化区域中的数据。

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


[0001]本专利技术涉及前端开发
，尤其涉及一种数据渲染方法、装置、电子设备及存储介质。

技术介绍

[0002]将数据从后台展示到浏览器网页上需要对数据进行渲染。相关技术中，在分页加载技术不适用的业务场景下，由于浏览器在渲染数据量大的数据时需要全量渲染数据，导致浏览器渲染时间长，网页卡顿。

技术实现思路

[0003]为了解决上述问题，本专利技术实施例提供了一种数据渲染方法、装置、电子设备及存储介质，以至少解决相关技术中浏览器全量渲染数据大的数据时网页卡顿的问题。
[0004]本专利技术的技术方案是这样实现的：
[0005]第一方面，本专利技术实施例提供了一种数据渲染方法，该方法包括：
[0006]在监听到滚动条的滚动事件发生的情况下，获取浏览器中所述滚动条对应的滚动区域的上边界与所述浏览器的可视化区域的上边界的第一距离值；所述滚动区域的高度基于待渲染于所述可视化区域中的第一数据的索引长度确定；
[0007]基于所述第一距离值在所述索引长度的索引中确定起始索引和结束索引；
[0008]基于所述起始索引和所述结束索引从所述第一数据中提取第二数据；
[0009]将所述第二数据装载到数据容器中，以在所述可视化区域中渲染所述第二数据；所述数据容器用于装载展示于所述可视化区域中的数据。
[0010]上述方案中，所述基于所述第一距离值在所述索引长度的索引中确定起始索引和结束索引，包括：
[0011]基于所述第一距离值确定所述起始索引；
[0012]基于所述起始索引和所述数据容器可装载的数据对应的索引长度确定所述结束索引。
[0013]上述方案中，所述方法还包括：
[0014]在滚动条的滚动事件发生的情况下，确定所述数据容器相对于所述可视化区域的偏移量；
[0015]基于所述偏移量调整所述数据容器在所述可视化区域中的相对坐标，使得所述数据容器中装载的数据全部展示于所述可视化区域中。
[0016]上述方案中，所述确定所述数据容器相对于所述可视化区域的偏移量，包括：
[0017]基于所述第一距离值确定所述数据容器相对于所述可视化区域的偏移量。
[0018]上述方案中，所述方法还包括：
[0019]基于设定尺寸创建所述可视化区域；
[0020]基于待渲染于所述可视化区域中的第一数据的索引长度创建所述滚动区域；
[0021]创建所述数据容器；所述数据容器用于装载展示于所述可视化区域中的数据。
[0022]上述方案中，所述方法还包括：
[0023]在所述第一数据表征表格数据的情况下，基于无序列表标签渲染所述第二数据。
[0024]上述方案中，所述基于所述偏移量调整所述数据容器在所述可视化区域中的相对坐标，包括：
[0025]基于所述偏移量调整所述数据容器的第一参数；所述第一参数包括以下任意一项：
[0026]数据容器的transform属性值；
[0027]数据容器的style属性值。
[0028]第二方面，本专利技术实施例提供了一种数据渲染装置，该装置包括：
[0029]获取模块，用于在监听到滚动条的滚动事件发生的情况下，获取浏览器中所述滚动条对应的滚动区域的上边界与所述浏览器的可视化区域的上边界的第一距离值；所述滚动区域的高度基于待渲染于所述可视化区域中的第一数据的索引长度确定；
[0030]确定模块，用于基于所述第一距离值在所述索引长度的索引中确定起始索引和结束索引；
[0031]提取模块，用于基于所述起始索引和所述结束索引从所述第一数据中提取第二数据；
[0032]装载模块，用于将所述第二数据装载到数据容器中，以在所述可视化区域中渲染所述第二数据；所述数据容器用于装载展示于所述可视化区域中的数据。
[0033]第三方面，本专利技术实施例提供了一种电子设备，包括处理器和存储器，所述处理器和存储器相互连接，其中，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行本专利技术实施例第一方面提供的数据渲染方法的步骤。
[0034]第四方面，本专利技术实施例提供了一种计算机可读存储介质，包括：所述计算机可读存储介质存储有计算机程序。所述计算机程序被处理器执行时实现如本专利技术实施例第一方面提供的数据渲染方法的步骤。
[0035]本专利技术实施例在监听到滚动条的滚动事件发生的情况下，获取浏览器中滚动条对应的滚动区域的上边界与浏览器的可视化区域的上边界的第一距离值。然后基于第一距离值在索引长度的索引中确定起始索引和结束索引。最后基于起始索引和结束索引从第一数据中提取第二数据，将第二数据装载到数据容器中，以在可视化区域中渲染第二数据。其中，数据容器用于装载展示于可视化区域中的数据，滚动区域的高度基于待渲染于可视化区域中的第一数据的索引长度确定。本专利技术实施例在滚动条滚动之后，确定数据容器装载的第二数据的起始索引和结束索引，从第一数据中提取起始索引和结束索引之间的第二数据，浏览器在滚动条每次滚动后只需要渲染数据容器中装载的第二数据，避免了浏览器渲染第一数据导致渲染时间长的问题。本专利技术实施例减少了渲染时长，加快了网页响应速度。
附图说明
[0036]图1是本专利技术实施例提供的一种数据渲染方法的实现流程示意图；
[0037]图2是本专利技术实施例提供的一种浏览器页面的示意图；
[0038]图3是本专利技术实施例提供的一种第一距离值的示意图；
[0039]图4是本专利技术实施例提供的另一种数据渲染方法的实现流程示意图；
[0040]图5是本专利技术实施例提供的另一种数据渲染方法的实现流程示意图；
[0041]图6是本专利技术实施例提供的另一种数据渲染方法的实现流程示意图；
[0042]图7是本专利技术应用实施例提供的一种数据渲染流程的示意图；
[0043]图8是本专利技术实施例提供的一种数据渲染装置的示意图；
[0044]图9是本专利技术一实施例提供的电子设备的示意图。
具体实施方式
[0045]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0046]目前，浏览器在渲染大数据量的数据时，经常采用分页加载技术，分页加载即将用户一次请求的数据划分为几页，浏览器每次只加载和渲染一页的内容。分页加载技术可以提高界面的阅读性，节省带宽，增加服务器的处理速度。
[0047]有一些网页无法使用分页加载技术，比如前后联系紧密的瀑布流数据，浏览器会采用批量渲染数据方式来渲染数据，然而批量渲染数据实际上是通过向首屏渲染数据中批量添加需要渲染的数据，本质上仍需渲染全部数据，虽然减少了首屏数据的渲染时间本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种数据渲染方法，其特征在于，所述方法包括：在监听到滚动条的滚动事件发生的情况下，获取浏览器中所述滚动条对应的滚动区域的上边界与所述浏览器的可视化区域的上边界的第一距离值；所述滚动区域的高度基于待渲染于所述可视化区域中的第一数据的索引长度确定；基于所述第一距离值在所述索引长度的索引中确定起始索引和结束索引；基于所述起始索引和所述结束索引从所述第一数据中提取第二数据；将所述第二数据装载到数据容器中，以在所述可视化区域中渲染所述第二数据；所述数据容器用于装载展示于所述可视化区域中的数据。2.根据权利要求1所述的方法，其特征在于，所述基于所述第一距离值在所述索引长度的索引中确定起始索引和结束索引，包括：基于所述第一距离值确定所述起始索引；基于所述起始索引和所述数据容器可装载的数据对应的索引长度确定所述结束索引。3.根据权利要求1所述的方法，其特征在于，所述方法还包括：在滚动条的滚动事件发生的情况下，确定所述数据容器相对于所述可视化区域的偏移量；基于所述偏移量调整所述数据容器在所述可视化区域中的相对坐标，使得所述数据容器中装载的数据全部展示于所述可视化区域中。4.根据权利要求3所述的方法，其特征在于，所述确定所述数据容器相对于所述可视化区域的偏移量，包括：基于所述第一距离值确定所述数据容器相对于所述可视化区域的偏移量。5.根据权利要求1所述的方法，其特征在于，所述方法还包括：基于设定尺寸创建所述可视化区域；基于待渲染于所述可视化区域中的第一数据的索引长度创建所述滚动区域；创建所述数据容器；所述数据容器用于装载展示于所述可...

【专利技术属性】
技术研发人员：刘权，
申请(专利权)人：北京京东拓先科技有限公司，
类型：发明
国别省市：