前端頁面優化總結

    頁面優化的細節比較多，所以在這裏總結一下。

1. 減小請求個數

    http1.1中每一個請求的發出是獨立的，每多一個請求耗時就會很長。優化點：

•     使用bundle，將js,css資源進行合併打包
•     小體積圖片使用base64編碼內嵌至HTML或css中，使用css sprite技術合併多張圖片
•    使用HTTP2協議，可最大程度的避免屢次請求形成的等待
•    首屏對ajax請求預加載，減小請求個數

2. 減小傳輸體積

• js css進行minify壓縮，使用tree-shaking技術去除無用代碼。圖片在保證質量的狀況下采用webp或者Png壓縮。
• 利用瀏覽器的gzip，最大程度減小文本類文件的傳輸體積
• 減小cookies體積數，避免每次請求上傳header內容過長
• tls 1.3協議減小Https協議握手認證次數，http2協議對header壓縮，共用相同的header

3. 儘量利用緩存

• 充分利用瀏覽器的緩存，對js和css進行hash處理，緩存時間爲最長，html進行緩存驗證，保證頁面最新且可利用緩存
• 利用indexDb和pwa，對用戶數據進行緩存

4. 縮短關鍵路徑

• 使用CDN技術，將域名解析到離用戶最近的服務器上，減小延遲
• DNS的prefetch  <link rel="dns-prefetch" href="//example.com">  <link rel="preconnect" href="http://example.com">

5. 合理安排資源加載順序

• 利用preload, prefetch等新特性，預測性加載
• 先css，再html，再js，進行加載並執行。
• 利用code split技術將頁面分屢次加載

其餘微優化或業務類優化

     減小dom操做、優化css選擇器（從右往左匹配）、減小dom重繪、列表優化、動畫優化等。