摘要:后來將去掉,操作流暢多了。這時,我就在想,能不能讓頁面切換完成之后才開始渲染數據量大的組件,用戶起碼不會感知到路由切換的卡頓情況。組件開始渲染時,會觸發事件。
最近用element來做項目,在開發的過程中,突然發現頁面的操作和切換在數據量大的時候相當卡,后來提了個issue,在furybean解答后才知道,我每個單元格都加了tooltip,會生成大量的節點,造成頁面操作卡頓。后來將tooltip去掉,操作流暢多了。
但是,由于我是將頁面的數據存在vuex中的,在路由切換回來的時候,發現在數據量大的時候,頁面渲染得很慢,大概兩三秒才能切換過來,用戶體驗相當不好。
這時,我就在想,能不能讓頁面切換完成之后才開始渲染數據量大的組件,用戶起碼不會感知到路由切換的卡頓情況。
一開始不知道怎樣做,后來看到這篇blog:vue 性能優化,作者基于vue1.0做了一個指令,基本原理是利用v-if來控制組件的渲染時機。作者在回答中提到vue2.0可以用組件來做,具體的討論可以看這里
基于此,我做了個組件vue-lazy-render,歡迎star。
基本功能延遲加載組件
控制延遲加載的時間
可以監控數組的變化和設定數據量來決定是否開啟延遲加載
基本用法 默認trackByData
源碼解釋 template
props {{tip}}
property | description | type | default | required |
---|---|---|---|---|
time | 多長時間后開始渲染組件 | Number | 10 | false |
immediately | 是否立即開啟延遲渲染,vue-lazy-render組件會在路由切換時,會進行一次延遲渲染,如果在同一個路由中需經常對某個組件進行延遲渲染,可以將immediately由false設為true,就會馬上開啟一次延遲渲染 | Boolean | -- | false |
data | 如果需要延遲加載的組件是由數組渲染的,可以將數據的數據prop進vue-lazy-render組件,組件會根據配置監測數組變化,決定開啟延遲加載的時機 | array | -- | false |
trackByData | 是否根據data的變化來開啟延遲加載,如果設為true,需將data prop進來,并且路由切換時不會再進行延遲渲染 | Boolean | -- | false |
limit | 在數據超過多少后才開啟延遲渲染,需要data和將trackByData設為true | Number | 30 | false |
maskClass | 等待渲染時的遮罩層樣式 | String | -- | false |
tip | 等待渲染時的提示文字 | String | 正在渲染,請稍候 | false |
/** * 延遲渲染數據,在數據渲染完成后觸發loaded事件 */ showLazy() { if ((this.data && this.data.length > this.limit) || !this.data) { // 如果數據存在并且數據的數量比限定的數量大,則開啟延遲渲染 如果不是列表調用組件,也開啟延遲渲染 this.syncLoader() } else { // 其他情況,不開啟延遲渲染 this.show = true this.$emit("loaded") } }, /** * 延遲渲染 */ syncLoader() { this.show = false setTimeout(() => { this.show = true this.$emit("loaded") },this.time) }
定義的方法很簡單,在data定義的show初始值為false,在需要延遲加載時,會用一個setTimeout來將show設為true,當show變為true時,組件才可以渲染,從而達到延遲渲染的目的。組件開始渲染時,會觸發loaded事件。
調用created() { this.showLazy() }, watch: { data() { // 數據變化時重新渲染 if (this.trackByData) { this.showLazy() } }, // 路由變化,重新渲染 $route() { if (!this.trackByData) { this.showLazy() } }, // 立即重新變為true時,重新渲染 immediately() { if (this.immediately) { this.showLazy() } }, },
在頁面進入時,開啟
如果不是track-by-data模式,則每次路由切換時,開啟
如果是track-by-data模式,則數組變化時,開啟。由于我的頁面中,有些表格是在彈層中展示的,同一個組件,可能每次打開彈層時,數據都不一樣,一開始打算用這種方法來實現延遲的,后來加了immediately,感覺這個track-by-data模式完全沒有意義了,用了反應會造成不必要的重新渲染。
當immediately由false變為true時,開啟
最后,所有文章都會同步發送到微信公眾號上,歡迎關注,歡迎提意見:
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86646.html
摘要:雖然有著各種各樣的不同,但是相同的是,他們前端優化不完全指南前端掘金篇幅可能有點長,我想先聊一聊閱讀的方式,我希望你閱讀的時候,能夠把我當作你的競爭對手,你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面,使用很多基于Web的應用。這些站點看起來既不一樣,用途也都各有不同,有在線視頻,Social Media,新聞,郵件客戶端...
摘要:免費升級到升級到后,服務器可以開啟版本,對比性能和緩存各方面要更好,還有其他新特性,可以啟動功能,更好的進行離線緩存,更好的離線體驗。 showImg(https://segmentfault.com/img/remote/1460000012773891?w=370&h=661); 在線地址:https://fancy.czero.cn 手機掃描二維碼查看: showImg(http...
摘要:保利威無延遲直播可以在手機電腦上實現高參與度的互動,讓課堂體驗再上一層,對于提升公開課轉化率非常有幫助。無延遲體驗能讓直播更接近線下體驗。 ? ? 衡量一場直播是否成功,用戶互動體驗必然是關鍵一環。 ? 今年疫情影響下,云辦公、云上課、云會展、云購物紛紛興起。帶貨直播、空中課堂、會展直播等多樣化的場景讓用戶對直播實時性、流暢性有了更高要求。 ? ...
閱讀 2814·2023-04-26 02:00
閱讀 2771·2019-08-30 15:54
閱讀 860·2019-08-30 11:15
閱讀 1502·2019-08-29 15:31
閱讀 917·2019-08-29 14:12
閱讀 489·2019-08-29 13:08
閱讀 838·2019-08-27 10:51
閱讀 2706·2019-08-26 12:17