本文转载自微信公众号《微信大学前端技术》，作者陈剑波。转载本文请联系微一大学前端技术公众号。元素穿梭盒性能优化当后台穿梭盒处理大量数据时，由于渲染的DOM节点过多导致页面卡顿。在尽可能不改变组件原有逻辑的前提下，对其进行优化。解决方案懒加载——InfiniteScroll组件先从packages/transfer中拷贝原组件（或者改源码重新打包维护私有库，添加v-infinite-scroll="pageDown":infinite-scroll-immediate="false"0"v-model="checked":size="size":class="{'is-filterable':filterable}"class="el-转移-panel__list"v-infinite-scroll="pageDown":infinite-scroll-immediate="false">definepageSizeindata:20表示每页的数据条数在watchdata(data)中相应处理{constchecked=[];this.showData=data.slice(0,this.pageSize);constfilteredDataKeys=this.filteredData.map((item)=>item[this.keyProp]);this.checked.forEach((item)=>{if(filteredDataKeys.indexOf(item)>-1){checked.push(item);}});this.checkChangeByUser=false;this.checked=checked;},filteredData(filteredData){this.showData=filteredData.slice(0,this.pageSize);}初始化显示数量这里随意取20，最后加上滚动到底部时调用的方法pageDown(){constl=this.showData.length;consttotalLength=this.filteredData.lengthltotalLength?totalLength:l+this.pageSize));}，向下滚动时，显示的数据长度增加20（数字可选），超过则显示最大长度。这样基本解决了大数据量操作卡住的问题。由于表现层和逻辑层是分离的，所以组件的所有操作逻辑都不需要修改，最大限度地减少了差异。手动滚动到列表末尾的新问题，然后执行搜索操作仍然存在卡顿的问题。Advanced滚动过程中，顶部的数据其实还是不可见的，不显示数据，不影响用户体验，所以只显示当前页面的20条数据。我们在el-checkbox-group中添加一个ref=scrollContainer来操作滚动条，在data中定义当前页码curIndex:1并修改pageDown方法pageDown(){consttotalLength=this.filteredData.lengthif((this.curIndex*this.pageSize)totalLength?totalLength:targetLengthconststartPoint=endPoint-this.pageSize>0?endPoint-this.pageSize:0this.showData=this.filteredData.slice(startPoint,endPoint);this.$refs.scrollContainer.$el.scrollTop="1px"//滚动条到顶部，连接到下一页，如果为0，可能会触发边界问题}}为此我们也有必要添加向上翻页的方法。InfiniteScroll命令仅提供向下滚动。我们可以扩展这个命令，自己添加滚动监控。mounted(){this.$refs.scrollContainer.$el.addEventListener('scroll',this.pageUp)},beforeDestroy(){this.$refs.scrollContainer.$el.removeEventListener('scroll',this.pageUp)}，注册pageUp方法pageUp(e){if(e.target.scrollTop===0&&this.curIndex>1){this.curIndex--constendPoint=this.curIndex*this.pageSizeconststartPoint=(this.curIndex-1)*this.pageSizethis.showData=this.filteredData.slice(startPoint,endPoint);constel=this.$refs.scrollContainer.$elel.scrollTop=el.scrollHeight-el.clientHeight-1//滚动到底部，连接到上一页，-1防止出现边界问题}}，在进行数据操作时，滚动条也会随着页面内容的变化而变化。为了防止不可预测的翻页，当数据发生变化时，重新设置滚动条和当前页码。initScroll(){this.curIndex=1this.$refs.scrollContainer.$el.scrollTop=0}，同时执行initScrolldata(){...this.initScroll()...}，在对应的filteredDatatimeinwatch(filteredData){...this.initScroll()}至此，数据量较大的穿梭框性能有了很大提升。
