前端性能優化實踐方案總結

時間 2019-11-13

原文原文鏈接

此篇文章介紹前端性能優化的一些實踐方案。主要是結合結尾幾個案例摘抄總結，找出性能優化過程當中一些通用的方案。css

1. 客戶端將初始化webview和加載內容同步進行，經過客戶端的長連接來加載內容。若是長連接經過夠快，可能webview啓動完成，頁面就能夠顯示出來了。

2. 離線緩存：客戶端緩存html頁面，webview啓動時用緩存的頁面展現給用戶，wns組件同時計算緩存頁面的md5，並放到請求頭的e-tag上，服務器收到請求後，將服務器上須要返回給客戶端的html頁面的md5值與緩存頁面的md5值進行比對，若是一致返回304，若是不一致，則刷新webview，顯示最新數據，並更新緩存內容。只緩存html資源，其它靜態資源依賴瀏覽器緩存。html

3. 增量更新：內容拆分紅靜態內容和動態內容後，對靜態內容進行增量更新，也就是隻更新有變化的部分。將靜態資源打包動態更新至客戶端，客戶端提早下載靜態資源包，用戶訪問先從本地加載資源，減小白屏時間。此種方法只在核心頁面使用，根據資源包的大小，網絡環境判斷是否下載。例如低於 100kb的資源包，3g、4g、WIFI 環境啓動下載，超過 500KB WIFI 環境下才會下載。前端

4. 預加載：經過前置頁面提早預加載相關資源。web

5. 頁面圖片的處理：雪碧圖，CSS3寫的圖，使用base64位引用小的icon圖。支持webp圖片格式。針對不一樣的網絡帶寬下載不一樣的圖片格式，好比wifi下載高清圖，4g普通圖，3g低質量的圖。圖片的懶加載。減小圖片大小和圖片請求。c#

6. 首屏優化：域名收斂（減小dns尋址時間），html文檔壓縮（減小同步返回的數據量），靜態資源合併，模塊異步加載，圖片懶加載等。segmentfault

7. 合適的數據渲染方式：模版的渲染究竟是前端作仍是後端輸出視狀況而定。後端輸出模版適用於數據量不大的狀況，當數據量較大，後端輸出的html體積會增大，此時可採用前端模版來渲染，後端開接口只提供數據，前端組裝頁面模塊並展現。折中的辦法是後端輸出部分的靜態數據，加快頁面展現，前端再去獲取最新數據並對模塊進行更新。目前咱們的活動模板就採用了這種方式。後端

8. 提早緩存大促相關資源：大促預熱期間，使用localstorage緩存大促期間要用的公共靜態資源，減小cdn的壓力。瀏覽器

9. 兜底容災：接口請求錯誤時使用緩存數據補上，若是緩存數據沒有，則隱藏該模塊。緩存

10. 支持http/2性能優化

11. 利用調試工具分析網頁的cpu 和內存佔用，網絡請求，動畫性能等指標。

12. service worker+流的結合：在網站和客戶端之間放置一個service worker，service worker的做用是在獲取缺失信息的同時緩存某些固定不變的數據，加速頁面的渲染。

13. 全部的靜態文件在上線前都內聯到頁面上，從而減小請求數量。這個打包工具會作處理。

14. 本地緩存：將頁面中不變的靜態資源，好比css,html,js文件保存在本地的localstorage裏，甚至把頁面上某個節點的內容保存在localstorage裏，掛個空的鉤子。獲取鉤子去加載本地存儲的具體內容。

15. 合併外鏈請求：將外鏈的資源文件緩存到localstorage裏，每一個文件有對應的版本號，後端返回新的版本號後，與本地存儲的版本號進行對比，將不同的版本號進行合併後發送請求。

16. 模塊的異步加載，不在首屏的先不加載，等到滾動或其餘外部條件觸發時再加載。

17. 分析統計數據：給請求加埋點，統計耗時，錯誤請求等。模塊5秒鐘內沒有渲染完成加埋點等。根據統計結果針對性分析。

18. dns階段能夠作域名收斂。

19. 獲取html文件階段，能夠考慮離線包。