前端页面加载方法、装置、控制器及介质与流程

本发明涉及计算机技术领域，尤其涉及一种前端页面加载方法、装置、控制器及介质。

背景技术：

在前端页面加载加载过程中，前端页面所支持的最大渲染dom(documentobjectmodel，文档对象模型，简称dom)数量有限，在组件渲染数量过大时，用户通常会遇到页面初始化加载时间长、且渲染成功后页面卡顿、无法滚动等问题，用户体验非常差。

现有技术中，在面临这种情况时，可在加载大量前端资源文件时进行分页渲染，以减少用户的等待时间，但是，由于还是对页面数据进行全局渲染，因此页面整体加载时间并没有明显减少，用户仍然能看到页面正在加载中。此外，对于有层级结构的组件，无法使用分页渲染，例如，汽车领域的汽车零件信息的树形组件展示就无法使用分页渲染来减少页面加载时间。因此，如何提高前端页面加载速度，避免页面卡顿成为亟待解决的技术问题。

技术实现要素：

本发明目的在于，提供一种前端页面加载方法、装置、控制器及介质，通过局部渲染提高了前端页面的加载速度，且避免了加载完成后的页面卡顿，提升了用户体验。

为了解决上述技术问题，根据本发明第一实施例，提供了一种前端页面加载方法，包括:

获取前端页面可视区域的高度；

根据所述可视区域的高度确定所述前端页面包括的、与所述可视区域对应的组件高度；

根据所述组件高度和预设的所述组件对应的每条数据的高度获取当前可视区域的数据量；

渲染所述当前可视区域的数据量并加载前端页面。

进一步的，所述获取前端页面可视区域的高度，包括以下步骤：

监听前端页面的调整大小事件，若页面窗口大小发生变化，则自动获取当前前端页面可视区域的高度。

进一步的，所述组件包括有层级的组件和无层级的组件，所述有层级的组件包括树形组件，所述无层级的组件包括表格组件；

所述组件高度配置为百分比高度。

进一步的，根据所述组件高度和预设的所述组件对应的每条数据的高度获取当前可视区域的数据量,包括以下步骤:

通过懒加载的方式获取所述当前可视区域的数据量。

进一步的，所述方法还包括：

监听所述组件的滚动事件；

当所述组件内容发生滚动时，获取滚动偏移量；

根据所述滚动偏移量渲染所述当前可视区域的数据量并加载前端页面。

进一步的，所述根据所述滚动偏移量渲染所述当前可视区域的数据量并加载前端页面，包括以下步骤：

根据所述滚动偏移量和所述预设的所述组件对应的每条数据的高度判断当前可视区域的数据是否需要滚动；

若需要，则根据所述滚动偏移量判断滚动方向，所述滚动方向包括向上和向下；

根据所述滚动偏移量，按照所述滚动方向将当前可视区域的数据进行切割。

进一步的，当进行切割时，以所述当前可视觉区域的数据量为单位，以数据缓存中的索引位置为切割位置进行切割，每次切割数据时对应更新所述索引位置。

进一步的，所述方法还包括，根据组件的生命周期对所述前端页面的回收事件进行监听，并清除对应的缓存数据。

根据本发明第二实施例，提供了一种前端页面加载装置，包括:

可视区域高度获取模块，配置为获取前端页面可视区域的高度；

组件高度确定模块，配置为根据所述可视区域的高度确定所述前端页面包括的、与所述可视区域对应的组件高度；

数据量获取模块，配置为根据所述组件高度和预设的所述组件对应的每条数据的高度获取当前可视区域的数据量；

页面加载模块，配置为渲染所述当前可视区域的数据量并加载前端页面。

进一步的，所述可视区域高度获取模块还配置为监听前端页面的调整大小事件，若页面窗口大小发生变化，则自动获取当前前端页面可视区域的高度。

进一步的，所述组件包括有层级的组件和无层级的组件，所述有层级的组件包括树形组件，所述无层级的组件包括表格组件；

所述组件高度配置为百分比高度。

进一步的，所述数据量获取模块还用于通过懒加载的方式获取所述当前可视区域的数据量。

进一步的，所述装置还包括：

滚动事件监听单元，用于监听所述组件的滚动事件；

滚动偏移量获取单元，用于当所述组件内容发生滚动时，获取滚动偏移量；

加载单元，用于根据所述滚动偏移量渲染所述当前可视区域的数据量并加载前端页面。

进一步的，所述加载单元包括：

判断子单元，用于根据所述滚动偏移量和所述预设的所述组件对应的每条数据的高度判断当前可视区域的数据是否需要滚动；

方向确定子单元，用于在所述判断子单元判断当前可视区域的数据需要滚动时，根据所述滚动偏移量判断滚动方向，所述滚动方向包括向上和向下；

数据切割子单元，用于根据所述滚动偏移量，按照所述滚动方向将当前可视区域的数据进行切割。

