CN114510190A - 一种前端页面渲染方法、装置、设备及存储介质 - Google Patents

Abstract

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

Description

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

技术领域

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

背景技术

当前端需要从后台接口获取数以千计或万计的数据时，通常会一次性生成成千上万条数据然后将其插入到前端页面中的Table表格中，并根据预先为每条数据设置的高度与宽度，计算出可视区域能够显示的条数，剩下未显示的数据则会被隐藏，再根据页面滚动条移动的距离去计算对应的显示内容，从而避免一次性渲染大量的数据到前端页面占用较多的资源从而导致页面卡顿。

然而，在一次性将生成的成千上万条数据插入到前端页面Table表格的过程中，由于DOM（Document Object Model，文档对象模型）节点数量较大，会导致低端设备的运行速度明显变慢，因此应使DOM节点的数量保持在较低的水平。针对上述问题目前通常通过复用已有的DOM节点和减少每个DOM节点的布局、样式和绘制等方面的开销成本。例如，通过VUE（一套用于构建用户界面的渐进式JavaScript框架）提供的数组全新赋值属性来复用DOM节点和减少DOM节点操作，但是数组全新赋值的开销成本比数组变异开销成本更大。

因此，如何有效的解决由于DOM节点数据量大造成的页面渲染卡顿是目前还有待进一步解决的问题。

发明内容

有鉴于此，本申请的目的在于提供一种前端页面渲染方法、装置、设备及存储介质，能够使DOM节点的数量始终保持在较低的水平，加快前端页面渲染的速度，防止页面卡顿。其具体方案如下：

第一方面，本申请公开了一种前端页面渲染方法，包括：

当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，获取所述滚动条的实际滚动方向和实际滚动距离；

判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长；

若所述实际滚动距离未超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。

可选的，所述前端页面渲染方法，还包括：

通过第三方库复用所述真实可视视区和所述预设虚拟视区中已经存在的DOM元素；

隐藏当前浏览器前端页面中除所述真实可视视区和所述预设虚拟视区外的其他DOM元素。

可选的，所述前端页面渲染方法，还包括：

利用索引将所述真实可视视区和所述预设虚拟视区中的每条数据标记为独立的行数据，并利用Map对象结构将所述行数据存储至所述浏览器的内存；

将所述浏览器的内存中的所述行数据对应的索引作为Map对象的Key值，并利用所述Key值对所述真实可视视区和所述预设虚拟视区中的DOM元素进行标记。

可选的，所述判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长之后，还包括：

若所述实际滚动距离超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则复用当前浏览器前端页面的所述真实可视视区中携带所述Key值的DOM元素。

可选的，所述当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动之前，还包括：

设置所述真实可视视区中每条数据在浏览器前端页面table表格中所占的大小，得到单条数据的大小，并根据所述单条数据的大小确定所述真实可视视区的大小；

根据所述真实可视视区的大小分别在所述滚动条的所有滚动方向上设置与所述真实可视视区相邻的所述预设虚拟视区，并根据所述预设虚拟视区的虚拟显示数据数量获取所述预设虚拟视区的边长。

可选的，所述将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区之后，还包括：

将与所述实际滚动方向对应的所述预设虚拟视区的边长减去所述实际滚动距离，得到距离差值；

根据所述距离差值从当前浏览器前端页面的DOM树中确定出待渲染的虚拟视区，并对所述待渲染的虚拟视区中的数据进行渲染。

可选的，所述前端页面渲染方法，还包括：

通过层叠样式表的translate Y属性控制所述滚动条的滚动。

第二方面，本申请公开了一种前端页面渲染装置，包括：

获取模块，用于当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，获取所述滚动条的实际滚动方向和实际滚动距离；

距离判断模块，用于判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长；

页面渲染模块，用于当所述实际滚动距离未超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。

第三方面，本申请公开了一种电子设备，包括处理器和存储器；其中，所述处理器执行所述存储器中保存的计算机程序时实现前述的前端页面渲染方法。

第四方面，本申请公开了一种计算机可读存储介质，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现前述的前端页面渲染方法。

可见，本申请当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，先获取所述滚动条的实际滚动方向和实际滚动距离，然后判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长，如果所述实际滚动距离未超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。本申请通过虚拟DOM技术将前端页面的table表格分割成不同的区域并规定每个区域显示的数据数量，使得DOM树中的标签元素始终保持在较低的水平，能够加快页面渲染的速度，防止页面卡顿。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为本申请公开的一种前端页面渲染方法流程图；

