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