靜態資源的請求和載入速度，直接影響頁面呈現，應該怎麼優化呢？ ...
如果有這樣一個項目，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靜態資源緩存及優化
美團金融掃碼付靜態資源載入優化實踐
瀏覽器緩存知識小結及應用
