背景性能优化是一个永恒的话题。我们或多或少地处理了性能优化的需求。页面性能优化主要是通过减少不必要的渲染来实现的。不必要的渲染可以是减少渲染节点的数量，也可以是减少不必要的动画。今天要介绍的是减少antd长列表的动画达到优化目的的实用技巧。希望大家看完后能留下印象。最近文在做一长串Tables，是大概500个产品的效果图。每个产品包含1到10个SKU，还需要处理复选和逆选。全选操作有明显的滞后，需要一些优化。为了解决卡顿问题，经过深思熟虑，确定了两种方法：一种靠谱的方案是做一个虚拟列表，只渲染视图中的节点。只是这个方案复杂度高，最好等基本功能完成后再做具体的评估和实施。通过减少其他不必要的渲染或动画，达到优化的目的。下午弄了一段时间，测试了1000条数据，平均渲染时间从差不多2.5s减少到1.75s，效果还是不错的。在线演示：https://codesandbox.io/s/bold...关键代码：.ant-checkbox-checked.ant-checkbox-inner::after{transition:none;}.ant-checkbox-checked::after{animation:none;}就取消动画，效果这么好，简直不要太好。总结的不是什么高深的原理，只是一些小技巧，希望对你有所启发。关注我如果你觉得这篇内容对你很有启发，那就关注我吧~更多精彩：聊一聊ESM、Bundleless、Vite、Snowpack记得一个“无限列表”滚动优化“面试三招”代码分割（上）Cache的”面试三招”（上）“面试三招”的缓存（下）“面试三招”的HTTP（上）“面试三招”的HTTP（下）“面试三招”的this