图2为本申请公开的一种具体的前端页面table表格分割示意图；

图3为本申请公开的一种具体的translate Y值设置示意图；

图4为本申请公开的一种具体的前端页面渲染方法流程图；

图5为本申请公开的一种具体的前端页面所有节点更新示意图；

图6为本申请公开的一种具体的前端页面部分节点更新示意程图；

图7为本申请公开的一种前端页面渲染装置结构示意图；

图8为本申请公开的一种电子设备结构图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请实施例公开了一种前端页面渲染方法，参见图1所示，该方法包括：

步骤S11：当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，获取所述滚动条的实际滚动方向和实际滚动距离。

本实施例中，实时的对当前浏览器前端页面中的真实可视视区的滚动条进行监测，当监测到所述滚动条发生滚动时，则确定出所述滚动条实际滚动的方向以及实际滚动的距离，得到所述实际滚动方向和所述实际滚动距离。需要指出的是，所述滚动条既可以是纵向的滚动条或横向的滚动条，也可以是纵向的滚动条和横向的滚动条的组合；默认为位于当前浏览器前端页面的真实可视视区右侧的纵向滚动条，当为纵向滚动条时，滚动的方向既可以向下也可以向上；当为横向滚动条时，滚动的方向既可以向左也可以向右。

步骤S12：判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长。

本实施例中，获取到所述滚动条的实际滚动方向和实际滚动距离之后，进一步的，将上述实际滚动距离与上述实际滚动方向对应的预设虚拟视区的边长进行对比，并判断上述实际滚动距离是否超过与上述实际滚动方向对应的所述预设虚拟视区的边长。可以理解的是，当所述滚动条为向下或向上滚动的纵向滚动条时，所述预设虚拟视区应设置在所述真实可视视区的上方预设区域和下方预设区域；当所述滚动条为向左或向右滚动的横向滚动条时，所述预设虚拟视区应设置在所述真实可视视区的左边预设区域和右边预设区域；当所述真实可视视区中既有纵向滚动条又有横向滚动条时，则所述预设虚拟视区应设置在所述真实可视视区的上方预设区域、下方预设区域、左边预设区域和右边预设区域。

需要指出的是，本实施例中，所述当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动之前，具体还包括：设置所述真实可视视区中每条数据在浏览器前端页面table表格中所占的大小，得到单条数据的大小，并根据所述单条数据的大小确定所述真实可视视区的大小；根据所述真实可视视区的大小分别在所述滚动条的所有滚动方向上设置与所述真实可视视区相邻的所述预设虚拟视区，并根据所述预设虚拟视区的虚拟显示数据数量获取所述预设虚拟视区的边长。本实施例中，首先需要对浏览器前端页面的table表格中真正展示给用户观看的数据的大小进行设置，得到单条数据大小，然后根据上述单条数据大小以及当前浏览器前端页面真实可视视区显示的数据数量确定出所述真实可视视区的大小，进一步的，根据上述真实可视视区的大小，即所述真实可视视区的高度与宽度，分别在滚动条的所有滚动方向上设置与上述真实可视视区相邻的预设虚拟视区，然后根据所述预设虚拟视区的虚拟显示数据数量得到所述预设虚拟视区各个边的边长，即所述预设虚拟视区的高度和宽度。

在一种具体实施方式中，当所述滚动条为纵向滚动条时，可以分别在真实可视视区的上方和下方设置虚拟显示数据条数，然后根据虚拟显示数据条数和单条数据高度相乘的结果得到预设虚拟视区和所述预设虚拟视区的高度。例如，参见图2所示，当前浏览器前端页面的真实可视视区显示的数据为Data3和Data4，设置Data3和Data4在浏览器前端页面table表格中所占的高度均为20px（pixel，像素），然后在上述真实可视视区的上方设置虚拟显示数据条数为2条，分别为Data1和Data2，在上述真实可视视区的下方设置虚拟显示数据条数也为2条，分别为Data5和Data6，根据每条数据的高度值20px，得到所述真实可视视区的高度为40px，所述真实可视视区上方和下方的预设虚拟视区的高度均为40px，所述预设虚拟视区的总高度为80px。需要指出的是，位于真实可视视区上方和下方的预设虚拟视区的虚拟显示数据条数可根据实际情况进行选择，即可以相同也可以不同。

