在前端性能優(yōu)化中，最重要的就是緩存，使用緩存可以極大的提升瀏覽器的響應(yīng)速率。

什么是緩存呢？

當(dāng)我們第一次訪問某個網(wǎng)站時，瀏覽器會把網(wǎng)站中的圖片等資源存儲在電腦中，以備后續(xù)使用，第二次訪問該網(wǎng)站時，瀏覽器直接訪問緩存中的數(shù)據(jù)，從而達(dá)到提高瀏覽器的響應(yīng)效率，優(yōu)化用戶的體驗。

緩存的優(yōu)點

1.提高瀏覽器的響應(yīng)速率；

2.減少服務(wù)器的訪問壓力；

3.減少對網(wǎng)絡(luò)的壓力。

除了瀏覽器緩存之外，還存在CDN緩存、代理服務(wù)器緩存等等；這里主要描述瀏覽器緩存，瀏覽器緩存也指的是HTTP緩存，當(dāng)我們使用瀏覽器用http協(xié)議與服務(wù)器交互時，瀏覽器會使用一種與服務(wù)器約定的規(guī)則進(jìn)行緩存操作。

緩存的類型

瀏覽器的緩存位置一般分為強(qiáng)緩存和協(xié)商緩存。

他們之前的區(qū)別是強(qiáng)緩存不需要向瀏覽器發(fā)送請求，直接從緩存中讀取資源，協(xié)商緩存需要詢問瀏覽器緩存是否過期以確定從哪里讀取資源。

強(qiáng)緩存通過設(shè)置http header來實現(xiàn)：Expires 和 Cache-Control。

Expires用來指定資源到期的具體時間，是服務(wù)器的具體時間點。該屬性是HTTP/1中使用的屬性，受限于本地時間，如果本地時間修改，可能會造成緩存失效。

Cache-Control也用來指定資源的到期時間，他的時間是一個時間范圍。比如：Cache-Control：max-age=300，單位是秒，代表該資源的有效時間是5分鐘。該屬性是HTTP1.1中的屬性，如果Expires和Cache-Control都設(shè)置，則Cache-Control的優(yōu)先級高于Expires。

協(xié)商緩存是在強(qiáng)緩存失效之后，瀏覽器攜帶緩存標(biāo)識向服務(wù)器發(fā)起請求，由服務(wù)器決定是否使用緩存。協(xié)商緩存可以通過兩種HTTP Header來實現(xiàn)：Last-Modified和ETag。

Last-Modified

瀏覽器第一次訪問資源時，服務(wù)器會在response頭中添加時間節(jié)點，這個事件點是服務(wù)器最后一次修改文件的時間點，瀏覽器第二次訪問該資源時，檢測到緩存文件中有l(wèi)ast-Modified，就會在第二次請求頭中添加if-Modified-Since，值為上次Last-Modified的值，服務(wù)器拿到該值后，會與該資源在服務(wù)器端的最后修改時間做對比，如果相同，則說明命中緩存，返回304，如果不相同，則會返回200，并返回新資源。

ETag

和Last-Modified相同，Last-Modified會返回最后修改的時間點，而Etag會返回一個新的token，第二次請求時，token會在If-None-Match中返回給服務(wù)器，服務(wù)器會比較token是否一致。

總結(jié)

瀏覽器緩存的強(qiáng)緩存和協(xié)商緩存如下圖：

最后：在我的V ：atstudy-js，可以免費領(lǐng)取一份10G軟件測試工程師面試寶典文檔資料。以及相對應(yīng)的視頻學(xué)習(xí)教程免費分享！其中包括了有基礎(chǔ)知識、Linux必備、Shell、互聯(lián)網(wǎng)程序原理、Mysql數(shù)據(jù)庫、抓包工具專題、接口測試工具、測試進(jìn)階-Python編程、Web自動化測試、APP自動化測試、接口自動化測試、測試高級持續(xù)集成、測試架構(gòu)開發(fā)測試框架、性能測試、安全測試等。