資訊專(zhuān)欄INFORMATION COLUMN
摘要：接下來(lái)本文會(huì)對(duì)比組件在性能上做出的優(yōu)化。出現(xiàn)該問(wèn)題的原因在組件的鉤子中有三個(gè)監(jiān)聽(tīng)，分別是組件添加，刪除，和選中時(shí)監(jiān)聽(tīng)事件。在監(jiān)聽(tīng)事件中會(huì)去遍歷當(dāng)中的所有子組件做出相應(yīng)的改變。
iView之Select組件在性能上的優(yōu)化
????我們公司的組件庫(kù)是基于iView 比較早的版本修改后的僅供公司內(nèi)部使用的組件庫(kù)，因此在使用的過(guò)程中就會(huì)遇到一些問(wèn)題。接下來(lái)本文會(huì)對(duì)比Select組件在性能上做出的優(yōu)化。
Debounce函數(shù)????我們先來(lái)回顧一下debounce函數(shù)的使用場(chǎng)景：在前端頁(yè)面我們會(huì)遇到一些頻繁觸發(fā)的事件;比如
鼠標(biāo)的移動(dòng)mousemove事件;window對(duì)象的resize、scroll事件;
keydown,keyup事件;
實(shí)際的使用過(guò)程中我們可能不需要每次觸發(fā)事件的時(shí)候都去響應(yīng)該事件，我們往往需要當(dāng)用戶(hù)停止操作多少ms后去響應(yīng)事件。這個(gè)時(shí)候我們就需要用到debounce函數(shù)了。下面是一段debounce函數(shù)
export function debounce(fn) {
let waiting;
return function() {
if (waiting) return;
waiting = true;
const context = this,
args = arguments;
const later = function() {
waiting = false;
fn.apply(context, args);
};
this.$nextTick(later);
};
}
這段代碼的意思的意思是當(dāng)DOM更新后去響應(yīng)這個(gè)事件，并且DOM更新后只會(huì)執(zhí)行一次
有了這些知識(shí)的準(zhǔn)備我們就可以來(lái)談?wù)勈褂眠@個(gè)組件遇到的性能問(wèn)題了。
????在使用低版本的組件過(guò)程中，當(dāng)數(shù)據(jù)量很大例如某個(gè)select選擇器里面有500條甚至更多的數(shù)據(jù)時(shí)，進(jìn)行模糊搜索有可能卡死頁(yè)面，關(guān)閉頁(yè)面有延遲。
出現(xiàn)該問(wèn)題的原因????在Select組件的mounted鉤子中有三個(gè)監(jiān)聽(tīng)，分別是組件添加，刪除，和選中時(shí)監(jiān)聽(tīng)事件。在監(jiān)聽(tīng)事件中會(huì)去遍歷Select當(dāng)中的所有子組件做出相應(yīng)的改變。
//監(jiān)聽(tīng)子組件的移除
this.$on("remove",() => {
if (!this.remote) {
this.modelToQuery();
this.$nextTick(() => this.broadcastQuery(""));
} else {
this.findChild((child) => {
child.updateSearchLabel(); // #1865
child.selected = this.multiple ? this.model.indexOf(child.value) > -1 : this.model === child.value;
});
}
this.slotChange();
this.updateOptions(true);
})
查找這個(gè)監(jiān)聽(tīng)的通知對(duì)象發(fā)現(xiàn)正是Select的子組件在銷(xiāo)毀或者是創(chuàng)建時(shí)通知父組件做出相應(yīng)的變化。
//組件銷(xiāo)毀時(shí)通知父組件
beforeDestroy () {
this.dispatch("iSelect", "remove");
this.$off("on-select-close", this.onSelectClose);
this.$off("on-query-change",this.onQueryChange);
}
那么問(wèn)題就出在這里了，當(dāng)有大量的子組件時(shí)，每一個(gè)組件移除，父組件需要遍歷一次。這樣就拖累性能。
解決辦法????既然前面提到debounce函數(shù)，想必大家應(yīng)該想到要怎么解決了。使用debounce函數(shù)能夠解決這個(gè)問(wèn)題，我們只需要所有子組件銷(xiāo)毀時(shí)通知父組件一次就夠了。引入debounce函數(shù)后經(jīng)本人測(cè)試基本上解決了卡頓以及卡死的問(wèn)題，代碼如下。
//select組件mounted函數(shù)當(dāng)中去監(jiān)聽(tīng) append 、remove 事件
this.$on("append", this.debouncedAppendRemove());
this.$on("remove", this.debouncedAppendRemove());
//引入debounce函數(shù)
debouncedAppendRemove(){
return debounce(function(){
if (!this.remote) {
this.modelToQuery();
this.$nextTick(() => this.broadcastQuery(""));
} else {
this.findChild((child) => {
child.updateSearchLabel(); // #1865
child.selected = this.multiple ? this.model.indexOf(child.value) > -1 : this.model === child.value;
});
}
this.slotChange();
this.updateOptions(true);
});
}
其他細(xì)節(jié)
????低版本中子組件的監(jiān)聽(tīng)事件沒(méi)有移除掉，高版本的有移除。
mounted () {
this.$on("on-select-close", this.onSelectClose);
this.$on("on-query-change",this.onQueryChange);
}
beforeDestroy () {
this.$off("on-select-close", this.onSelectClose);
this.$off("on-query-change",this.onQueryChange);
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94586.html
摘要：而則是用到到指令結(jié)合的方式去生成，批量生成元素。表格操作列自定義渲染的時(shí)，使用的是的函數(shù)，直接在中插入對(duì)應(yīng)模板表格分頁(yè)都需要引入分頁(yè)組件配合使用兩者總體比較，要比簡(jiǎn)潔許多。 element VS iview(最近項(xiàng)目UI框架在選型 ，做了個(gè)分析， 不帶有任何利益相關(guān)）主要從以下幾個(gè)方面來(lái)做對(duì)比使用率（npm 平均下載頻率，組件數(shù)量，star, issue…)API風(fēng)格打包優(yōu)化與設(shè)計(jì)師友...
摘要：它的文檔也是相當(dāng)詳細(xì)，每個(gè)功能都配有詳細(xì)說(shuō)明和實(shí)例代碼，直接復(fù)制就可以使用，我們也計(jì)劃在明年啟動(dòng)英文文檔翻譯計(jì)劃。明年會(huì)啟動(dòng)英文文檔翻譯計(jì)劃，也希望喜歡和支持，同時(shí)英語(yǔ)不錯(cuò)的同學(xué)可以加入我們，一起參與翻譯。 前段時(shí)間在微軟參加活動(dòng)，分享了 TalkingData 開(kāi)源的基于 Vue.js 的高效 UI 組件庫(kù) iView 的一些開(kāi)發(fā)經(jīng)驗(yàn)，現(xiàn)整理成文，和大家探討。 showImg(htt...
摘要：如圖所示還有其它很多項(xiàng)的更新，比如新增屬性，可以設(shè)置面板展開(kāi)時(shí)默認(rèn)顯示的日期。目前最新版本支持鍵盤(pán)可訪問(wèn)性的組件有。期待你的加入下個(gè)版本預(yù)告下個(gè)版本計(jì)劃重構(gòu)組件，以全面支持表單組件的鍵盤(pán)可訪問(wèn)性，敬請(qǐng)期待。 在過(guò)去的兩個(gè)多月里，iView 陸續(xù)發(fā)布了 2.9.0 和 2.10.0 兩個(gè)重要版本。這兩個(gè)版本總共有 255 個(gè) commit，超過(guò) 40 項(xiàng)更新。來(lái)看一下，iView 具體都...
摘要：相對(duì)時(shí)間組件錨點(diǎn)組件面板分割組件分割線組件單元格組件相對(duì)時(shí)間組件用于表示幾分鐘前幾小時(shí)前等相對(duì)于此時(shí)此刻的時(shí)間描述。單元格組件在手機(jī)上比較常見(jiàn)，在上則常用于固定的側(cè)邊菜單項(xiàng)。開(kāi)發(fā)者社區(qū)這是發(fā)布會(huì)最勁爆的一款產(chǎn)品了。 showImg(https://segmentfault.com/img/bVbeuj6?w=2864&h=1458); 7 月 28 日，我們成功地召開(kāi)了 iView 3...
閱讀 3073·2021-11-11 16:55
閱讀 3215·2021-10-18 13:34
閱讀 604·2021-10-14 09:42
閱讀 1653·2021-09-03 10:30
閱讀 906·2021-08-05 10:02
閱讀 988·2019-08-30 11:27
閱讀 3495·2019-08-29 15:14
閱讀 1261·2019-08-29 13:02
