【技术实现步骤摘要】
前端页面加载方法、装置、控制器及介质
本专利技术涉及计算机
，尤其涉及一种前端页面加载方法、装置、控制器及介质。
技术介绍
在前端页面加载加载过程中，前端页面所支持的最大渲染DOM(DocumentObjectModel，文档对象模型，简称DOM)数量有限，在组件渲染数量过大时，用户通常会遇到页面初始化加载时间长、且渲染成功后页面卡顿、无法滚动等问题，用户体验非常差。现有技术中，在面临这种情况时，可在加载大量前端资源文件时进行分页渲染，以减少用户的等待时间，但是，由于还是对页面数据进行全局渲染，因此页面整体加载时间并没有明显减少，用户仍然能看到页面正在加载中。此外，对于有层级结构的组件，无法使用分页渲染，例如，汽车领域的汽车零件信息的树形组件展示就无法使用分页渲染来减少页面加载时间。因此，如何提高前端页面加载速度，避免页面卡顿成为亟待解决的技术问题。
技术实现思路
本专利技术目的在于，提供一种前端页面加载方法、装置、控制器及介质，通过局部渲染提高了前端页面的加载速度，且避免了加载完成后的页面卡顿，提升了用户体验。为了解决上述技术问题，根据本专利技术第一实施例，提...
【技术保护点】
1.一种前端页面加载方法，其特征在于，包括:获取前端页面可视区域的高度；根据所述可视区域的高度确定所述前端页面包括的、与所述可视区域对应的组件高度；根据所述组件高度和预设的所述组件对应的每条数据的高度获取当前可视区域的数据量；渲染所述当前可视区域的数据量并加载前端页面。
【技术特征摘要】
1.一种前端页面加载方法，其特征在于，包括:获取前端页面可视区域的高度；根据所述可视区域的高度确定所述前端页面包括的、与所述可视区域对应的组件高度；根据所述组件高度和预设的所述组件对应的每条数据的高度获取当前可视区域的数据量；渲染所述当前可视区域的数据量并加载前端页面。2.根据权利要求1所述的前端页面加载方法，其特征在于，所述获取前端页面可视区域的高度，包括以下步骤：监听前端页面的调整大小事件，若页面窗口大小发生变化，则自动获取当前前端页面可视区域的高度。3.根据权利要求1所述的前端页面加载方法，其特征在于，所述组件包括有层级的组件和无层级的组件，所述有层级的组件包括树形组件，所述无层级的组件包括表格组件；所述组件高度配置为百分比高度。4.根据权利要求1所述的前端页面加载方法，其特征在于，根据所述组件高度和预设的所述组件对应的每条数据的高度获取当前可视区域的数据量,包括以下步骤:通过懒加载的方式获取所述当前可视区域的数据量。5.根据权利要求1-4中任意一项所述的前端页面加载方法，其特征在于，所述方法还包括：监听所述组件的滚动事件；当所述组件内容发生滚动时，获取滚动偏移量；根据所述滚动偏移量渲染所述当前可视区域的数据量并加载前端页面。6.根据权利要求5所述的前端页面加载方法，其特征在于，所述根据所述滚动偏移量渲染所述当前可视区域的数据量并加载前端页面，包括以下步骤：根据所述滚动偏移量和所述预设的所述组件对应的每条数据的高度判断当前可视区域的数据是否需要滚动；若需要，则根据所述滚动偏移量判断滚动方向，所述滚动方向包括向上和向下；根据所述滚动偏移量，按照所述滚动方向将当前可视区域的数据进行切割。7.根据权利要求6所述的前端页面加载方法，其特征在于，当进行切割时，以所述当前可视觉区域的数据量为单位，以数据缓存中的索引位置为切割位置进行切割，每次切割数据时对应更新所述索引位置。8.根据权利要求1所述的前端页面加载方法，其特征在于，所述方法还包括，根据组件的生命周期对所述前端页面的回收事件进行监听，并清除对应的缓存数据。9.一种前端页面加载装置，其特征在于，包括:可视区域高度获取模块，配置为获取前端页面可视区域的高度；组件高度确定模块，配置为根据所述可视区域的高度确定所述前端页面包括的、与所述可视区域对应的组件高度；数据量获取模块，配置为根据所述组件高度和预设...
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。