###背景
源至首圖不能是懶加載以及不再走首屏數據的思考。
一:首屏優化:
###怎麼獲取首屏時間呢?
A:加載完靜態資源後通過ajax請求去後臺獲取數據,數據回來後渲染內容
在每個點打上一個時間戳,首屏時間 = 點8–點1;
B:使用後臺直出,返回的html已經帶上內容了
此時首屏時間 =點4 – 點1。
如何優化A中各個節點的加載時間?
問題1:首先js部分在首屏數據加載出來的總時間並不等於 js文件的加載和執行時間。
因爲CSS文件的加載執行帶來了干擾。加載是並行的,執行是串行的“的結果。html開始加載的時候,瀏覽器會將頁面外聯的css文件和js文件並行加載,如果一個文件還沒回來,它後面的代碼是不會執行的。
問題2:
html裏面外聯的js文件,前一個文件的加載會阻塞下一個文件的執行;而如果a.js負責渲染會發現它後面的js文件再怎麼阻塞也不會影響到它的處理
因爲瀏覽器的執行是串行的。這說明,我們負責渲染內容的js代碼要等到它前面所有的js文件加載執行完纔會執行。而只有將負責頁面渲染的js放在前面,後面js文件的阻塞並不會影響頁面渲染。
所以負責頁面渲染的js應該放在其他js的前面。
二:頁面優化:
·減少HTTP請求
因爲手機瀏覽器同時響應請求爲4個請求(Android支持4個,iOS 5後可支持6個),所以要儘量減少頁面的請求數,首次加載同時請求數不能超過4個
a) 合併CSS、JavaScript
b) 合併小圖片,使用雪碧圖
·緩存
使用緩存可以減少向服務器的請求數,節省加載時間,所以所有靜態資源都要在服務器端設置緩存,並且儘量使用長Cache(長Cache資源的更新可使用時間戳)
a) 緩存一切可緩存的資源
b)使用外聯式引用CSS、JavaScript
·無阻塞
寫在HTML頭部的JavaScript(無異步),和寫在HTML標籤中的Style會阻塞頁面的渲染,因此CSS放在頁面頭部並使用Link方式引入,避免在HTML標籤中寫Style,JavaScript放在頁面尾部或使用異步方式加載
·按需加載
將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載,可以大大提升重要資源的顯示速度和降低總體流量
PS:按需加載會導致大量重繪,影響渲染性能
a) LazyLoad
b) 滾屏加載
·使用首屏加載
首屏加載比異步ajax請求速度要快,體驗更好
三:資源優化:
參考下圖將各個文件資源進行優化:
參考鏈接:http://taobaofed.org/blog/2016/01/20/mobile-wpo-pageshow-async/
http://web.jobbole.com/84829/