PC網站開發中浏覽器前端優化(huà)策略

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

網絡加載類

 

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

 

在前端網站頁面中，通(tōng)常建議(yì)盡可(kě)能合并靜态資源圖片、JavaScript 或 CSS 代碼，減少頁面請求數和(hé)資源請求消耗，這(zhè)樣可(kě)以縮短頁面首次訪問的(de)用(yòng)戶等待時(shí)間。通(tōng)過構建工具合并雪(xuě)碧圖、CSS、JavaScript 文件等都是爲了(le)減少 HTTP 資源請求次數。另外也(yě)要盡量避免重複的(de)資源，防止增加多(duō)餘請求。

 

(2)減小 HTTP 請求大(dà)小

 

除了(le)減少 HTTP 資源請求次數，也(yě)要盡量減小每個(gè) HTTP 請求的(de)大(dà)小。如減少沒必要的(de)圖片、JavaScript、CSS 及 HTML 代碼，對(duì)文件進行壓縮優化(huà)，或者使用(yòng) gzip 壓縮傳輸内容等都可(kě)以用(yòng)來(lái)減小文件大(dà)小，縮短網絡傳輸等待時(shí)延。前面我們使用(yòng)構建工具來(lái)壓縮靜态圖片資源以及移除代碼中的(de)注釋并壓縮，目的(de)都是爲了(le)減小 HTTP 請求的(de)大(dà)小。

 

(3)将 CSS 或 JavaScript 放到外部文件中，避免使用(yòng) style或script或 标簽直接引入

 

在 HTML 文件中引用(yòng)外部資源可(kě)以有效利用(yòng)浏覽器的(de)靜态資源緩存，但有時(shí)候在移動端頁面 CSS 或 JavaScript 比較簡單的(de)情況下(xià)爲了(le)減少請求，也(yě)會将 CSS 或 JavaScript 直接寫到 HTML 裏面，具體要根據 CSS 或 JavaScript 文件的(de)大(dà)小和(hé)業務的(de)場(chǎng)景來(lái)分(fēn)析。如果 CSS 或 JavaScript 文件内容較多(duō)，業務邏輯較複雜(zá)，建議(yì)放到外部文件引入。

 

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

 

當 <link>标簽的(de) href 屬性爲空，或 <script>、 <img>、 <iframe>标簽的(de) src 屬性爲空時(shí)，浏覽器在渲染的(de)過程中仍會将 href 屬性或 src 屬性中的(de)空内容進行加載，直至加載失敗，這(zhè)樣就阻塞了(le)頁面中其他(tā)資源的(de)下(xià)載進程，而且最終加載到的(de)内容是無效的(de)，因此要盡量避免。

 

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

 

爲 HTML 内容設置 Cache-Control 或 Expires 可(kě)以将 HTML 内容緩存起來(lái)，避免頻(pín)繁向服務器端發送請求。前面講到，在頁面 Cache-Control 或 Expires 頭部有效時(shí)，浏覽器将直接從緩存中讀取内容，不向服務器端發送請求。

 

(6)合理(lǐ)設置 Etag 和(hé) Last-Modified

 

合理(lǐ)設置 Etag 和(hé) Last-Modified 使用(yòng)浏覽器緩存，對(duì)于未修改的(de)文件，靜态資源服務器會向浏覽器端返回 304，讓浏覽器從緩存中讀取文件，減少 Web 資源下(xià)載的(de)帶寬消耗并降低服務器負載。

 

(7)減少頁面重定向

 

頁面每次重定向都會延長(cháng)頁面内容返回的(de)等待延時(shí)，一次重定向大(dà)約需要 200 毫秒不等的(de)時(shí)間開銷（無緩存），爲了(le)保證用(yòng)戶盡快(kuài)看到頁面内容，要盡量避免頁面重定向。

 

(8)使用(yòng)靜态資源分(fēn)域存放來(lái)增加下(xià)載并行數

 

浏覽器在同一時(shí)刻向同一個(gè)域名請求文件的(de)并行下(xià)載數是有限的(de)，因此可(kě)以利用(yòng)多(duō)個(gè)域名的(de)主機來(lái)存放不同的(de)靜态資源，增大(dà)頁面加載時(shí)資源的(de)并行下(xià)載數，縮短頁面資源加載的(de)時(shí)間。通(tōng)常根據多(duō)個(gè)域名來(lái)分(fēn)别存儲 JavaScript、CSS 和(hé)圖片文件。

 

(9)使用(yòng)靜态資源 CDN 來(lái)存儲文件

 

如果條件允許，可(kě)以利用(yòng) CDN 網絡加快(kuài)同一個(gè)地理(lǐ)區(qū)域内重複靜态資源文件的(de)響應下(xià)載速度，縮短資源請求時(shí)間。

 

(10)使用(yòng) CDN Combo 下(xià)載傳輸内容

 

CDN Combo 是在 CDN 服務器端将多(duō)個(gè)文件請求打包成一個(gè)文件的(de)形式來(lái)返回的(de)技術，這(zhè)樣可(kě)以實現 HTTP 連接傳輸的(de)一次性複用(yòng)，減少浏覽器的(de) HTTP 請求數，加快(kuài)資源下(xià)載速度。例如同一個(gè)域名 CDN 服務器上的(de) a.js，b.js，c.js 就可(kě)以按如下(xià)方式在一個(gè)請求中下(xià)載。

 

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