WEB前端性能優化基本套路

前言

前端性能優化這是一個老生常談的話題，但是還是有很多人沒有真正的重視起來，或者說還沒有產生這種意識。

當用戶打開頁面，首屏加載速度越慢，流失用戶的概率就越大，在體驗產品的時候性能和交互對用戶的影響是最直接的，推廣拉新是一門藝術，用戶的留存是一門技術，拉進來留住用戶，產品體驗很關鍵，這裏我以美柚的頁面爲例子，用實例展開說明前端優化的基本套路（適合新手上車）。

---

WEB性能優化套路

基礎套路1：減少資源體積

css

• 壓縮

• 響應頭GZIP

js

• 壓縮

• 響應頭GZIP

html

• 輸出壓縮

• 響應頭GZIP

圖片

• 壓縮

• 使用Webp格式

• cookie

  • 注意cookie體積，合理設置過期時間

---

基礎套路2：控制請求數

• js

  • 合併

• css

  • 合併

• 圖片

  • 合併

        base64(常用圖標：如logo等)  

• 接口

  • 數量控制

  • 異步ajax

• 合理使用緩存機制

  • 瀏覽器緩存

• js編碼

  • Require.JS 按需加載

  • 異步加載js

  • lazyload圖片

---

基礎套路3：靜態資源CDN

• 請求走CDN

  • html

  • p_w_picpath

  • js

  • css

---

綜合套路

• 圖片地址獨立域名

  • 與業務不同域名可以減少請求頭裏不必要的cookie傳輸

• 提高渲染速度

  • js放到頁面底部，body標籤底部

  • css放到頁面頂部，head標籤裏

• 代碼

  • 代碼優化：css/js/html

  • 預加載，如：分頁預加載，快滾動到底部的時候以前加載下一頁數據

---

拓展資料

• 移動H5前端性能優化指南

• Web性能優化：圖片優化

• WebP 探尋之路

• 淺談瀏覽器http的緩存機制

• 常見的前端性能優化手段都有哪些？都有多大收益？

• 前端性能優化相關

性能輔助工具

• 智圖-Webp

• 谷歌 PageSpeed Insights(網頁載入速度檢測工具，需要×××)

• 入門Webpack，看這篇就夠了

• 前端構建工具gulpjs的使用介紹及技巧

• Gulp 入門指南