进一步的，所述数据切割子单元还配置为：当进行切割时，以所述当前可视觉区域的数据量为单位，以数据缓存中的索引位置为切割位置进行切割，每次切割数据时对应更新所述索引位置。

进一步的，所述装置还包括内存释放模块，用于根据组件的生命周期对所述前端页面的回收事件进行监听，并清除对应的缓存数据。

根据本发明又一方面，提供一种控制器，其包括存储器与处理器，所述存储器存储有计算机程序，所述程序在被所述处理器执行时能够实现所述方法的步骤。

根据本发明又一方面，提供一种计算机可读存储介质，用于存储计算机指令，所述指令在由一计算机或处理器执行时实现所述方法的步骤。

本发明与现有技术相比具有明显的优点和有益效果。借由上述技术方案，本发明一种前端页面加载方法、装置、控制器及介质可达到相当的技术进步性及实用性，并具有产业上的广泛利用价值，其至少具有下列优点：

本发明无需对数据进行全局渲染，仅对可视区域内的数据进行局部渲染，同时适用于有层级组件和无层级组件，提高了前端页面的加载速度，且避免了加载完成后的页面卡顿，能使页面响应速度达到用户无感知，支持数据量级别达到10w+级别，提升了用户体验。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其他目的、特征和优点能够更明显易懂，以下特举较佳实施例，并配合附图,详细说明如下。

附图说明

图1为本发明一实施例提供前端页面加载方法示意图；

图2为本发明一实施例提供的前端页面加载装置意图。

【符号说明】

1：可视区域高度获取模块2：组件高度确定模块

3：数据量获取模块4：页面加载模块

具体实施方式

为更进一步阐述本发明为达成预定发明目的所采取的技术手段及功效,以下结合附图及较佳实施例，对依据本发明提出的一种前端页面加载方法、装置、控制器及介质的具体实施方式及其功效，详细说明如后。

根据本发明实施例提供了一种前端页面加载方法，如图1所示，包括以下步骤:

步骤s1、获取前端页面可视区域的高度；

作为一种示例，所述步骤s1具体包括：

监听前端页面的调整大小事件，若页面窗口大小发生变化，则自动获取当前前端页面可视区域的高度，其中，前端页面可为浏览器页面等，调整大小事件为用户缩小或放大浏览器页面的事件。

步骤s2、根据所述可视区域的高度确定所述前端页面包括的、与所述可视区域对应的组件高度；

其中，组件是对数据和方法的简单封装，在网页上为用于展示表格，搜索，图片等等功能的一个模块。所述组件包括有层级的组件和无层级的组件，有层级的组件能够展示带有层级结构的表格，并能够展开或收起父节点；无层级结构的组件没有层级结构。作为示例，所述有层级的组件包括树形组件，所述无层级的组件包括表格组件。所述组件高度配置为百分比高度，这样可实现动态配置当前可视区域大小。

步骤s3、根据所述组件高度和预设的所述组件对应的每条数据的高度获取当前可视区域的数据量；通过所述步骤s3控制了前端页面的最大渲染数据量，页面加载速度就不再受dom最大渲染量限制。

步骤s4、渲染所述当前可视区域的数据量并加载前端页面。

其中，所述渲染可为dom渲染，为文档对象模型，将服务端请求的html文档解析成的浏览器文档对象，一个网页是一个文档，并可以用javascript等脚本语言进行访问和修改。网页请求到html一个文档后会根据文档语言的标记去显示每一个部分，这个显示的过程就是渲染。

作为一种示例，所述步骤s3中，通过懒加载的方式获取所述当前可视区域的数据量。

所述方法还包括以下步骤：

步骤s41、监听所述组件的滚动事件；

步骤s42、当所述组件内容发生滚动时，获取滚动偏移量；

步骤s43、根据所述滚动偏移量渲染所述当前可视区域的数据量并加载前端页面。

所述步骤s43具体可包括以下步骤：

步骤s431、根据所述滚动偏移量和所述预设的所述组件对应的每条数据的高度判断当前可视区域的数据是否需要滚动；

步骤s432、若需要，则根据所述滚动偏移量判断滚动方向，所述滚动方向包括向上和向下；

作为一种示例，滚动时鼠标滑动的一个距离，带正负，正是向下，负是向上。

步骤s433、根据所述滚动偏移量，按照所述滚动方向将当前可视区域的数据进行切割。

作为一种示例，当进行切割时，以所述当前可视觉区域的数据量为单位，以数据缓存中的索引位置为切割位置进行切割，每次切割数据时对应更新所述索引位置。这样就保证了滚动时可以实时动态加载数据，并没有卡顿，能够极大地提升用户体验。

所述方法还包括步骤s5、根据组件的生命周期对所述前端页面的回收事件进行监听，并清除对应的缓存数据，从而释放内存空间，进一步加快前端页面加载的速度，防止页面卡顿。

所述方法可封装重复使用，实现接口化，且实现过程中，无需第三方插件。

