vue-lazy-render: 延遲渲染大組件，增強頁面切換流暢度

awkj 發(fā)布于2019-08-21 11:23 / 1739人閱讀

摘要：后來將去掉，操作流暢多了。這時，我就在想，能不能讓頁面切換完成之后才開始渲染數(shù)據(jù)量大的組件，用戶起碼不會感知到路由切換的卡頓情況。組件開始渲染時，會觸發(fā)事件。

最近用element來做項目，在開發(fā)的過程中，突然發(fā)現(xiàn)頁面的操作和切換在數(shù)據(jù)量大的時候相當卡，后來提了個issue,在furybean解答后才知道，我每個單元格都加了tooltip，會生成大量的節(jié)點，造成頁面操作卡頓。后來將tooltip去掉，操作流暢多了。

但是，由于我是將頁面的數(shù)據(jù)存在vuex中的，在路由切換回來的時候，發(fā)現(xiàn)在數(shù)據(jù)量大的時候，頁面渲染得很慢，大概兩三秒才能切換過來，用戶體驗相當不好。

這時，我就在想，能不能讓頁面切換完成之后才開始渲染數(shù)據(jù)量大的組件，用戶起碼不會感知到路由切換的卡頓情況。

一開始不知道怎樣做，后來看到這篇blog:vue 性能優(yōu)化,作者基于vue1.0做了一個指令，基本原理是利用v-if來控制組件的渲染時機。作者在回答中提到vue2.0可以用組件來做，具體的討論可以看這里

基于此，我做了個組件vue-lazy-render，歡迎star。

基本功能

延遲加載組件

控制延遲加載的時間

可以監(jiān)控數(shù)組的變化和設定數(shù)據(jù)量來決定是否開啟延遲加載

基本用法 默認

trackByData

源碼解釋 template


    
    {{tip}}

props

property	description	type	default	required
time	多長時間后開始渲染組件	Number	10	false
immediately	是否立即開啟延遲渲染,vue-lazy-render組件會在路由切換時,會進行一次延遲渲染,如果在同一個路由中需經(jīng)常對某個組件進行延遲渲染,可以將immediately由false設為true,就會馬上開啟一次延遲渲染	Boolean	--	false
data	如果需要延遲加載的組件是由數(shù)組渲染的,可以將數(shù)據(jù)的數(shù)據(jù)prop進vue-lazy-render組件,組件會根據(jù)配置監(jiān)測數(shù)組變化,決定開啟延遲加載的時機	array	--	false
trackByData	是否根據(jù)data的變化來開啟延遲加載,如果設為true,需將data prop進來,并且路由切換時不會再進行延遲渲染	Boolean	--	false
limit	在數(shù)據(jù)超過多少后才開啟延遲渲染,需要data和將trackByData設為true	Number	30	false
maskClass	等待渲染時的遮罩層樣式	String	--	false
tip	等待渲染時的提示文字	String	正在渲染,請稍候	false

methods

/**
 * 延遲渲染數(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，在需要延遲加載時，會用一個setTimeout來將show設為true，當show變?yōu)閠rue時，組件才可以渲染，從而達到延遲渲染的目的。組件開始渲染時，會觸發(fā)loaded事件。

調(diào)用

created() {
    this.showLazy()
},
watch: {
    data() { // 數(shù)據(jù)變化時重新渲染
        if (this.trackByData) {
            this.showLazy()
        }
    },
    // 路由變化,重新渲染
    $route() {
        if (!this.trackByData) {
            this.showLazy()
        }
    },
    // 立即重新變?yōu)閠rue時,重新渲染
    immediately() {
        if (this.immediately) {
            this.showLazy()
        }
    },
},

在頁面進入時，開啟

如果不是track-by-data模式，則每次路由切換時，開啟

如果是track-by-data模式，則數(shù)組變化時，開啟。由于我的頁面中，有些表格是在彈層中展示的，同一個組件，可能每次打開彈層時，數(shù)據(jù)都不一樣，一開始打算用這種方法來實現(xiàn)延遲的，后來加了immediately，感覺這個track-by-data模式完全沒有意義了，用了反應會造成不必要的重新渲染。

當immediately由false變?yōu)閠rue時，開啟

最后，所有文章都會同步發(fā)送到微信公眾號上，歡迎關注,歡迎提意見：

GPU云服務器云服務器流暢度 webrtc流暢度 webrtc屏幕共享流暢度 webrtc 屏幕共享流暢度

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86646.html

前端優(yōu)化 - 收藏集 - 掘金

摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優(yōu)化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

VincentFF 2019-08-20 17:15 評論0 收藏0
Vue全家桶商城全站升級之引入HTTPS,PWA,錯誤監(jiān)控,持續(xù)構(gòu)建。

摘要：免費升級到升級到后，服務器可以開啟版本，對比性能和緩存各方面要更好，還有其他新特性，可以啟動功能，更好的進行離線緩存，更好的離線體驗。 showImg(https://segmentfault.com/img/remote/1460000012773891?w=370&h=661); 在線地址:https://fancy.czero.cn 手機掃描二維碼查看: showImg(http...

zengdongbao 2019-08-23 10:22 評論0 收藏0
保利威無延遲直播：全面增強互動體驗，大班課、帶貨直播轉(zhuǎn)化更高效！

摘要：保利威無延遲直播可以在手機電腦上實現(xiàn)高參與度的互動，讓課堂體驗再上一層，對于提升公開課轉(zhuǎn)化率非常有幫助。無延遲體驗能讓直播更接近線下體驗。 ? ? 衡量一場直播是否成功，用戶互動體驗必然是關鍵一環(huán)。 ? 今年疫情影響下，云辦公、云上課、云會展、云購物紛紛興起。帶貨直播、空中課堂、會展直播等多樣化的場景讓用戶對直播實時性、流暢性有了更高要求。 ? ...

不知名網(wǎng)友 2021-11-25 13:36 評論0 收藏0