一种前端页面渲染方法、装置、设备及存储介质制造方法及图纸

本申请公开了一种前端页面渲染方法、装置、设备及存储介质，涉及前端开发技术领域，包括：当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，获取滚动条的实际滚动方向和实际滚动距离；判断实际滚动距离是否超过与实际滚动方向对应的预设虚拟视区的边长；若实际滚动距离未超过与实际滚动方向对应的预设虚拟视区的边长，则将与实际滚动距离对应的经过预先渲染并保存在预设虚拟视区中的数据显示在当前浏览器前端页面的真实可视视区。本申请通过虚拟DOM技术将前端页面的table表格分割成不同的区域并规定每个区域显示的数据数量，使得DOM树中的标签元素始终保持在较低的水平，能够加快页面渲染的速度，防止页面卡顿。卡顿。卡顿。

【技术实现步骤摘要】
一种前端页面渲染方法、装置、设备及存储介质


[0001]本申请涉及前端开发
，特别涉及一种前端页面渲染方法、装置、设备及存储介质。

技术介绍

[0002]当前端需要从后台接口获取数以千计或万计的数据时，通常会一次性生成成千上万条数据然后将其插入到前端页面中的Table表格中，并根据预先为每条数据设置的高度与宽度，计算出可视区域能够显示的条数，剩下未显示的数据则会被隐藏，再根据页面滚动条移动的距离去计算对应的显示内容，从而避免一次性渲染大量的数据到前端页面占用较多的资源从而导致页面卡顿。
[0003]然而，在一次性将生成的成千上万条数据插入到前端页面Table表格的过程中，由于DOM（Document Object Model，文档对象模型）节点数量较大，会导致低端设备的运行速度明显变慢，因此应使DOM节点的数量保持在较低的水平。针对上述问题目前通常通过复用已有的DOM节点和减少每个DOM节点的布局、样式和绘制等方面的开销成本。例如，通过VUE（一套用于构建用户界面的渐进式JavaScript框架）提供的数组全新赋值属性来复用DOM本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端页面渲染方法，其特征在于，包括：当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，获取所述滚动条的实际滚动方向和实际滚动距离；判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长；若所述实际滚动距离未超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。2.根据权利要求1所述的前端页面渲染方法，其特征在于，还包括：通过第三方库复用所述真实可视视区和所述预设虚拟视区中已经存在的DOM元素；隐藏当前浏览器前端页面中除所述真实可视视区和所述预设虚拟视区外的其他DOM元素。3.根据权利要求1所述的前端页面渲染方法，其特征在于，还包括：利用索引将所述真实可视视区和所述预设虚拟视区中的每条数据标记为独立的行数据，并利用Map对象结构将所述行数据存储至所述浏览器的内存；将所述浏览器的内存中的所述行数据对应的索引作为Map对象的Key值，并利用所述Key值对所述真实可视视区和所述预设虚拟视区中的DOM元素进行标记。4.根据权利要求3所述的前端页面渲染方法，其特征在于，所述判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长之后，还包括：若所述实际滚动距离超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则复用当前浏览器前端页面的所述真实可视视区中携带所述Key值的DOM元素。5.根据权利要求1所述的前端页面渲染方法，其特征在于，所述当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动之前，还包括：设置所述真实可视视区中每条数据在浏览器前端页面table表格中所占的大小，得到单条数据的大小，并根据所述单条数据的大小确...

【专利技术属性】
技术研发人员：高超，黄岗，周圣强，
申请(专利权)人：苏州万店掌网络科技有限公司，
类型：发明
国别省市：