概述

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

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

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

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

在瀏覽器中輸入目標(biāo)網(wǎng)址時(shí)，瀏覽器會(huì)從服務(wù)器下載顯示頁(yè)面所需的資源，例如html、圖片、css、js，甚至包括字體文件等。然而這些文件中有許多文件（例如圖片）都是很少變動(dòng)的，如果每次都要從服務(wù)器重新下載，會(huì)延長(zhǎng)網(wǎng)頁(yè)載入時(shí)間，在業(yè)務(wù)量大的時(shí)候也會(huì)對(duì)服務(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頁(yè)面不被緩存，每次訪問(wèn)都去服務(wù)器上下載。使用上很簡(jiǎn)單，但只有部分瀏覽器可以支持，而且所有緩存代理服務(wù)器都不支持，因?yàn)榇聿唤馕鯤TML內(nèi)容本身。所以常說(shuō)的瀏覽器緩存還是通過(guò)http頭信息來(lái)控制緩存。

HTTP頭信息控制緩存

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

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

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

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

Last－Modified／E－Tag

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

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

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

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

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

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

Cache－Control 和 Expires

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

Expires：

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

Cache－control：

Cache－Control與Expires的作用一致，都是指明當(dāng)前資源的有效期，控制瀏覽器是否直接從瀏覽器緩存取數(shù)據(jù)還是重新發(fā)請(qǐng)求到服務(wù)器取數(shù)據(jù)。Cache－Control 標(biāo)頭是在HTTP／1．1 規(guī)范中定義的，取代了之前用來(lái)定義響應(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。另外，由于瀏覽器的行為基本相同，這個(gè)屬性是處理跨瀏覽器緩存問(wèn)題的最有效的方法。

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

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

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

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