在前端性能優化中，最重要的就是緩存，使用緩存可以極大的提升浏覽器的響應速率。

什麼是緩存呢？

當我們第一次訪問某個網站時，浏覽器會把網站中的圖片等資源存儲在電腦中，以備後續使用，第二次訪問該網站時，浏覽器直接訪問緩存中的數據，從而達到提高浏覽器的響應效率，優化用戶的體驗。

緩存的優點

1.提高浏覽器的響應速率；

2.減少服務器的訪問壓力；

3.減少對網絡的壓力。

除了浏覽器緩存之外，還存在CDN緩存、代理服務器緩存等等；這裡主要描述浏覽器緩存，浏覽器緩存也指的是HTTP緩存，當我們使用浏覽器用http協議與服務器交互時，浏覽器會使用一種與服務器約定的規則進行緩存操作。

緩存的類型

浏覽器的緩存位置一般分為強緩存和協商緩存。

他們之前的區别是強緩存不需要向浏覽器發送請求，直接從緩存中讀取資源，協商緩存需要詢問浏覽器緩存是否過期以确定從哪裡讀取資源。

強緩存通過設置http header來實現：Expires 和 Cache-Control。

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

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

協商緩存是在強緩存失效之後，浏覽器攜帶緩存标識向服務器發起請求，由服務器決定是否使用緩存。協商緩存可以通過兩種HTTP Header來實現：Last-Modified和ETag。

Last-Modified

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

ETag

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

總結

浏覽器緩存的強緩存和協商緩存如下圖：

1）關注 私信回複：“測試”，可以免費領取一份10G軟件測試工程師面試寶典文檔資料。以及相對應的視頻學習教程免費分享！，其中包括了有基礎知識、Linux必備、Mysql數據庫、抓包工具、接口測試工具、測試進階-Python編程、Web自動化測試、APP自動化測試、接口自動化測試、測試高級持續集成、測試架構開發測試框架、性能測試等。

2）關注 私信回複："入群" 就可以邀請你進入軟件測試群學習交流~~

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!