大話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 入門指南

---

看完上面的套路介紹

• 可能有人會說：我在前端界混了這麼多年，這些我都知道，只不過我不想去作

  • 我答： 知道作不到，等於不知道

• 也可能有人會說：壓縮合並等這些操做好繁瑣，由於懶，因此不作

  • 我答： 如今前端構建工具都很強大，如:grunt、gulp、webpack，支持各類插件操做，還不知道就說明你OUT了

---

由於我主要負責後端相關工做，前端並非我擅長的，可是平時也喜歡關注前端前沿技術，這裏以個人視角和開發經驗梳理出基本套路。

套路點到爲止，具體實施能夠經過拓展資料進行深刻了解，若有疑義或者補充請留言懟。

---

有任何想說的歡迎到原文來留言哦
轉載請申明原文地址，謝謝合做

---

感謝你的支持，我會繼續努力！~