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

網絡加載類

 

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

 

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

 

(2)減小 HTTP 請求大小

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

(7)減少頁面重定向

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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