前端靜態資源請求和加載優化總結

若是有這樣一個項目，js腳本數量100+，其中50個是各類框架或庫，css數量20+，圖片若干 。那麼，不用說，這個頁面加載起來，必定快不了。

靜態資源的請求和加載速度，直接影響頁面呈現，應該怎麼優化呢？

不請求 -  用cache

最好的方式就是儘可能引用公共資源，同時設置緩存，不去從新請求資源
也能夠運用PWA的離線緩存技術，能夠幫助wep實現離線使用
從策略上說，若是業務類型容許的話，能夠作某些降級。好比，弱網優先使用緩存文件。網絡情況分爲 WiFi、4G、3G、2G、unknown ，其中 2G和unknown 被咱們認爲是弱網。先保證體驗，再保證更新
避免資源屬性爲空或者錯誤。當 、標籤的 href 無效，或
合併和拆分資源

打包有不少方式，好比使用工具webpack、rollup，能夠實現打包js，打包小圖片至js（內嵌base64），生成雪碧圖，甚至把項目打包爲單個html文件
拆分則是把開發時使用的庫，單獨剝離出來，以公共資源的方式引入
還有就是要把過大的包，拆分紅多個較少的包，防止單個資源耗時過大
壓縮資源

前端打包時壓縮
服務器上的zip壓縮
圖片壓縮（好比tiny），使用webp等高壓縮比格式
儘可能保證頁面的 HTML 內容在 1KB 之內，這樣整個 HTML 的內容請求就能夠在一個 RTT 內請求完成，最大限度地提升 HTML 載入速度。一般狀況下，TCP 網絡傳輸的最大傳輸單元（Maximum Transmission Unit，MTU）爲 1500B
靜態資源分域存放

從不一樣域名請求資源。由於大多數瀏覽器的併發數量都控制在6之內，同一時間針對同一域名下的請求有必定數量限制，超過限制數目的請求會被阻塞。若是資源來自於多個域下，能夠增大並行請求和下載速度。以下是jd img資源的域名
延遲、異步、預加載、懶加載

對於非首屏的資源，可使用 defer 或 async 的方式引入
也能夠按需加載，在邏輯中，只有執行到時才作請求
對於多屏頁面，滾動時才動態載入圖片
對於移動端首屏加載後可能會被使用的資源，須要在首屏完成加載後儘快進行加載
參考資料

【FE】這麼多前端優化點你都記得住嗎？

Web靜態資源緩存及優化

美團金融掃碼付靜態資源加載優化實踐

瀏覽器緩存知識小結及應用