本申请公开了一种前端页面渲染方法、装置、设备及存储介质，涉及前端开发技术领域，包括：当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，获取滚动条的实际滚动方向和实际滚动距离；判断实际滚动距离是否超过与实际滚动方向对应的预设虚拟视区的边长；若实际滚动距离未超过与实际滚动方向对应的预设虚拟视区的边长，则将与实际滚动距离对应的经过预先渲染并保存在预设虚拟视区中的数据显示在当前浏览器前端页面的真实可视视区。本申请通过虚拟DOM技术将前端页面的table表格分割成不同的区域并规定每个区域显示的数据数量，使得DOM树中的标签元素始终保持在较低的水平，能够加快页面渲染的速度，防止页面卡顿。卡顿。卡顿。
【技术实现步骤摘要】
一种前端页面渲染方法、装置、设备及存储介质
[0001]本申请涉及前端开发
，特别涉及一种前端页面渲染方法、装置、设备及存储介质。
技术介绍
[0002]当前端需要从后台接口获取数以千计或万计的数据时，通常会一次性生成成千上万条数据然后将其插入到前端页面中的Table表格中，并根据预先为每条数据设置的高度与宽度，计算出可视区域能够显示的条数，剩下未显示的数据则会被隐藏，再根据页面滚动条移动的距离去计算对应的显示内容，从而避免一次性渲染大量的数据到前端页面占用较多的资源从而导致页面卡顿。
[0003]然而，在一次性将生成的成千上万条数据插入到前端页面Table表格的过程中，由于DOM（Document Object Model，文档对象模型）节点数量较大，会导致低端设备的运行速度明显变慢，因此应使DOM节点的数量保持在较低的水平。针对上述问题目前通常通过复用已有的DOM节点和减少每个DOM节点的布局、样式和绘制等方面的开销成本。例如，通过VUE（一套用于构建用户界面的渐进式JavaScript框架）提供的数组全新赋值属性来复用DOM节点和减少DOM节点操作，但是数组全新赋值的开销成本比数组变异开销成本更大。
[0004]因此，如何有效的解决由于DOM节点数据量大造成的页面渲染卡顿是目前还有待进一步解决的问题。
技术实现思路
[0005]有鉴于此，本申请的目的在于提供一种前端页面渲染方法、装置、设备及存储介质，能够使DOM节点的数量始终保持在较低的水平，加快前端页面渲染的速度，防止页面卡顿。其具体方案如下：第一方面，本申请公开了一种前端页面渲染方法，包括：当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，获取所述滚动条的实际滚动方向和实际滚动距离；判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长；若所述实际滚动距离未超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。
[0006]可选的，所述前端页面渲染方法，还包括：通过第三方库复用所述真实可视视区和所述预设虚拟视区中已经存在的DOM元素；隐藏当前浏览器前端页面中除所述真实可视视区和所述预设虚拟视区外的其他DOM元素。
[0007]可选的，所述前端页面渲染方法，还包括：利用索引将所述真实可视视区和所述预设虚拟视区中的每条数据标记为独立的行数据，并利用Map对象结构将所述行数据存储至所述浏览器的内存；将所述浏览器的内存中的所述行数据对应的索引作为Map对象的Key值，并利用所述Key值对所述真实可视视区和所述预设虚拟视区中的DOM元素进行标记。
[0008]可选的，所述判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长之后，还包括：若所述实际滚动距离超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则复用当前浏览器前端页面的所述真实可视视区中携带所述Key值的DOM元素。
[0009]可选的，所述当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动之前，还包括：设置所述真实可视视区中每条数据在浏览器前端页面table表格中所占的大小，得到单条数据的大小，并根据所述单条数据的大小确定所述真实可视视区的大小；根据所述真实可视视区的大小分别在所述滚动条的所有滚动方向上设置与所述真实可视视区相邻的所述预设虚拟视区，并根据所述预设虚拟视区的虚拟显示数据数量获取所述预设虚拟视区的边长。
[0010]可选的，所述将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区之后，还包括：将与所述实际滚动方向对应的所述预设虚拟视区的边长减去所述实际滚动距离，得到距离差值；根据所述距离差值从当前浏览器前端页面的DOM树中确定出待渲染的虚拟视区，并对所述待渲染的虚拟视区中的数据进行渲染。
[0011]可选的，所述前端页面渲染方法，还包括：通过层叠样式表的translate Y属性控制所述滚动条的滚动。
[0012]第二方面，本申请公开了一种前端页面渲染装置，包括：获取模块，用于当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，获取所述滚动条的实际滚动方向和实际滚动距离；距离判断模块，用于判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长；页面渲染模块，用于当所述实际滚动距离未超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。
[0013]第三方面，本申请公开了一种电子设备，包括处理器和存储器；其中，所述处理器执行所述存储器中保存的计算机程序时实现前述的前端页面渲染方法。
[0014]第四方面，本申请公开了一种计算机可读存储介质，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现前述的前端页面渲染方法。
[0015]可见，本申请当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，先获取所述滚动条的实际滚动方向和实际滚动距离，然后判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长，如果所述实际滚动距离未超过与所
述实际滚动方向对应的所述预设虚拟视区的边长，则将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。本申请通过虚拟DOM技术将前端页面的table表格分割成不同的区域并规定每个区域显示的数据数量，使得DOM树中的标签元素始终保持在较低的水平，能够加快页面渲染的速度，防止页面卡顿。
附图说明
[0016]为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
[0017]图1为本申请公开的一种前端页面渲染方法流程图；图2为本申请公开的一种具体的前端页面table表格分割示意图；图3为本申请公开的一种具体的translate Y值设置示意图；图4为本申请公开的一种具体的前端页面渲染方法流程图；图5为本申请公开的一种具体的前端页面所有节点更新示意图；图6为本申请公开的一种具体的前端页面部分节点更新示意程图；图7为本申请公开的一种前端页面渲染装置结构示意图；图8为本申请公开的一种电子设备结构图。
具体实施方式
[0018]下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
[0019]本申请实施本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种前端页面渲染方法，其特征在于，包括：当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，获取所述滚动条的实际滚动方向和实际滚动距离；判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长；若所述实际滚动距离未超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。2.根据权利要求1所述的前端页面渲染方法，其特征在于，还包括：通过第三方库复用所述真实可视视区和所述预设虚拟视区中已经存在的DOM元素；隐藏当前浏览器前端页面中除所述真实可视视区和所述预设虚拟视区外的其他DOM元素。3.根据权利要求1所述的前端页面渲染方法，其特征在于，还包括：利用索引将所述真实可视视区和所述预设虚拟视区中的每条数据标记为独立的行数据，并利用Map对象结构将所述行数据存储至所述浏览器的内存；将所述浏览器的内存中的所述行数据对应的索引作为Map对象的Key值，并利用所述Key值对所述真实可视视区和所述预设虚拟视区中的DOM元素进行标记。4.根据权利要求3所述的前端页面渲染方法，其特征在于，所述判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长之后，还包括：若所述实际滚动距离超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则复用当前浏览器前端页面的所述真实可视视区中携带所述Key值的DOM元素。5.根据权利要求1所述的前端页面渲染方法，其特征在于，所述当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动之前，还包括：设置所述真实可视视区中每条数据在浏览器前端页面table表格中所占的大小，得到单条数据的大小，并根据所述单条数据的大小确...
【专利技术属性】
技术研发人员：高超，黄岗，周圣强，
申请(专利权)人：苏州万店掌网络科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。