本实施例中，所述前端页面渲染方法，具体还包括：通过第三方库复用所述真实可视视区和所述预设虚拟视区中已经存在的DOM元素；隐藏当前浏览器前端页面中除所述真实可视视区和所述预设虚拟视区外的其他DOM元素。本实施例中，为了保证DOM树中的标签元素一直保持一定的数量，减少浏览器的开销，可以通过一些空元素来占位延迟刷新数据。具体的，可以通过第三方库复用真实可视视区和预设虚拟视区中已经存在的DOM元素，然后利用层叠样式表（Cascading Style Sheets，CSS）提供的display:none指令或VUE提供的v-show指令隐藏当前浏览器前端页面中除了上述真实可视视区和上述预设虚拟视区外的其他DOM元素。其中，所述第三方库包括但不限于react-virtualized库等。

步骤S13：若所述实际滚动距离未超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。

本实施例中，如果上述实际滚动距离未超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则可以将与上述实际滚动距离对应的预先渲染并保存在上述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。例如，当监测到图2中的浏览器前端页面的真实可视视区的滚动条向下滚动了一条数据时，真实可视视区中的Data3会往上移动变为原预设虚拟视区Data2的位置，当前浏览器前端页面的真实可视视区变为Data4和Data5。

本实施例中，所述将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区之后，具体还包括：将与所述实际滚动方向对应的所述预设虚拟视区的边长减去所述实际滚动距离，得到距离差值；根据所述距离差值从所述浏览器前端页面的DOM树中确定出待渲染的虚拟视区，并对所述待渲染的虚拟视区中的数据进行渲染。例如，当图2中的当前浏览器前端页面的真实可视视区经过纵向滚动条滚动之后，从Data3和Data4变为Data4和Data5，并会在所述真实可视视区下方的预设虚拟视区内产生一个新的Data7，然后对新产生的Data7进行预渲染，即令DOM树中的标签元素一直保持6条数据。

本实施例中，为了防止所述滚动条在上下滚动的过程中由于浏览器中DOM元素的回流与重绘而造成的卡顿，可以通过层叠样式表的translate Y属性控制所述滚动条的滚动。例如，参见图3所示，在对DOM树中的数据进行渲染之前，为每一条数据设置相应的translate Y值，如将数据1的translate Y值设置为0、数据的translate Y值设置为20、数据3的translate Y值设置为40，后面数据的translate Y值依次增加20。需要指出的是，本申请中的层叠样式表具体指的是包含translate Y属性的CSS3，即只有支持CSS3的浏览器才适用，并且translate Y可以运用到当前浏览器前端页面的所有HTML元素上，让HTML元素沿垂直（Y轴）方向移动，当其值为正时表示沿原点向下移动，当其值为负时表示沿原点向上移动。在渲染生成数据之前就需要为其绑定上对应的translate Y值，具体可采用公式translate Y=DateIndex * Size进行计算，其中，DateIndex为数据（即Data）对应的索引从0开始，Size为数据的高度。

可见，本申请实施例当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，先获取所述滚动条的实际滚动方向和实际滚动距离，然后判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长，如果所述实际滚动距离未超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。本申请实施例通过虚拟DOM技术将前端页面的table表格分割成不同的区域并规定每个区域显示的数据数量，使得DOM树中的标签元素始终保持在较低的水平，能够加快页面渲染的速度，防止页面卡顿。

本申请实施例公开了一种具体的前端页面渲染方法，参见图4所示，该方法包括：

步骤S21：当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，获取所述滚动条的实际滚动方向和实际滚动距离。

步骤S22：判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长。

步骤S23：若所述实际滚动距离超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则复用当前浏览器前端页面的所述真实可视视区中携带Key值的DOM元素。

本实施例中，为了进一步的提高页面渲染的流畅程度，具体还包括：利用索引将所述真实可视视区和所述预设虚拟视区中的每条数据标记为独立的行数据，并利用Map对象结构将所述行数据存储至所述浏览器的内存；将所述浏览器的内存中的所述行数据对应的索引作为Map对象的Key值，并利用所述Key值对所述真实可视视区和所述预设虚拟视区中的DOM元素进行标记。本实施例中，在确定出所述真实可视视区和所述预设虚拟视区之后，可以根据每行的索引（Index）将所述真实可视视区和所述预设虚拟视区中的数据标记为独立的行数据，然后利用Map对象结构将上述行数据存储至所述浏览器的内存中，当滚动条发生滚动时，只需要渲染映射在所述真实可视视区内的所述行数据即可，而不需要对DOM树中的所有数据进行遍历渲染，这样能够有效的减少页面HTML（Hyper Text Markup Language，超文本标记语言）文件的大小。在一种具体的实施方式中，当纵向滚动条发生滚动时，可以将为每条数据设置的高度和所述行数据对应的索引作为Map对象的Key值，然后利用上述Key值对上述真实可视视区和上述预设虚拟视区中的DOM元素进行标记。进一步的，每个DOM节点的value值还可以根据上述Key值来定义其显示的范围，如将value1的key值设置为0，则value1的显示范围在[0~40)这个区间，而value2区间为[40,80)，以此类推，其目的主要是用于计算value的显示区间是否在滚动的范围内。

