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

僅僅是取消了動畫， 就有這麼好的效果， 簡直不要太贊。

總結

不是什麼高深的原理， 僅僅是個小技巧， 但願對你有所啓發。