「性能优化」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;
}

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

总结

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

---

关注我

如果你觉得这篇内容对你挺有启发，那就关注我吧～

更多精彩：

聊聊 ESM、Bundleless 、Vite 、Snowpack

记一次 「 无限列表 」滚动优化

「 面试三板斧 」之 代码分割（上）

「 面试三板斧 」之缓存 (上)

「 面试三板斧 」之缓存 (下)

「 面试三板斧 」之 HTTP （上）

「 面试三板斧 」之 HTTP （下）

「 面试三板斧 」之  this