在一种具体的实施例中，如果上述实际滚动距离超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则可以利用VUE复用当前浏览器前端页面的所述真实可视视区中携带所述Key值的DOM元素。具体的，参见图5和图6所示，相对于现有的通过使用数组全新赋值的方法对DOM树中所有的DOM节点进行更新，本实施例采用了VUE对真实可视视区中携带上述Key值的并且内容未发生变化的DOM元素进行复用，即只对内容发生变化的DOM节点数据1和数据2进行更新，更新后为数据8和数据9，其他内容未发生变化的DOM节点数据3至数据7保持不变。需要指出的是，常规的数组替换方法通常是利用数组自带的函数，如push、pop、shift等，仅对带Key值的需要更新渲染的节点元素进行渲染；或者利用赋值的方法，如vm.Value=newValue，使整个列表复用之前存在的DOM元素去刷新。而本实施例结合了上述两种方法，利用索引以及VUE的set方法去替换带Key值的并且内容发生变化的DOM元素，同时会复用内容未发生变化的DOM元素。在一种具体的实施方式中，当鼠标滚动的距离小于预设虚拟视区的边长且每次更新的页面内容不多时，可以利用VUE复用当前浏览器前端页面的真实可视视区中携带Key值的DOM元素；在另一种具体的实施方式中，当鼠标滚动的距离大于或等于预设虚拟视区的边长且每次更新的页面内容完全不同时，可以利用上述赋值的方法复用之前存在的DOM元素去刷新。

其中，关于上述步骤S21、S22更加具体的处理过程可以参考前述实施例中公开的相应内容，在此不再进行赘述。

可见，本申请实施例先将前端页面的table表格分割成不同的区域并规定每个区域显示的数据数量，使得DOM树中的标签元素始终保持在较低的水平，然后利用VUE复用当前浏览器前端页面的真实可视视区中携带Key值的DOM元素，即对浏览器页面中数据内容未发生变化的DOM元素进行复用，能够减少每一个DOM节点的布局、样式和绘制方面的开销成本，大大的提高了页面的流畅程度，有效的解决了table表格渲染时由于数据过大而出现的卡顿问题。

相应的，本申请实施例还公开了一种前端页面渲染装置，参见图7所示，该装置包括：

获取模块11，用于当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，获取所述滚动条的实际滚动方向和实际滚动距离；

距离判断模块12，用于判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长；

页面渲染模块13，用于当所述实际滚动距离未超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。

其中，关于上述各个模块的具体工作流程可以参考前述实施例中公开的相应内容，在此不再进行赘述。

可见，本申请实施例中，当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，先获取所述滚动条的实际滚动方向和实际滚动距离，然后判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长，如果所述实际滚动距离未超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。本申请实施例通过虚拟DOM技术将前端页面的table表格分割成不同的区域并规定每个区域显示的数据数量，使得DOM树中的标签元素始终保持在较低的水平，能够加快页面渲染的速度，防止页面卡顿。

在一些具体实施例中，所述前端页面渲染装置，还可以包括：

第一DOM元素复用单元，通过第三方库复用所述真实可视视区和所述预设虚拟视区中已经存在的DOM元素；

DOM元素隐藏单元，用于隐藏当前浏览器前端页面中除所述真实可视视区和所述预设虚拟视区外的其他DOM元素。

在一些具体实施例中，所述前端页面渲染装置，还可以包括：

数据标记单元，用于利用索引将所述真实可视视区和所述预设虚拟视区中的每条数据标记为独立的行数据；

数据存储单元，用于利用Map对象结构将所述行数据存储至所述浏览器的内存；

DOM元素标记单元，用于将所述浏览器的内存中的所述行数据对应的索引作为Map对象的Key值，并利用所述Key值对所述真实可视视区和所述预设虚拟视区中的DOM元素进行标记。

