Element的穿梭框數據量大時點擊全選卡頓的解決方案
現象:我們渲染瞭9999條數據,由於transfer組件會一次性渲染所有數據,所以一次性渲染這麼多,卡個幾十秒很正常好吧。所以懶加載或者分頁是基本操作,方案二是分頁操作。
懶加載的方式可以用EUI的無限滾動:https://element.eleme.cn/
即便我們做瞭懶加載之後,點擊全選依舊是卡頓6秒以上,所以方案一解決的是:即便做瞭懶加載或者分頁操作後,用戶點擊分頁,依舊會卡頓幾秒的情況。
這個是因為transfer的源碼中‘全選判斷’代碼性能差的原因,方案一就是修改transfer的源碼。
我提交瞭一個pr,地址是: hhttps://github.com/ElemeFE/element/pull/20282
方案一:復制EUI的transfer組件,然後進行修改,再引入項目目錄
EUI的transfer組件目錄路徑:node_modules\element-ui\packages\transfer,復制文件夾,然後放入vue項目路徑的
在調用EUI的transfer的地方引入公共的組件transfer,
<template> <Transfer v-model="value" :data="data"></Transfer> </template> <script> import Transfer from '../common/transfer' export default { components:{ Transfer:Transfer }, //省略 </script>
開始修改transfer代碼:
打開src/common\transfer\src\transfer-panel.vue的組件,
找到updateAllChecked函數,updateAllChecked函數作用是:我們點擊一個item就需要判斷,看代碼註釋。
updateAllChecked() { /* 源碼 this.checkableData是對象數組 我們需要的是每個對象中的key 所以checkableDataKeys保存著對象的key的數組 含義是'可通過點擊進行選擇的item項'的集合 */ let start = new Date().getTime(); const checkableDataKeys = this.checkableData.map( item => item[this.keyProp] ); this.allChecked = checkableDataKeys.length > 0 && /* 從2.4.0到現在都沒改變 誒,不得不說開發團隊是真的忙啊 this.checked保存著'用戶通過點擊item選中的item數組' 如果this.checked存在著checkableDataKeys的每一項的話,那麼allChecked就是true,但凡有一項不存在就為false。allChecked代表是否全部選中瞭。 這裡的時間復雜度是n^2,狠垃圾 */ checkableDataKeys.every(item => this.checked.indexOf(item) > -1); console.log("updateAllCheckedEnd", new Date().getTime() - start); },
來看源碼的耗時:
然後我們開始重寫updateAllChecked函數:
updateAllChecked() { /* 修改 這裡就是高效數組中含有另一個數組的元素的算法 構建元素對象 */ let start = new Date().getTime(); let checkableDataKeys = this.checkableData.map((item) => { let keyProps = {}; keyProps[item[this.keyProp]] = true; return keyProps; }); // 通過對象的k-v對應,n(1)的方式尋找數組中是否存在某元素 this.allChecked = checkableDataKeys.length > 0 && this.checked.length > 0 && this.checked.every((item) => checkableDataKeys[item]); // 上面被註釋的源碼是最耗時的,所有一直看耗時就可以瞭 console.log("updateAllCheckedEnd", new Date().getTime() - start); },
這樣性能就高好多瞭,其實就是基本的前端算法題,目測EUI的開發者是因為懶才不寫的。
來看修改代碼後的耗時:
明顯快多瞭。
接下來是文件:\src\common\transfer\src\main.vue,找到addToRight函數
addToRight() { let currentValue = this.value.slice(); const itemsToBeMoved = []; const key = this.props.key; let start = new Date().getTime(); // 此處套瞭兩層循環,耗時長 this.data.forEach((item) => { const itemKey = item[key]; if ( this.leftChecked.indexOf(itemKey) > -1 && this.value.indexOf(itemKey) === -1 ) { itemsToBeMoved.push(itemKey); } }); console.log("addToRightEnd", new Date().getTime() - start); currentValue = this.targetOrder === "unshift" ? itemsToBeMoved.concat(currentValue) : currentValue.concat(itemsToBeMoved); this.$emit("input", currentValue); this.$emit("change", currentValue, "right", this.leftChecked); },
移動選中的耗時:
修改addToRight函數,
addToRight() { let start = new Date().getTime(); let currentValue = this.value.slice(); const itemsToBeMoved = []; const key = this.props.key; // 修改 let leftCheckedKeyPropsObj = {}; this.leftChecked.forEach((item, index) => { leftCheckedKeyPropsObj[item] = true; }); let valueKeyPropsObj = {}; this.value.forEach((item, index) => { valueKeyPropsObj[item] = true; }); this.data.forEach((item) => { const itemKey = item[key]; if ( leftCheckedKeyPropsObj[itemKey] && !valueKeyPropsObj[itemKey] ) { itemsToBeMoved.push(itemKey); } }); console.log("addToRightEnd", new Date().getTime() - start); currentValue = this.targetOrder === "unshift" ? itemsToBeMoved.concat(currentValue) : currentValue.concat(itemsToBeMoved); this.$emit("input", currentValue); this.$emit("change", currentValue, "right", this.leftChecked); },
移動選中耗時:
耗時明顯減少瞭,這方案的前提就是懶加載或者分頁,我試瞭一下10w的數據量,依舊是不錯的。
方案二:分頁操作
分析
checkBox-group有個check數組(用來記錄已經選中的item數組)和renderItem數組(實際渲染的item,由於是分頁,所有不會渲染所有),如果`check數組`中有`renderItem數組`的一項,那麼該項就會被標記為已選,否則是未選。實現原理就是單純的check數組和renderItem數組進行比較。
當用戶點擊全選的時候,check數組變成上萬條數據的數組,此時我們渲染瞭100條數據,那麼就要進行10000×100級別的循環,這就是耗時的原因所在。
其實,頁面隻渲染瞭100條數據,我們沒必要將上萬條數據一次性放入check數組中,我們隻需要把這100條數組放入check數組,顯示這100條數據為已選即可。當頁面渲染瞭更多數據的同時,將新增的數據添加進check數組即可。這樣性能大大提升。
方案
我采用的方案如下:
1.隻顯示100條數據。
2.下拉顯示下100條數據,上拉顯示上100條數據。
3.當下拉或者上拉增加渲染數據的同時,把新增數據添加進check數組。
這些隻是大致思路,我已經實現瞭。還有很多細節要處理,想要完善,還得利用對象的鍵值對實現刪除等。
到此這篇關於Element的穿梭框數據量大時點擊全選卡頓的解決方案的文章就介紹到這瞭,更多相關Element 穿梭框卡頓內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue必學知識點之forEach()的使用
- JavaScript中forEach的錯誤用法匯總
- element 穿梭框性能優化的實現
- JavaScript循環遍歷的24個方法,你都知道嗎
- JS面試題之forEach能否跳出循環詳解