背景

性能优化是永恒的话题。

咱们或多或少都解决过性能优化的需要， 页面的性能优化， 次要是通过缩小非必要的渲染来实现。

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

明天要介绍的就是通过缩小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;}

仅仅是勾销了动画， 就有这么好的成果， 几乎不要太赞。

总结

不是什么浅近的原理， 仅仅是个小技巧， 心愿对你有所启发。