在一些具体实施例中，所述距离判断模块12之后，还可以包括：

第二DOM元素复用单元，用于如果所述实际滚动距离超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则复用当前浏览器前端页面的所述真实可视视区中携带所述Key值的DOM元素。

在一些具体实施例中，所述获取模块11之前，还可以包括：

第一设置单元，用于设置所述真实可视视区中每条数据在浏览器前端页面table表格中所占的大小，得到单条数据的大小；

确定单元，用于根据所述单条数据的大小确定所述真实可视视区的大小；

第二设置单元，用于根据所述真实可视视区的大小分别在所述滚动条的所有滚动方向上设置与所述真实可视视区相邻的所述预设虚拟视区；

虚拟视区确定单元，用于根据所述预设虚拟视区的虚拟显示数据数量获取所述预设虚拟视区的边长。

在一些具体实施例中，所述页面渲染模块13之后，还可以包括：

计算单元，用于将与所述实际滚动方向对应的所述预设虚拟视区的边长减去所述实际滚动距离，得到距离差值；

虚拟视区确定单元，用于根据所述距离差值从当前浏览器前端页面的DOM树中确定出待渲染的虚拟视区；

数据渲染单元，用于对所述待渲染的虚拟视区中的数据进行渲染。

在一些具体实施例中，所述前端页面渲染装置，还可以包括：

滚动条控制单元，用于通过层叠样式表的translate Y属性控制所述滚动条的滚动。

进一步的，本申请实施例还公开了一种电子设备，图8是根据一示例性实施例示出的电子设备20结构图，图中的内容不能认为是对本申请的使用范围的任何限制。

图8为本申请实施例提供的一种电子设备20的结构示意图。该电子设备20，具体可以包括：至少一个处理器21、至少一个存储器22、电源23、通信接口24、输入输出接口25和通信总线26。其中，所述存储器22用于存储计算机程序，所述计算机程序由所述处理器21加载并执行，以实现前述任一实施例公开的前端页面渲染方法中的相关步骤。另外，本实施例中的电子设备20具体可以为电子计算机。

本实施例中，电源23用于为电子设备20上的各硬件设备提供工作电压；通信接口24能够为电子设备20创建与外界设备之间的数据传输通道，其所遵循的通信协议是能够适用于本申请技术方案的任意通信协议，在此不对其进行具体限定；输入输出接口25，用于获取外界输入数据或向外界输出数据，其具体的接口类型可以根据具体应用需要进行选取，在此不进行具体限定。

另外，存储器22作为资源存储的载体，可以是只读存储器、随机存储器、磁盘或者光盘等，其上所存储的资源可以包括操作系统221、计算机程序222等，存储方式可以是短暂存储或者永久存储。

其中，操作系统221用于管理与控制电子设备20上的各硬件设备以及计算机程序222，其可以是Windows Server、Netware、Unix、Linux等。计算机程序222除了包括能够用于完成前述任一实施例公开的由电子设备20执行的前端页面渲染方法的计算机程序之外，还可以进一步包括能够用于完成其他特定工作的计算机程序。

进一步的，本申请还公开了一种计算机可读存储介质，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现前述公开的前端页面渲染方法。关于该方法的具体步骤可以参考前述实施例中公开的相应内容，在此不再进行赘述。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器（RAM）、内存、只读存储器（ROM）、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上对本申请所提供的一种前端页面渲染方法、装置、设备及存储介质进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (10)

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任一项所述的前端页面渲染方法，其特征在于，还包括：

通过层叠样式表的translate Y属性控制所述滚动条的滚动。

8.一种前端页面渲染装置，其特征在于，包括：

获取模块，用于当监测到当前浏览器前端页面的真实可视视区的滚动条发生滚动时，获取所述滚动条的实际滚动方向和实际滚动距离；

距离判断模块，用于判断所述实际滚动距离是否超过与所述实际滚动方向对应的预设虚拟视区的边长；

页面渲染模块，用于当所述实际滚动距离未超过与所述实际滚动方向对应的所述预设虚拟视区的边长，则将与所述实际滚动距离对应的经过预先渲染并保存在所述预设虚拟视区中的数据显示在当前浏览器前端页面的所述真实可视视区。

9.一种电子设备，其特征在于，包括处理器和存储器；其中，所述处理器执行所述存储器中保存的计算机程序时实现如权利要求1至7任一项所述的前端页面渲染方法。

10.一种计算机可读存储介质，其特征在于，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的前端页面渲染方法。

Images