前端首屏優化

隨着開發經驗的增加、經歷的項目愈來愈多，在處理前端項目的時候愈來愈重視前端性能優化。
複製代碼

前言

我最近在寫一個金融類app的時候接到一個優化問題：首屏加載的有點慢。這個app是使用h5嵌入一個原生殼子的方式開發的，因此使用的效果確定是沒有原生的體驗好，可是首屏優化確實是一個h5項目必需要去處理的任務，因此關於首屏前端優化我進行了總結。前端

首屏性能衡量的指標

FPS：最能反映頁面性能的指標FPS(frame per second)，通常系統設置屏幕的刷新率爲60fps。小於24就會出現明顯的卡頓
DOMContentLoaded：DOM加載並解析完成會觸發DOMContentLoaded事件，若是源碼輸出的內容太多，客戶端解析DOM的時間也會變長，例如增長2000個嵌套層疊可能會相應增長50-200ms，儘可能保證首屏輸出便可，後續的內容只保留鉤子，利用js渲染。
流暢度：FPS 值越高，視覺呈現越流暢，在等待的過程當中能夠加入一些視覺緩衝。
首屏加載時間：經過window.performance.timing來計算出來。

1. DNS解析耗時: domainLookupEnd - domainLookupStart
2. TCP鏈接耗時: connectEnd - connectStart
3. SSL安全鏈接耗時: connectEnd - secureConnectionStart
4. 網絡請求耗時(TTFB): responseStart - requestStart
5. 數據傳輸耗時: responseEnd - responseStart
6. DOM解析耗時: domInteractive - responseEnd
7. 資源加載耗時: loadEventStart - domContentLoadedEventEnd
8. 首包時間: responseStart - domainLookupStart
9. 首次渲染時間 / 白屏時間: responseEnd - fetchStart
10. 首次可交互時間: domInteractive - fetchStart
11. DOM Ready時間: domContentLoadEventEnd - fetchStart
12. 頁面徹底加載時間: loadEventStart - fetchStart
複製代碼

優化的思考角度

1. 首屏必定要快
2. 滾屏必定要流暢
3. 能不加載的先別加載
4. 能不執行的先別執行
5. 漸進展示、圓滑展示
複製代碼

爲何首屏會加載緩慢？

我先列一下目前我碰見影響加載的點：
1. 靜態資源的加載未處理，資源加載過多
2. 調用的接口太多，接口的時間過久（此處前端也沒有辦法...）
3. 前端組件根據後端返回按需加載
複製代碼

如何進行優化

首屏優化根據上述緣由可列舉如下方法webpack

懶加載

優先加載主要模塊，讓用戶第一眼能看到最重要的信息。
複製代碼

懶執行

一些須要點擊或者hover纔會觸發的模塊，就等觸發的時候再加載。
複製代碼

圖片尺寸的控制和懶加載

儘可能使用webp格式的照片，由於一樣的視覺效果，其體積爲其餘的1/3大小。
使用雪碧圖來處理首屏上全部的小icon，走cdn緩存等。
複製代碼

webpack

待續...
複製代碼

輔助優化的工具

chrome中的調試工具測試頁面性能，詳細的使用功能能夠自行閱讀文檔。web