前端HTTP優(yōu)化

NikoManiac 發(fā)布于2019-08-23 11:35 / 3436人閱讀

摘要：如果服務(wù)器端的資源沒(méi)有變化，則自動(dòng)返回狀態(tài)碼，內(nèi)容為空，這樣就節(jié)省了傳輸數(shù)據(jù)量。從而保證不向客戶(hù)端重復(fù)發(fā)出資源，也保證當(dāng)服務(wù)器有變化時(shí)，客戶(hù)端能夠得到最新的資源。標(biāo)準(zhǔn)，表明過(guò)期時(shí)間，注意此處的時(shí)間都是指的是服務(wù)器的時(shí)間。

前端部署時(shí)，需將 html/css/js/img 等靜態(tài)資源發(fā)布至服務(wù)器/CDNs，常規(guī)優(yōu)化點(diǎn)如下：
基于 express server 的例子

1 合并、壓縮、混淆

文件合并，減少 http 請(qǐng)求次數(shù)
壓縮、混淆，減少靜態(tài)資源大小

實(shí)現(xiàn)上，可使用 webpack 配合系列插件，打包過(guò)程中可壓縮源代碼（去空格、換行、注釋?zhuān)琂S混淆代碼等等），webpack 配置復(fù)雜，不過(guò)多贅述

2 http gzip 壓縮

減少 http 傳輸過(guò)程中文件大小

2.1 壓縮前后對(duì)比

2.2 HTTP 請(qǐng)求頭 Accept-Encoding

HTTP 請(qǐng)求頭 Accept-Encoding 會(huì)將客戶(hù)端能夠理解的內(nèi)容編碼方式——通常是某種壓縮算法——進(jìn)行通知。通過(guò)內(nèi)容協(xié)商的方式，服務(wù)端會(huì)選擇一個(gè)客戶(hù)端提議的方式，使用并在響應(yīng)報(bào)文首部 Content-Encoding 中通知客戶(hù)端該選擇。

2.3 HTTP 響應(yīng)頭 Content-Encoding

Content-Encoding 是一個(gè)實(shí)體消息首部，用于對(duì)特定媒體類(lèi)型的數(shù)據(jù)進(jìn)行壓縮。當(dāng)這個(gè)首部出現(xiàn)的時(shí)候，它的值表示消息主體進(jìn)行了何種方式的內(nèi)容編碼轉(zhuǎn)換。這個(gè)消息首部用來(lái)告知客戶(hù)端應(yīng)該怎樣解碼才能獲取在 Content-Type 中標(biāo)示的媒體類(lèi)型內(nèi)容。

3 Not Modified 304

減少傳輸內(nèi)容提升性能。
客戶(hù)端有緩沖的文檔并發(fā)出了一個(gè)條件性的請(qǐng)求。服務(wù)器告訴客戶(hù)端，原來(lái)緩沖的文檔還可以繼續(xù)使用，涉及以下兩種 HTTP Header。

3.1 Last-modified / If-Modified-Since

1）瀏覽器第一次請(qǐng)求某個(gè)URL時(shí)，服務(wù)器端的返回狀態(tài)會(huì)是200，內(nèi)容是你請(qǐng)求的資源，同時(shí)有一個(gè)Last-Modified的屬性標(biāo)記此文件在服務(wù)期端最后被修改的時(shí)間

2）客戶(hù)端第二次請(qǐng)求此URL時(shí)，HTTP 協(xié)議的規(guī)定，瀏覽器會(huì)向服務(wù)器傳送 If-Modified-Since 報(bào)頭，詢(xún)問(wèn)該時(shí)間之后文件是否有被修改過(guò)。

3）如果服務(wù)器端的資源沒(méi)有變化，則自動(dòng)返回 HTTP 304 Not Modified 狀態(tài)碼，內(nèi)容為空，這樣就節(jié)省了傳輸數(shù)據(jù)量。當(dāng)服務(wù)器端代碼發(fā)生改變或者重啟服務(wù)器時(shí)，則重新發(fā)出資源，返回和第一次請(qǐng)求時(shí)類(lèi)似。從而保證不向客戶(hù)端重復(fù)發(fā)出資源，也保證當(dāng)服務(wù)器有變化時(shí)，客戶(hù)端能夠得到最新的資源。

3.2 Etag / If-None-Match

Etag 類(lèi)似于 hash 值，用來(lái)判斷請(qǐng)求的文件是否被修改，其 http 緩存步驟與 Last-Modified 相同。

HTTP 協(xié)議規(guī)格說(shuō)明定義ETag為“被請(qǐng)求變量的實(shí)體值”。另一種說(shuō)法是，ETag是一個(gè)可以與Web資源關(guān)聯(lián)的記號(hào)（token）。

3.3 Etag 主要為了解決 Last-Modified 無(wú)法解決的一些問(wèn)題

