数据渲染方法、装置、终端及存储介质制造方法及图纸

本申请公开了一种数据渲染方法、装置、终端及存储介质。方法包括：确定网页页面中的滚动条的高度；基于滚动条的高度，确定起始索引和结束索引；基于起始索引、结束索引和预设偏移量，确定目标起始索引和目标结束索引；基于目标起始索引和目标结束索引，确定网页页面的目标可视区域，并将目标可视区域对应的数据渲染至目标可视区域。本发明专利技术通过起始索引、结束索引和预设偏移量，确定目标起始索引和目标结束索引，待滚动条移动后，基于目标起始索引和目标结束索引得到目标可视区域，进而将实际想要展示的内容(数据)通过目标可视区域呈现。在页面渲染的时候，极大程度的提升了页面的渲染速度，此外，本发明专利技术可复用多种场景的组件化复用。用。用。

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


[0001]本申请涉及网页页面显示
，具体而言，涉及一种数据渲染方法、装置、终端及存储介质。

技术介绍

[0002]随着企业级应用越来越复杂，网页页面呈现的数据结构也变得越来越复杂，而大量而复杂的数据结构，使页面的渲染速度下降，导致白屏现象的出现。因此，如何提高网页的渲染速度成为亟待解决的问题。
[0003]目前，主要通过优化页面节点元素数量的方式，即通过CSS Hack等方式实现网页页面的可视区域内的数据的正常显示。
[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]图1是本专利技术实施例提供的一种数据渲染方法的实现流程图；
[0038]图2是本专利技术实施例提供的可滚动区域的结构示意图；
[0039]图3是本专利技术实施例提供的一种数据渲染装置的结构示意图；
[0040]图4是本专利技术实施例提供的终端的示意图。
具体实施方式
[0041]为使本专利技术实施例的目的、技术方案和优点更加清楚，下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0042]本专利技术的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本专利技术的实施例能够以除了在这里图示或描述的那些以外的顺序实施。
[0043]应当理解，在本专利技术的各种实施例中，各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本专利技术实施例的实施过程构成任何限定。
[0044]应当理解，在本专利技术中，“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
[0045]应当理解，在本专利技术中，“多个”是指两个或两个以上。“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，和/或B，本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种数据渲染方法，其特征在于，包括：确定网页页面中的滚动条的高度；基于所述滚动条的高度，确定起始索引和结束索引；基于所述起始索引、所述结束索引和预设偏移量，确定目标起始索引和目标结束索引；基于所述目标起始索引和所述目标结束索引，确定所述网页页面的目标可视区域，并将所述目标可视区域对应的数据渲染至所述目标可视区域。2.如权利要求1所述数据渲染方法，其特征在于，所述基于所述滚动条的高度，确定起始索引和结束索引，包括：基于所述滚动条的高度和列表中的每项对应的预设行高，确定所述起始索引；基于可视区域对应的项数和所述起始索引，确定所述结束索引。3.如权利要求2所述数据渲染方法，其特征在于，所述基于可视区域对应的项数和所述起始索引，确定所述结束索引之前，还包括：基于预设的可视区域高度和所述预设行高，确定所述可视区域对应的项数。4.如权利要求3所述数据渲染方法，其特征在于，所述基于可视区域对应的项数和所述起始索引，确定所述结束索引之后，还包括：基于所述起始索引和所述结束索引，确定所述网页页面的初始可视区域；基于所述起始索引、所述结束索引和列表数据，确定所述初始可视区对应的数据，并将所述初始可视区域对应的数据渲染至所述初始可视区域。5.如权利要求4所述数据渲染方法，其特征在于，所述预设偏移量包括预设起始偏移量和预设结束偏移量；基于所述起始索引、所述结束索引和预设偏移量，确定目标起始索引和目标结束索引，包括：基于所述起始索引和所述预设起始偏移量，得到所述目标起始索引；基于所述结束索引和所述预设结束偏移...

【专利技术属性】
技术研发人员：范凌，许程健，王喆，
申请(专利权)人：特赞上海信息科技有限公司，
类型：发明
国别省市：