「性能优化」antd 优化长列表的一个小技巧

背景

性能优化是永恒的话题。

咱们或多或少都处理过性能优化的需求， 页面的性能优化， 主要是经过减小非必要的渲染来实现。

非必要的渲染， 能够是减小渲染的节点数量， 也能够是减小没必要要的动画。

今天要介绍的就是经过减小antd长列表的动画，来达到优化目的实用小技巧。

但愿你们看过以后， 留个印象。

正文

最近在作一个 Table 的长列表， 大概就是500条产品的渲染， 每一个产品又包含1～10个sku, 还要处理复杂的全选， 反选。

全选操做有比较明显的卡顿，须要一些优化。

要解决卡顿的问题，考虑以后， 肯定了两个作法：

1. 一个可靠的方案是作虚拟列表， 只渲染视图中的节点。 只不过此方案有较高的复杂度， 仍是等基础功能完成后， 具体再作评估和实现。
2. 经过减小其余没必要要的渲染或者动画， 来达到优化的目的。

下午用一小会儿搞了下， 测试1000条数据，平均渲染时间从从差很少2.5s 下降到了1.75s, 效果仍是不错的。

在线demo:
https://codesandbox.io/s/bold...

关键代码：

.ant-checkbox-checked .ant-checkbox-inner::after {
    transition: none;
}

.ant-checkbox-checked::after { 
    animation: none;
}

仅仅是取消了动画， 就有这么好的效果， 简直不要太赞。

总结

不是什么高深的原理， 仅仅是个小技巧， 但愿对你有所启发。