【新特性速递】表格加载速度足足 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://www.cnblogs.com/sanshi/p/15366500.html