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;
}

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

总结

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

以上是 antd性能优化长列表 的全部内容， 来源链接： utcz.com/a/34308.html

回到顶部