背景

性能优化是永恒的话题。

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

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

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

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

总结

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