1、基于異步數據的vue頁面刷新
先看看基于異步數據的vue頁面刷新后,都發生了啥~
如圖所示:
圖1 基于異步數據的vue頁面刷新 網絡請求圖
步驟如下:
step1:請求頁面;
step2:請求頁面內的css、js資源;
step3:vue頁面初始化;
step4:頁面渲染,框架呈現[無數據內容];
step5:請求頁面實際數據;
step6:數據ready,填充視圖,圖片資源加載;
step7:完整頁面呈現。
步驟分析:
step1:請求html文件;
step2:請求資源;
優化點:
a、多次訪問的資源緩存:可從MD5、組件打包方式等角度再細分;
b、app框架資源預加載:如果是hybird開發的app,可通過app框架預加載的方式,將單頁應用的資源提前緩存。
單頁的css、js資源,與傳統頁面的資源相比,規模要大很多。其集合了幾乎單頁應用的所有css、js文件,隨著應用的規模大小成正比增長。合理的緩存處理,將大大提升頁面加載速度。a、b兩點可實現性能加速的原因是,本地加載過的資源,會緩存在本地;頁面請求資源時,瀏覽器會先查找緩存,如果有緩存,則本地取,節省了網絡請求。[可了解瀏覽器的強緩、弱緩]
step3:頁面初始化;
優化點:
利用v-if指令按需加載組件~
由于vue在初始化過程中,會深度查找子組件,生成依賴,構建虛擬DOM,所以其初始化時間相對較長;不過在查找過程中,遇到v-if為false的組件,將停止深度查找,從而節省初始化時間。由此可通過控制v-if的布爾值,實現性能優化和組件的按需加載。例如在初始化過程中,僅首屏必須的組件v-if=true,其他組件[如非首屏組件、彈窗組件等],可在下一事件循環中[通過setTimeout(fn, 0)等異步操作可實現],或者首屏資源加載完成后,開啟。
step4:默認數據頁面渲染;(默認數據由vuex提供)
優化點:無數據的頁面框架的渲染展現[通常所說的灰框],讓用戶提前感知頁面,從而提升用戶體驗;(包括讀取vuex數據,進行渲染)
step5:異步請求數據,與step4同時進行,通過ajax實現;
step6:資源加載;
優化點:進行圖片[視頻]分批加載優化,從而增加同一帶寬下單圖的加載速度,加速首屏展現。
建議圖片加載流程:
step6-1:首屏展現必須圖片加載及首屏默認圖片;[如:banner圖第一張];
step6-2:首屏其余圖片加載及其他默認圖片;[如:剩余的banner圖];
step6-3:非首屏 or 彈窗。[接下來的加載順序,可根據需求調整。但要遵循一條原則,不影響首屏的用戶交互。]
2、基于異步數據的vue頁面的路由跳轉
再來看看通過單頁路由跳轉到新頁,又發生了什么?
圖2 基于異步數據的vue頁面路由跳轉 網絡請求圖
頁面加載步驟:
step1:捕獲到路由變化;
step2:初始化該頁面,并默認數據渲染;(包括讀取vuex數據,進行渲染)[step3、step4]
step3:異步請求最新的初始化數據;[同step5]
step4:資源分批預加載。[同step6]
總結:
優勢:頁內跳轉性能非常贊。對比圖1和圖2,在路由內跳轉時減少了圖1中step1、step2的頁面請求和.css、.js的請求時間[節省1s+],頁面展現嗖嗖的。再好好結合vuex的數據流,可以給用戶非常棒的體驗。
劣勢:再觀察圖1的網絡請求圖,可以發現以下幾點:
a、css、js資源相對傳統頁面,量更大,加載時間加長;
b、vue的首屏展現,依賴異步數據的請求,相對傳統同步頁面,增加了單獨的數據請求時間消耗;
c、頁面渲染,在js執行完畢之后,才開始進行;而最終的首屏展現,則需要等待異步數據請求到達之后。
由于a、b的存在,c的首屏展現時間相對傳統頁面更慢。
VUE的異步單頁應用優勢與劣勢非常明顯,缺點是初始化時間長,依賴js資源的加載;優勢是運行速度快,路由內跳轉幾乎沒太多的時間消耗。如果是一定規模大小的單頁應用,它將是不錯的選擇。特別是使用hybird開發,通過app框架將資源預加載之后,需依賴js資源的劣勢也必將不存在,那將給到用戶傳統頁面無法給到的體驗。
Q:那有什么辦法來解決這些劣勢嗎?
A:在接下來的3中,將提出一種解決方案。
3、提速方案
對于a點,資源量大,可以從打包方式、緩存、CDN分發等角度進行處理;
對于b點,有兩種方式解決:
1、同步+異步數據請求:刷新頁面時,使用同步MVC框架的方式,通過后臺路由帶入初始化數據;頁內路由跳轉時,仍然采用異步的方式進行。
2、異步數據請求提前:刷新頁面時,將數據請求提前至js資源加載前,由于網絡請求可并發多個,將節省單獨的數據請求時間。
tips:如果不是mvvm的異步單頁,推薦使用同步+異步的方式,頁面的展現可以提前至js資源加載之前。[由于mvvm框架下的頁面視圖通過數據進行驅動,該驅動的基本需要依賴js腳本實現,所以必須等待js加載完畢,才能正確展現頁面。因此,在mvvm框架下,同步+異步的方式僅能節省數據請求時間,但其他單頁應用可以節省數據請求時間+js資源加載時間]
ps:js的加載順序:不影響頁面初始化呈現的js底部后置:如日志、分享、im的相關js。
4、初始化性能優化[可用于加速首屏呈現]
如下示例:
其頁面結構與組件結構關系圖如下:
vue初始化的組件編譯原則是,按照深度查找,遇到v-if為false的節點或者葉子節點,停止查找。從示例的組件結構圖,我們可以看出,
初始化中組件查找過程為:
step1:首先查找根節點的子組件nav組件,其為葉子節點,編譯,返回;
step2:查找app的第二個子組件(節點)content,其非葉子節點,且無v-if標記,繼續深度查找;查找其子節點c-a組件,為葉子節點,編譯,返回content;查找另一個子節點c-b組件,葉子節點,編譯,返回;
step3:節點content查找完畢;返回app,查找sidebar節點,sidebar非葉子節點,且無v-if,繼續深度查找;同step2,最終返回app節點。
step4:所有組件編譯完畢,初始化完畢,渲染。
如上示例,將深度遍歷所有子組件,再完成渲染。如果將首屏不需要展現的組件設置成v-if,將降低深度查找的復雜度,從而加速組件初始化,加速頁面的呈現。
加速代碼如下:
? ? ? ? ? ? newVue({? ? data: {? ? ? ? showContent:false,? ? ? ? showSidebar:false},? ? created () {//顯示content? ? ? ? setTimeout(()=>{this.showContent =true;? ? ? ? },0);//顯示sidebar? ? ? ? setTimeout(()=>{this.showSidebar =true;? ? ? ? },0);? ? }});
以上代碼將組件content與sidebar的v-if設置成false,組件的編譯查找過程如下:
step1:不變;
step2:查找content組件,其為v-if=false,停止,并返回根節點;
step3:查找sidebar組件,其為v-if=false,停止,并返回根節點;
step4:所有組件編譯完畢,初始化完畢,渲染。
是不是快了很多~~由此,首先被渲染,出現的是nav組件結構;另外兩個組件通過showContent,showSidebar控制。
為何這里使用setTimeout(fn, 0)控制兩個組件的狀態變化呢?
因為setTimeout是時間異步處理模塊,通過其設置,相應的處理方法將在下一事件循環中才被執行,而VUE的渲染時機為本次主線程執行完畢。如此,使得另外兩個組件的編譯推遲到首次渲染之后,從而實現組件加速。
tips:這里需要注意,不是將組件設置v-if=false就可以了,要看看v-if=true的開啟時機,如果是同一事件循環中被開啟,便沒有意義了。因為vue的數據驅動渲染時機,是同一事件循環中的代碼全部執行完畢之后,拿到數據的最終狀態才進行。同時,setTimeout(fn, 0)也不可亂用。
附加:圖片分批預加載的js腳本
參數說明:
auto: 是否自執行
imgs: 需預加載的圖片列表,為二維表
ignore:在自執行過程中,需要跳過的圖片批次腳標
firstSetReady: 第一組圖片完成加載以后,置為true,便于外部掌握狀態[一般首屏資源為第一組圖片]
finished: 所有圖片資源加載完畢
說明:
非自執行的需求,可直接調用loadOneSetImages方法,返回值為promise
letco =require('co')classPreload{// 定義構造函數的數據結構,創建實例對象時,自動初始化constructor(auto, imgs = [], ignore = []) {this.imgs = imgs;this.ignore = ignore;this.auto = auto;this.firstSetReady =false;this.finished =false;this.init();? ? }// 初始化函數init() {letme =this// 如果自動執行,則調用co模塊,自動加載資源if(this.auto) {// generator的自執行函數,資源加載完畢時,參數finished置為trueco(this.autoExeImageStream.call(this)).then(function(){console.log('資源加載完畢~')? ? ? ? ? ? ? ? me.finished =true}).catch(function(){console.log('資源加載出錯~')? ? ? ? ? ? ? ? me.finished =true})? ? ? ? }? ? }// 同步加載分批圖片資源,使用generator函數,完成當前批次加載,再啟動下一批次的加載* autoExeImageStream() {letrstList = []for(leti =0; i
圖片分批預加載腳本通過ES6 promise結合generator函數實現,使得圖片按照我們想要的方式順序加載,且單批次速度更快。但不能濫用,需要留意圖片資源的加載規模與用戶交互操作之間的關系。由于,ES6 的 promise在事件循環中的消息處理級別高于DOM事件[or 網絡請求等其他異步模塊],當有 promise 消息要處理時,其他事件消息將等待,直到promise處理完畢。因此在使用其進行預加載時,一定要結合業務情況及預加載的需求進行設置。如有需要可以創建多個preload實例,通過一定的條件,觸發圖片預加載,將其進行分散,從而達到性能加速的同時,用戶交互體驗也不受影響。