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

網(wǎng)絡(luò)加載類

 

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

 

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

 

(2)減小 HTTP 請求大小

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

(7)減少頁面重定向

 

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

 

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

 

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

 

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

 

如果條件允許，可以利用 CDN 網(wǎng)絡(luò)加快同一個(gè)地理區(qū)域內(nèi)重復(fù)靜態(tài)資源文件的響應(yīng)下載速度，縮短資源請求時(shí)間。

 

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

 

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

 

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