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

2021 年 10 月 4 日
筆記
Asp.Net, FineUI

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 带来的表格渲染速度的提升。

未启用延迟加载

启用延迟加载

欢迎入伙：//fineui.com/fans/

三石出品，必属精品

Tags: Asp.Net FineUI