概述

在前端開發(fā)中，性能一直都是被大家所重視的一點(diǎn)。然而判斷一個網(wǎng)站的性能最直觀的就是看網(wǎng)頁打開的速度，許多大型互聯(lián)網(wǎng)公司甚至將頁面響應(yīng)速度作為考核的一個硬性標(biāo)準(zhǔn)。在性能方面，根據(jù)Yahoo的調(diào)查，后臺只占5％，而前端高達(dá)95％之多，其中有88％的東西是可以優(yōu)化的。每一個前端工程師都應(yīng)該思考過前端性能優(yōu)化方面的問題。

WEB性能優(yōu)化是一個工程問題，涵蓋很多方面，優(yōu)化方向可以分為：請求數(shù)量、請求帶寬、緩存利用、頁面結(jié)構(gòu)、代碼校驗(yàn)。

技術(shù)人員都了解通過網(wǎng)絡(luò)提取內(nèi)容既速度緩慢又開銷巨大。 較大的響應(yīng)需要在客戶端與服務(wù)器之間進(jìn)行多次往返通信，這會延遲瀏覽器獲得和處理內(nèi)容的時間，還會增加訪問者的流量費(fèi)用。 因此，緩存并重復(fù)利用之前獲取的資源的能力成為性能優(yōu)化的一個關(guān)鍵方面。也是一種讓網(wǎng)站變快的極佳途徑。

緩存分為服務(wù)端側(cè)（server side，比如Nginx、Apache）和客戶端側(cè)（client side，比如web browser），今天我們主要了解一下瀏覽器緩存。

在瀏覽器中輸入目標(biāo)網(wǎng)址時，瀏覽器會從服務(wù)器下載顯示頁面所需的資源，例如html、圖片、css、js，甚至包括字體文件等。然而這些文件中有許多文件（例如圖片）都是很少變動的，如果每次都要從服務(wù)器重新下載，會延長網(wǎng)頁載入時間，在業(yè)務(wù)量大的時候也會對服務(wù)器造成一定壓力。如大家熟悉的雙11、微博熱搜宕機(jī)事件。

瀏覽器緩存控制機(jī)制有兩種：HTML Meta標(biāo)簽 和HTTP頭信息。

使用HTML Meta 標(biāo)簽：

＜meta http－equiv＝＂Pragma＂ content＝＂no－cache＂＞

這部分代碼是應(yīng)用在HTML文件中的head頭部分。主要作用就是告訴瀏覽器此HTML頁面不被緩存，每次訪問都去服務(wù)器上下載。使用上很簡單，但只有部分瀏覽器可以支持，而且所有緩存代理服務(wù)器都不支持，因?yàn)榇聿唤馕鯤TML內(nèi)容本身。所以常說的瀏覽器緩存還是通過http頭信息來控制緩存。

HTTP頭信息控制緩存

通過瀏覽器開發(fā)者工具我們可以看到，瀏覽器請求服務(wù)器靜態(tài)資源的響應(yīng)狀態(tài)碼主要就是下圖的三種：

頁面的緩存狀態(tài)是由HTTP協(xié)議中關(guān)于緩存的信息頭決定的，主要的控制關(guān)鍵字有4種：Last－Modified，Etag，Cache－Control，Expires．

Cache－Control 和 Expires首部用于指定緩存時間；

Last－Modified和ETag 首部提供驗(yàn)證機(jī)制。

Last－Modified／E－Tag

Last－Modified：標(biāo)示這個響應(yīng)資源的最后修改時間。web服務(wù)器在響應(yīng)請求時，告訴瀏覽器資源的最后修改時間。當(dāng)資源過期時（使用Cache－Control標(biāo)識的max－age），發(fā)現(xiàn)資源具有Last－Modified聲明，則再次向web服務(wù)器請求時帶上頭 If－Modified－Since，表示請求時間。web服務(wù)器收到請求后發(fā)現(xiàn)有頭If－Modified－Since 則與被請求資源的最后修改時間進(jìn)行比對。若最后修改時間較新，說明資源又被改動過，則響應(yīng)整片資源內(nèi)容（寫在響應(yīng)消息包體內(nèi)），HTTP 200；若最后修改時間較舊，說明資源無新修改，則響應(yīng)HTTP 304 （無需包體，節(jié)省瀏覽），告知瀏覽器繼續(xù)使用所保存的cache。

Etag：web服務(wù)器響應(yīng)請求時，告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識。Apache中，ETag的值，默認(rèn)是對文件的索引節(jié)（INode），大?。⊿ize）和最后修改時間（MTime）進(jìn)行Hash后得到的。當(dāng)資源過期時（使用Cache－Control標(biāo)識的max－age），發(fā)現(xiàn)資源具有Etage聲明，則再次向web服務(wù)器請求時帶上頭If－None－Match （Etag的值）。web服務(wù)器收到請求后發(fā)現(xiàn)有頭If－None－Match 則與被請求資源的相應(yīng)校驗(yàn)串進(jìn)行比對，決定返回200或304。

