優化網站加載速度方式分類
- 減少http請求
- 提升http加載速度
- 使用CDN 內容分發網絡
- TCP/IP 、HTTP優化提升http速度
- 減小網站加載資源的大小
- 使用緩存
- 代碼優化
- style 放置到頭部
- script 放置到body底部
- 減少使用內連style標簽、script標簽
- 用戶體驗優化
減少http請求
減少http請求是優化提高網站加載速度最核心指導方針，因為網絡的不確定性導致網址加載速度不可控，每添加一個http請求，就增加一個不確定性，特別是核心的http請求，任意一個http請求都可能導致整個網站的奔潰。加上如今用戶設備的升級、性能的提升，代碼優化并不是最需要考慮，代碼執行速度往往不是最影響網站加載一部分。
網站加載速度優化，考慮資源最小加載規則，非必要資源不加載或者延遲加載，減少http請求。然后再對這些最小必要的資源進行優化減小文件體積或者提高加載速度。 能少發就少發請求，去掉不必要的資源，任何請求都不如沒有請求快。
減少http方式有如下幾種方式：
- icon圖片使用雪碧圖，或者使用字體圖標
- webpack代碼合并
- 小圖片轉base64嵌入到html文件中。
注意：base64編碼會導致文件增大33%，并會不緩存，img src圖片是會緩存的，當文件需要重復使用時，建議使用src加載，而不是base64減少http請求
- 異步加載，非必要資源不要一次性加載
- 可以考慮把“穩定的核心”，比如框架和庫，轉移到獨立的包中，利用緩存(可達到連請求都不發送的理想狀態)。
- 接口合并，能合并的接口請求后端改邏輯合并請求，堅決拒絕前端循環發送http請求加載數據。
- 項目啟動服務端渲染，vue項目服務端渲染，加快首屏渲染速度。理想狀態，一個http請求就能加載渲染整個網站
提升http加載速度
提升http速度核心在與網絡優化，TCP/IP 優化提升網站加載速度，這就需要對http協議，TCP/IP協議有一定的了解。措施如下：使用CDN 內容分發網絡、TCP/IP 、HTTP優化提升http速度。
使用CDN 內容分發網絡
- 靜態資源使用CDN
- 可選擇使用阿里云OSS服務，節省帶寬
- 不要使用不穩定的CDN，例如直接從第三方庫官網復制CDN連接，往往不穩定，不可控，推薦oss
TCP/IP 、HTTP優化提升http速度
- 重用TCP連接 http1.0 升級到 http1.1 或 http1.0 也可配置connection:keep-alive 啟動持久連接
- request和response中同時加上connection：keep-alive請求頭。瀏覽器會自動加上該請求頭。
- 避免HTTP重定向，HTTP 重定向極其耗時，特別是把客戶端定向到一個完全不同的域名的情況下，還會導致額外的 DNS 查詢、TCP 連接延遲，等等
- 項目升級到 HTTP 2.0 以提升性能
- 利用HTTP管道, http請求并行發送
- 減少http中cookie的大小，非必要不傳輸cookie
- 不要CORS跨域，使用CORS跨域會導致多一次options請求， script src等靜態資源不影響，但是接口跨域會導致多一個options請求，如果無法避免跨域，可選擇配置中加長CORS的保持時間。
- 合理選擇XHR、SSE（EventSource）、WebSockets、WebRTC。
- 采用域名分區，如果一次需要加載很多資源，而瀏覽器http請求有并發上線，以前是可以并發6個。這種情況可以采用多個域名來繞過并發上線限制。
- 提升帶寬大小，但帶寬大小并不少越大越快，只有當訪問量達到一定數量時，才需要盡可能提升帶寬。一般個人網站1M、2M帶寬就夠用了。據統計5M帶寬能滿足大部分網站需求。大于5M后，帶寬的利用率并不理想。并且帶寬的費用還高。
減小網站加載資源的大小
減小http請求資源的大小的核心在于對文件進行壓縮，或者在可達到相同的效果中選擇合適的資源（例如：圖片中不需要透明度時，選擇使用jpg或jpeg）
- 使用Gzip壓縮，所有文本資源都應該使用 Gzip 壓縮，然后再在客戶端與服務器間傳輸。一般來說，Gzip 可以減少 60%~80% 的文件大小，也是一個相對簡單（只要在服務器上配置一個選項），但優化效果較好的舉措。一般在服務器中配置壓縮，例如nginx啟動壓縮。
- 使用webpack 壓縮插件壓縮代碼，壓縮過程中去除不必要代碼，例如：console日志，注釋代碼等
- 圖片壓縮，不要傳輸大圖片。圖片進行壓縮，使用webp圖片等，在可達到相同效果時盡可能使用壓縮率大的突破類型。選擇正確的圖片格式，不需要透明度的圖片不要使用png。
- 壓縮好處節省帶寬
使用緩存
- 瀏覽器緩存Cache-Control 首部用于指定緩存時間, max-age
- Cache-Control: max-age=1000; 不同于Expires，max-age 控制的是時間有效區間，例如配置有效期為一天或者一個月；注意http1.0不支持Cache-Control；當同時指定max-age和Expires 時，max-age優先級高，并重寫Expires。
- Last-Modified 、 ETag 、Expires 首部提供驗證機制
-
Last-Modified, 如果沒有改變，http會響應狀態嗎304 NotModified ，response body 響應體不回返回 -
Expires： response header 中Expires明確指出瀏覽器緩存該資源，同時指定過期時間。加載的資源未過期，則瀏覽器不會進行http請求，直接使用緩存中的資源。需要注意客戶端和服務端時間同步問題,每次調整都需要在服務端配置。
-
- nginx緩存
- 后端服務緩存
- H5緩存，localStorage,sessionStorage
- 前端數據庫緩存 indexDB
- 最大限度利用瀏覽器緩存，不經常變動的資源（例如js庫）合并到一個文件中
代碼層面優化
- 優先加載css資源鏈接，link style 標簽放到頂部
- css 文件中不使用@import，@import會延遲css文件延遲加載導致白屏。如果有webpack配置則不影響
- 把首次繪制所需的 CSS 單獨拿出來，優先于其他 CSS 文件發送；
- script標簽放置到頁面底部，按需加載
- 非關鍵性 JavaScript 應該推遲，以避免阻塞 DOM 和 CSSOM 構建；
- 不經常變動的資源（例如js庫）合并到一個文件中，利于瀏覽器緩存
- Doctype 文檔聲明使用標準模式，
<!DOCTYPE html> - js加載過程禁用document.write，阻塞頁面加載
- 公共組件提取
- 公共方法提取
- 代碼審核
- 打包優化
- happyPack 工具，多線程提升打包速度
- 生產環境取消 source-map 打包，提升打包速度、源碼安全
- 合理的 exclude 和 include 配置
- 處理緩存，小需求的變動，不影響其他文件打包和內容，提升網站加載速度
- 項目文檔整理（需求文檔，組件文檔，公共方法文檔，交接文檔，技術文檔）
用戶體驗優化
- 執行推測性優化，嘗試預測用戶的下一次操作
- 加載動畫，優化交互
