PC網站開發中，前端優化的策略很多，主要包括網絡加載類、頁面渲染類、CSS 優化類、JavaScript 執行類、緩存類、圖片類、架構協議類等幾類，今天我們先介紹一下網絡加載類的優化策略。

網絡加載類

 

(1)減少 HTTP 資源請求次數

 

在前端網站頁面中，通常建議盡可能合并靜態資源圖片、JavaScript 或 CSS 代碼，減少頁面請求數和資源請求消耗，這樣可以縮短頁面首次訪問的用戶等待時間。通過構建工具合并雪碧圖、CSS、JavaScript 文件等都是為了減少 HTTP 資源請求次數。另外也要盡量避免重復的資源，防止增加多余請求。

 

(2)減小 HTTP 請求大小

 

除了減少 HTTP 資源請求次數，也要盡量減小每個 HTTP 請求的大小。如減少沒必要的圖片、JavaScript、CSS 及 HTML 代碼，對文件進行壓縮優化，或者使用 gzip 壓縮傳輸內容等都可以用來減小文件大小，縮短網絡傳輸等待時延。前面我們使用構建工具來壓縮靜態圖片資源以及移除代碼中的注釋并壓縮，目的都是為了減小 HTTP 請求的大小。

 

(3)將 CSS 或 JavaScript 放到外部文件中，避免使用 style或script或 標簽直接引入

 

在 HTML 文件中引用外部資源可以有效利用瀏覽器的靜態資源緩存，但有時候在移動端頁面 CSS 或 JavaScript 比較簡單的情況下為了減少請求，也會將 CSS 或 JavaScript 直接寫到 HTML 里面，具體要根據 CSS 或 JavaScript 文件的大小和業務的場景來分析。如果 CSS 或 JavaScript 文件內容較多，業務邏輯較復雜，建議放到外部文件引入。

 

(4)避免頁面中空的 href 和 src

 

當 <link>標簽的 href 屬性為空，或 <script>、 <img>、 <iframe>標簽的 src 屬性為空時，瀏覽器在渲染的過程中仍會將 href 屬性或 src 屬性中的空內容進行加載，直至加載失敗，這樣就阻塞了頁面中其他資源的下載進程，而且最終加載到的內容是無效的，因此要盡量避免。

 

(5)為 HTML 指定 Cache-Control 或 Expires

 

為 HTML 內容設置 Cache-Control 或 Expires 可以將 HTML 內容緩存起來，避免頻繁向服務器端發送請求。前面講到，在頁面 Cache-Control 或 Expires 頭部有效時，瀏覽器將直接從緩存中讀取內容，不向服務器端發送請求。

 

(6)合理設置 Etag 和 Last-Modified

 

合理設置 Etag 和 Last-Modified 使用瀏覽器緩存，對于未修改的文件，靜態資源服務器會向瀏覽器端返回 304，讓瀏覽器從緩存中讀取文件，減少 Web 資源下載的帶寬消耗并降低服務器負載。

 

(7)減少頁面重定向

 

頁面每次重定向都會延長頁面內容返回的等待延時，一次重定向大約需要 200 毫秒不等的時間開銷（無緩存），為了保證用戶盡快看到頁面內容，要盡量避免頁面重定向。

 

(8)使用靜態資源分域存放來增加下載并行數

 

瀏覽器在同一時刻向同一個域名請求文件的并行下載數是有限的，因此可以利用多個域名的主機來存放不同的靜態資源，增大頁面加載時資源的并行下載數，縮短頁面資源加載的時間。通常根據多個域名來分別存儲 JavaScript、CSS 和圖片文件。

 

(9)使用靜態資源 CDN 來存儲文件

 

如果條件允許，可以利用 CDN 網絡加快同一個地理區域內重復靜態資源文件的響應下載速度，縮短資源請求時間。

 

(10)使用 CDN Combo 下載傳輸內容

 

CDN Combo 是在 CDN 服務器端將多個文件請求打包成一個文件的形式來返回的技術，這樣可以實現 HTTP 連接傳輸的一次性復用，減少瀏覽器的 HTTP 請求數，加快資源下載速度。例如同一個域名 CDN 服務器上的 a.js，b.js，c.js 就可以按如下方式在一個請求中下載。

 

以上就是今天主要介紹的網絡加載類的優化策略。