一、渲染了过多的checkbox组件后，批量切换选中状态，渲染会特别卡顿。常规解决方案如下：

1、使用虚拟滚动，减少渲染量，根据用户视口渲染少量节点，降低页面消耗从而减少卡顿。

  瓶颈：在视口内就已经渲染了大量的checkbox标签，则达不到优化效果。

2、分批操作数据，通过插入渲染帧等待，从而使渲染更加流畅。

  瓶颈：批量完成的时间会特别长，用户操作checkbox的频率较高，虽有优化了卡顿问题，但整体用户体验有所降低。

二、经过排查后，发现以下巧妙的解决方案

image.png

image.png

以上两个元素分别有两个过渡效果，分别是控制背景颜色的过渡动画和选中状态对号的过渡效果。
关闭以上的过渡就会非常丝滑，如果感觉用户交互比较生硬，可以只关闭第一个，保留第二个，同样也会很丝滑。
如果实在量大可以搭配以上两个优化方案实现且同时关闭两个过渡效果。
代码如下：

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