一、渲染了過(guò)多的checkbox組件后，批量切換選中狀態(tài)，渲染會(huì)特別卡頓。常規(guī)解決方案如下：

1、使用虛擬滾動(dòng)，減少渲染量，根據(jù)用戶視口渲染少量節(jié)點(diǎn)，降低頁(yè)面消耗從而減少卡頓。

  瓶頸：在視口內(nèi)就已經(jīng)渲染了大量的checkbox標(biāo)簽，則達(dá)不到優(yōu)化效果。

2、分批操作數(shù)據(jù)，通過(guò)插入渲染幀等待，從而使渲染更加流暢。

  瓶頸：批量完成的時(shí)間會(huì)特別長(zhǎng)，用戶操作checkbox的頻率較高，雖有優(yōu)化了卡頓問(wèn)題，但整體用戶體驗(yàn)有所降低。

二、經(jīng)過(guò)排查后，發(fā)現(xiàn)以下巧妙的解決方案

image.png

image.png

以上兩個(gè)元素分別有兩個(gè)過(guò)渡效果，分別是控制背景顏色的過(guò)渡動(dòng)畫和選中狀態(tài)對(duì)號(hào)的過(guò)渡效果。
關(guān)閉以上的過(guò)渡就會(huì)非常絲滑，如果感覺(jué)用戶交互比較生硬，可以只關(guān)閉第一個(gè)，保留第二個(gè)，同樣也會(huì)很絲滑。
如果實(shí)在量大可以搭配以上兩個(gè)優(yōu)化方案實(shí)現(xiàn)且同時(shí)關(guān)閉兩個(gè)過(guò)渡效果。
代碼如下：

  .el-checkbox__inner{
        transition: none !important;
  }
  .el-checkbox__inner:after{
        transition: none !important;
  }