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

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

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

不請求 - 用cache

• 最好的方式就是儘可能引用公共資源，同時設置緩存，不去從新請求資源
• 也能夠運用PWA的離線緩存技術，能夠幫助wep實現離線使用
• 從策略上說，若是業務類型容許的話，能夠作某些降級。好比，弱網優先使用緩存文件。網絡情況分爲 WiFi、4G、3G、2G、unknown ，其中 2G和unknown 被咱們認爲是弱網。先保證體驗，再保證更新
• 避免資源屬性爲空或者錯誤。當<link>、<a>標籤的 href 無效，或<script>、<img>、<iframe>標籤的 src 屬性爲無效，瀏覽器在渲染的過程當中仍會進行請求和加載，這種錯誤只會浪費性能
• 不要作頁面重定向。頁面每次重定向都會延長頁面內容返回的等待延時，一次重定向大約須要200毫秒不等的時間開銷
• 若是沒有必要，請求就不要帶cookie（減小約1kb）
• 設置文件資源的 DNS 預解析，讓瀏覽器提早解析獲取靜態資源的主機 IP，避免等到請求時才發起 DNS 解析請求，好比

<!--cdn域名預解析--> <meta http-equiv="x-dns-prefetch-control" content="on" > <link rel="dns-prefetch" href="//cdn.domain.com" >複製代碼

合併請求 - combo

• CDN的combo技術能把多個資源文件合併引用，減小請求次數

<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>複製代碼

合併和拆分資源

• 打包有不少方式，好比使用工具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靜態資源緩存及優化

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

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