1）一些文件也許會(huì)周期性的更改，但內(nèi)容并未改變（僅僅改變的修改時(shí)間），這個(gè)時(shí)候我們并不希望客戶(hù)端認(rèn)為這個(gè)文件被修改了，而重新 GET
2）某些文件修改非常頻繁，比如在秒以下的時(shí)間內(nèi)進(jìn)行修改（比方說(shuō)1s內(nèi)修改了N次），If-Modified-Since能檢查到的粒度是s級(jí)的，這種修改無(wú)法判斷(或者說(shuō)UNIX記錄MTIME只能精確到秒)
3）某些服務(wù)器不能精確的得到文件的最后修改時(shí)間

4 瀏覽器緩存

Last-Modified 和 Etag 標(biāo)識(shí)資源變化情況，服務(wù)器返回 304 Not Modified 降低網(wǎng)絡(luò)傳輸大小，提升性能。但是對(duì)于如圖片、react/vue這類(lèi)庫(kù)資源、通用css這些不經(jīng)常變化的靜態(tài)資源，應(yīng)利用瀏覽器緩存功能，連304這次請(qǐng)求都優(yōu)化掉。

4.1 Pragma

HTTP1.0 標(biāo)準(zhǔn)，表明禁用緩存，由于 Pragma 在 HTTP 響應(yīng)中的行為沒(méi)有確切規(guī)范，所以不能可靠替代 HTTP/1.1 中通用首部 Cache-Control?？戳讼买v訊視頻、京東商城等頁(yè)面，用在html的請(qǐng)求頭中。

4.2 Expires

HTTP1.0 標(biāo)準(zhǔn)，表明過(guò)期時(shí)間，注意此處的時(shí)間都是指的是服務(wù)器的時(shí)間。（無(wú)效的日期，比如 0, 代表著過(guò)去的日期，即該資源已經(jīng)過(guò)期）

**存在問(wèn)題**：客戶(hù)端與服務(wù)器時(shí)間不一致，可能導(dǎo)致緩存失效。

4.3 Cache-Control

HTTP 1.1 標(biāo)準(zhǔn)，是 expires 的補(bǔ)充，使用的是相對(duì)時(shí)間的概念。
Cache-Control 屬性如下：

1）max-age: 設(shè)置緩存的最大的有效時(shí)間，單位為秒（s）。max-age會(huì)覆蓋掉Expires
2）s-maxage: 只用于共享緩存，比如CDN緩存（s -> share）。與 max-age 的區(qū)別是：max-age 用于普通緩存，而 s-maxage 用于代理緩存。如果存在 s-maxage，則會(huì)覆蓋 max-age 和 Expires
3）public：響應(yīng)會(huì)被緩存，并且在多用戶(hù)間共享。默認(rèn)是public。
3）private: 響應(yīng)只作為私有的緩存，不能在用戶(hù)間共享。如果要求HTTP認(rèn)證，響應(yīng)會(huì)自動(dòng)設(shè)置為private。
4）no-cache: 指定不緩存響應(yīng)，表明資源不進(jìn)行緩存。但是設(shè)置了no-cache之后并不代表瀏覽器不緩存，而是在緩存前要向服務(wù)器確認(rèn)資源是否被更改。因此有的時(shí)候只設(shè)置no-cache防止緩存還是不夠保險(xiǎn)，還可以加上private指令，將過(guò)期時(shí)間設(shè)為過(guò)去的時(shí)間。
5）no-store: 絕對(duì)禁止緩存。
6）must-revalidate: 如果頁(yè)面過(guò)期，則去服務(wù)器進(jìn)行獲取。

更多屬性請(qǐng)參考 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control

使用瀏覽器緩存后，chrome 中網(wǎng)絡(luò)請(qǐng)求如下：
1）from memery cache 從內(nèi)存中讀取
2）from disk cache 從瀏覽器緩存中讀取

Chorme官網(wǎng)描述

5 HTTP2

這篇文字介紹的很全面
協(xié)議遞進(jìn)順序 HTTP1.0 -> HTTP1.1 -> spdy（谷歌） -> HTTP2

1）多路復(fù)用 + 二進(jìn)制分幀：使用 HTTP1.1，瀏覽器在同一時(shí)間，針對(duì)同一域名下的請(qǐng)求有一定的數(shù)量限制，超過(guò)限制數(shù)目的請(qǐng)求會(huì)被阻塞（不同瀏覽器不同），HTTP2 引入二進(jìn)制數(shù)據(jù)幀和流的概念，而非 HTTP1.1 的文本形式，實(shí)現(xiàn)在同一 TCP 連接下的多并發(fā)請(qǐng)求（當(dāng)然 HTTP1.1 優(yōu)化的 keep-alive 也不需要了）
  2）頭部壓縮：HTTP1.1 Header 中有許多無(wú)意義的重復(fù)的頭部，HTTP2 使用 HPACK 算法進(jìn)行頭部壓縮
  3）服務(wù)端推送：例如，在瀏覽器請(qǐng)求 html 時(shí)，服務(wù)端預(yù)測(cè)性的將 js、css 等文件推送回來(lái)，但在實(shí)際應(yīng)用中有許多問(wèn)題需要解決