一种前端页面渲染方法、装置、设备及存储介质.pdf

(19)国家知识产权局(12)发明专利申请(10)申请公布号CN114510190A(43)申请公布日2022.05.17(21)申请号202210401689.3(22)申请日2022.04.18(71)申请人苏州万店掌网络科技有限公司地址215011江苏省苏州市高新区竹园路209号(72)发明人高超黄岗周圣强(74)专利代理机构北京集佳知识产权代理有限公司11227专利代理师吕鑫(51)Int.Cl.G06F3/04855(2022.01)G06F16/957(2019.01)权利要求书2页说明书9页附图4页(54)发明名称一种前端页面渲染方法、装置、设备及存储介质(57)摘要本申请公开了一种前端页面渲染方法、装置、设备及存储介质，涉及前端开发技术领域，包括：当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，获取滚动条的实际滚动方向和实际滚动距离；判断实际滚动距离是否超过与实际滚动方向对应的预设虚拟视区的边长；若实际滚动距离未超过与实际滚动方向对应的预设虚拟视区的边长，则将与实际滚动距离对应的经过预先渲染并保存在预设虚拟视区中的数据显示在当前浏览器前端页面的真实可视视区。本申请通过虚拟DOM技术将前端页面的table表格分割成不同的区域并规定每个区域显示的数据数量，使得DOM树中的标签元素始终保持在较低的水平，能够加快页面渲染的速度，防止页面卡顿。CN114510190ACN114510190A权利要求书1/2页1.一种前端页面渲染方法，其特征在于，包括：当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，获取所述滚动条的实际滚动方向和实际滚动距离；判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长；若所述实际滚动距离未超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。2.根据权利要求1所述的前端页面渲染方法，其特征在于，还包括：通过第三方库复用所述真实可视视区和所述预设虚拟视区中已经存在的DOM元素；隐藏当前浏览器前端页面中除所述真实可视视区和所述预设虚拟视区外的其他DOM元素。3.根据权利要求1所述的前端页面渲染方法，其特征在于，还包括：利用索引将所述真实可视视区和所述预设虚拟视区中的每条数据标记为独立的行数据，并利用Map对象结构将所述行数据存储至所述浏览器的内存；将所述浏览器的内存中的所述行数据对应的索引作为Map对象的Key值，并利用所述Key值对所述真实可视视区和所述预设虚拟视区中的DOM元素进行标记。4.根据权利要求3所述的前端页面渲染方法，其特征在于，所述判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长之后，还包括：若所述实际滚动距离超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则复用当前浏览器前端页面的所述真实可视视区中携带所述Key值的DOM元素。5.根据权利要求1所述的前端页面渲染方法，其特征在于，所述当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动之前，还包括：设置所述真实可视视区中每条数据在浏览器前端页面table表格中所占的大小，得到单条数据的大小，并根据所述单条数据的大小确定所述真实可视视区的大小；根据所述真实可视视区的大小分别在所述滚动条的所有滚动方向上设置与所述真实可视视区相邻的所述预设虚拟视区，并根据所述预设虚拟视区的虚拟显示数据数量获取所述预设虚拟视区的边长。6.根据权利要求1所述的前端页面渲染方法，其特征在于，所述将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区之后，还包括：将与所述实际滚动方向对应的所述预设虚拟视区的边长减去所述实际滚动距离，得到距离差值；根据所述距离差值从当前浏览器前端页面的DOM树中确定出待渲染的虚拟视区，并对所述待渲染的虚拟视区中的数据进行渲染。7.根据权利要求1至6任一项所述的前端页面渲染方法，其特征在于，还包括：通过层叠样式表的translateY属性控制所述滚动条的滚动。8.一种前端页面渲染装置，其特征在于，包括：获取模块，用于当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，获取所述滚动条的实际滚动方向和实际滚动距离；2CN114510190A权利要求书2/2页距离判断模块，用于判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长；页面渲染模块，用于当所述实际滚动距离未超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。9.一种电子设备，其特征在于，包括处理器