所述方法可基于vuejs、angularjs、reactjs等前端框架进行运行，上述前端框架均用于构建网页应用。以基于vuejs为示例进行说明，结合elementui(elementui开发了基于vuejs的桌面端组件库，提供了大量页面显示的组件，便于快速构建一个网页应用)的表格组件或者由其扩展开发的树形组件结合使用，通过双向数据绑定使得页面响应更加迅速，也减少了dom更新的频率，大大提升了效率。

本发明实施例还提供了一种前端页面加载装置，如图2所示，包括可视区域高度获取模块1、组件高度确定模块2、数据量获取模块3和页面加载模块4，其中，可视区域高度获取模块1用于获取前端页面可视区域的高度；组件高度确定模块2用于根据所述可视区域的高度确定所述前端页面包括的、与所述可视区域对应的组件高度；数据量获取模块3用于根据所述组件高度和预设的所述组件对应的每条数据的高度获取当前可视区域的数据量；页面加载模块4用于渲染所述当前可视区域的数据量并加载前端页面。

作为一种示例，所述可视区域高度获取模块1还用于监听前端页面的调整大小事件，若页面窗口大小发生变化，则自动获取当前前端页面可视区域的高度，其中，前端页面可为浏览器页面等，调整大小事件为用户缩小或放大浏览器页面的事件。

所述组件包括有层级的组件和无层级的组件，所述有层级的组件包括树形组件，有层级的组件能够展示带有层级结构的表格，并能够展开或收起父节点；无层级结构的组件没有层级结构。作为示例，所述无层级的组件包括表格组件；所述组件高度配置为百分比高度，这样可实现动态配置当前可视区域大小。

通过数据量获取模块3获取当前可视区域的数据量，控制了前端页面的最大渲染数据量，页面加载速度就不再受dom最大渲染量限制。

作为示例，所述数据量获取模块3可通过懒加载的方式获取所述当前可视区域的数据量。

所述装置还包括滚动事件监听单元、滚动偏移量获取单元和加载单元，其中，滚动事件监听单元用于监听所述组件的滚动事件；滚动偏移量获取单元用于当所述组件内容发生滚动时，获取滚动偏移量；加载单元用于根据所述滚动偏移量渲染所述当前可视区域的数据量并加载前端页面。

所述加载单元包括判断子单元、方向确定子单元和数据切割子单元，其中，判断子单元用于根据所述滚动偏移量和所述预设的所述组件对应的每条数据的高度判断当前可视区域的数据是否需要滚动；方向确定子单元用于在所述判断子单元判断当前可视区域的数据需要滚动时，根据所述滚动偏移量判断滚动方向，所述滚动方向包括向上和向下；作为一种示例，滚动时鼠标滑动的一个距离，带正负，正是向下，负是向上。数据切割子单元用于根据所述滚动偏移量，按照所述滚动方向将当前可视区域的数据进行切割。

所述数据切割子单元还用于：当进行切割时，以所述当前可视觉区域的数据量为单位，以数据缓存中的索引位置为切割位置进行切割，每次切割数据时对应更新所述索引位置。这样就保证了滚动时可以实时动态加载数据，并没有卡顿，能够极大地提升用户体验。

作为一种示例，所述装置还包括内存释放模块，用于根据组件的生命周期对所述前端页面的回收事件进行监听，并清除对应的缓存数据从而释放内存空间，进一步加快前端页面加载的速度，防止页面卡顿。

所述装置可封装重复使用，实现接口化，且实现过程中，无需第三方插件。

所述装置可基于vuejs、angularjs、reactjs等前端框架进行运行，上述前端框架均用于构建网页应用。以基于vuejs为示例进行说明，结合elementui(elementui开发了基于vuejs的桌面端组件库，提供了大量页面显示的组件，便于快速构建一个网页应用)的表格组件或者由其扩展开发的树形组件结合使用，通过双向数据绑定使得页面响应更加迅速，也减少了dom更新的频率，大大提升了效率。

本发明实施例所述的方法和装置无需对数据进行全局渲染，仅对可视区域内的数据进行局部渲染，同时适用于有层级组件和无层级组件，提高了前端页面的加载速度，且避免了加载完成后的页面卡顿，能使页面响应速度达到用户无感知，支持数据量级别达到10w+级别，提升了用户体验。

本发明实施例还提供一种控制器，其包括存储器与处理器，所述存储器存储有计算机程序，所述程序在被所述处理器执行时能够实现所述前端页面加载方法的步骤。

本发明实施例还提供一种计算机可读存储介质，用于存储计算机指令，所述指令在由一计算机或处理器执行时实现所述前端页面加载方法的步骤。

以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，虽然本发明已以较佳实施例揭露如上，然而并非用以限定本发明,任何熟悉本专业的技术人员，在不脱离本发明技术方案范围内,当可利用上述揭示的技术内容作出些许更动或修饰为等同变化的等效实施例,但凡是未脱离本发明技术方案的内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与修饰，均仍属于本发明技术方案的范围内。