Etag和Last－Modified非常相似，都是通過一個參數(shù)來判斷，從而決定是否啟用緩存。也許大家有疑問那為什么HTTP1．1還有新定義一個Etag，它的出現(xiàn)主要是解決一下Last－Modified無能為力的事情：

1．Last－Modified標(biāo)注的最后修改只能精確到秒，如果某些文件在1秒鐘以內(nèi)，被修改多次的話，Last－Modified也就無法判斷。

2．一些資源的最后修改時間改變了，但是內(nèi)容沒改變，使用ETag就認(rèn)為資源還是沒有修改的。

3．有可能存在服務(wù)器不能準(zhǔn)確獲取資源的最后修改時間，或者與代理服務(wù)器時間不一致等情形，這樣無法通過修改時間判斷資源是否更新

Cache－Control 和 Expires

從性能優(yōu)化的角度來說，最佳請求是無需與服務(wù)器通信的請求：您可以通過響應(yīng)的本地副本消除所有網(wǎng)絡(luò)延遲，以及避免數(shù)據(jù)傳送的流量費(fèi)用。 為實(shí)現(xiàn)此目的，HTTP 規(guī)范允許服務(wù)器返回 Cache－Control 和 Expires指令，這些指令控制瀏覽器和其他中間緩存如何緩存各個響應(yīng)以及緩存多久。在有效期內(nèi)，直接訪問瀏覽器緩存，不會跟服務(wù)器交互。也就是上圖中的200（from disk cache）。

Expires：

Expires標(biāo)示資源緩存失效時間，用來指定資源到期的時間，緩存服務(wù)器在接收到含有首部字段Expires的響應(yīng)后，會以緩存來應(yīng)答請求，在此此字段制定的時間之前，響應(yīng)資源會一直被保存，在響應(yīng)http請求時可以直接從瀏覽器緩存取數(shù)據(jù)，而無需再次請求。這里需要注意的是如果設(shè)置了cache－control的話cache－control的優(yōu)先級更高。

Cache－control：

Cache－Control與Expires的作用一致，都是指明當(dāng)前資源的有效期，控制瀏覽器是否直接從瀏覽器緩存取數(shù)據(jù)還是重新發(fā)請求到服務(wù)器取數(shù)據(jù)。Cache－Control 標(biāo)頭是在HTTP／1．1 規(guī)范中定義的，取代了之前用來定義響應(yīng)緩存策略的標(biāo)頭（例如Expires）。 所有現(xiàn)代瀏覽器都支持Cache－Control，因此，使用它就夠了。

Cache－Control的設(shè)置值可以是no－cache、no－ store、public、private、max－age等：

Cache－Control是關(guān)于瀏覽器緩存的最重要的設(shè)置，因?yàn)樗采w其他設(shè)置，比如Expires 和Last－Modified。另外，由于瀏覽器的行為基本相同，這個屬性是處理跨瀏覽器緩存問題的最有效的方法。

在實(shí)際應(yīng)用中只要可能，就給每種資源都指定一個明確的緩存時間。這樣客戶端就可以直接使用本地副本，而不必每次都請求相同的內(nèi)容。類似地，指定驗(yàn)證機(jī)制可以讓客戶端檢查過期的資源是否有更新。沒有更新，就沒必要重新發(fā)送。

最后，還要注意應(yīng)同時指定緩存時間和驗(yàn)證方法！只指定其中之一是最常見的錯誤，于是要么導(dǎo)致每次都在沒有更新的情況下重發(fā)相同內(nèi)容（這是沒有指定驗(yàn)證），要么導(dǎo)致每次使用資源時都多余地執(zhí)行驗(yàn)證檢查（這是沒有指定緩存時間）。當(dāng)然這不意味著您所有的資源都需要緩存。一些網(wǎng)站的資源90％ 以上都可以緩存，而其他網(wǎng)站可能有許多私密或時效要求高的數(shù)據(jù)根本無法緩存。這個就需要在實(shí)際應(yīng)用中根據(jù)實(shí)際情況去設(shè)定，確定哪些資源可以緩存，并確保其返回正確的Cache－Control 和ETag 標(biāo)頭。

性能優(yōu)化涵蓋太多的方面，以上簡單介紹一下瀏覽器緩存中的一些機(jī)制和概念，瀏覽器是否使用緩存、緩存多久，是由服務(wù)器控制的。以上規(guī)則都需要在對應(yīng)服務(wù)器設(shè)置。如：ngnix，Apache 等，此處就不敘述了。

啟迪云－高級開發(fā)工程師 楊浩巍