背景
性能优化是永恒的话题。 css
咱们或多或少都处理过性能优化的需求， 页面的性能优化， 主要是经过减小非必要的渲染来实现。面试
非必要的渲染， 能够是减小渲染的节点数量， 也能够是减小没必要要的动画。segmentfault
今天要介绍的就是经过减小antd长列表的动画，来达到优化目的实用小技巧。缓存
但愿你们看过以后， 留个印象。性能优化
正文
最近在作一个 Table 的长列表， 大概就是500条产品的渲染， 每一个产品又包含1～10个sku, 还要处理复杂的全选， 反选。antd
全选操做有比较明显的卡顿，须要一些优化。less
要解决卡顿的问题，考虑以后， 肯定了两个作法：性能
- 一个可靠的方案是作虚拟列表， 只渲染视图中的节点。 只不过此方案有较高的复杂度， 仍是等基础功能完成后， 具体再作评估和实现。
- 经过减小其余没必要要的渲染或者动画， 来达到优化的目的。
下午用一小会儿搞了下， 测试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;
}
仅仅是取消了动画， 就有这么好的效果， 简直不要太赞。
总结
不是什么高深的原理， 仅仅是个小技巧， 但愿对你有所启发。
关注我
若是你以为这篇内容对你挺有启发，那就关注我吧～
更多精彩：
聊聊 ESM、Bundleless 、Vite 、Snowpack
本文同步分享在 博客“皮小蛋”（SegmentFault）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。