對(duì)角另一面

vue-lazy-render: 延遲渲染大組件,增強(qiáng)頁面切換流暢度

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

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

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

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

延伸閱讀

學(xué)習(xí)是年輕人改變自己的最好方式-Java培訓(xùn),做最負(fù)責(zé)任的教育,學(xué)習(xí)改變命運(yùn),軟件學(xué)習(xí),再就業(yè),大學(xué)生如何就業(yè),幫大學(xué)生找到好工作,lphotoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動(dòng)軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計(jì)培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)學(xué)習(xí)是年輕人改變自己的最好方式