其他分享
首页 > 其他分享> > 【新特性速递】表格加载速度足足 3 倍提升,爱了爱了

【新特性速递】表格加载速度足足 3 倍提升,爱了爱了

作者:互联网

FineUI 的下个版本(v8.0.0),我们会为表格新增延迟加载功能(EnableDelayRender),从而使得典型表格页面加载性能提升 3 倍以上!

 

大数据表格

FineUI很早之前就已经支持大数据表格了,对于需要一次性展示超过 1000 条数据的纯展示场景非常有用。

官网示例:FineUIPro 在线示例 - 基于 jQuery 的专业 ASP.NET 控件库

但是大数据表格属于企业版功能,必须使用网址数据源,而且不支持树表格、列锁定、单元格合并等等很多特性,局限性比较大。

 

大数据表格的实现原理其实是虚拟滚动条,只展示当前用户可视区域内的表格数据。

如下图所示,长长的滚动条是由一个 .f-grid-table-bigdata-shadow 元素的高度撑起来的,而这个高度是根据每行的高度和总行数计算来的(所以大数据表格要求行的高度必须固定)。

 

 

v8.0新增的延迟加载

由于大数据表格存在一定的局限性,我们一直在思考有没有更简单的办法提到普通表格的加载性能,特别是每页 200 - 1000 条数据的表格性能,这个才是我们最经常遇到的应用场景。

 

说到底,表格行数对渲染性能的影响归根结底是因为大量DOM节点的产生,而在 200 条以上的数据情况下, 用户在页面第一次加载时最多看到不超过 30 条数据。

也就是说,我们要额外加载 170 条用户看不到的数据,而这些额外加载的数据会影响页面的打开速度。

 

如果能够延迟加载那些用户看不到的数据,岂不是一举两得:

 

FineUI v8.0新增的延迟加载特性就是为了实现这个目的,来看下页面第一次加载时的DOM节点渲染情况:

和大数据表格的情况类似,但是实现方式完全不同。

整个表格在页面第一次加载时就完全渲染了,只不过DOM节点只渲染了前面的 30 多行数据,剩余的 400 多行数据以占位符的形式渲染到DOM,这就节省了大量的DOM渲染时间(加载了页面第一次渲染速度,提升用户体验)。

 

 

为了比较准确的描述表格的渲染速度,我们写了如下的测试代码,用于衡量当前表格渲染用时:

<f:Grid ID="Grid1" ...>
    <Columns>
        ...
    </Columns>
    <Listeners>
        <f:Listener Event="render" Handler="onGridRender" />
    </Listeners>
</f:Grid>


<script>
    // 等所有JS资源下载完毕后开始
    var __STARTTIME = new Date();

    // 表格渲染完毕后结束
    function onGridRender() {
        F.ui.Grid1.setTitle(F.ui.Grid1.getTitle() + ' - 渲染时间:' + ((new Date() - __STARTTIME) / 1000).toFixed(2));
    }
</script>

 

首先来看下,目前表格在加载 500 条数据和 1000 条数据的性能表现:

 

 

添加了 v8.0.0 新增的延迟加载特性(EnableDelayRender=true)之后,我们再来看下相同页面的加载速度:

 

 小结

经过多次测试,我们测算出平均渲染速度,如下表所示。

可以看出,FineUI v8.0新增的延迟加载属性(EnableDelayRender=true)可以极大的提升表格页面的加载速度,在典型的每页 500 条数据的情况下,页面第一次加载的速度提升 3 倍以上。

  第一次 第二次 第三次 第四次 第五次 第六次 平均加载时间(秒) 渲染速度提升
500条数据  0.91 0.87  0.84  1.01   0.92  0.88  0.91 -
1000条数据  1.72  1.68  1.65  1.64 1.70   1.62  1.67 -
500条数据(延迟渲染)  0.25  0.22  0.24  0.24  0.22  0.20  0.23  396%
100条数据(延迟渲染)  0.40  0.38  0.35 0.34   0.41  0.39  0.38  439%

 

 

 

 

 

 

 

 为了更直观的感受两者的差异,我们通过两个动图来呈现 FineUI v8.0 带来的表格渲染速度的提升。

 未启用延迟加载

 

 

 启用延迟加载

 

 

欢迎入伙:https://fineui.com/fans/

三石出品,必属精品 

标签:表格,渲染,速递,加载,数据,延迟,页面
来源: https://www.cnblogs.com/sanshi/p/15366500.html