前端性能優化：瀏覽器的2種緩存方式，你了解嗎？

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

什么是緩存呢？

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

緩存的優點

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是否一致。

總結

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

最后：在我的V ：atstudy-js，可以免費領取一份10G軟件測試工程師面試寶典文檔資料。以及相對應的視頻學習教程免費分享！其中包括了有基礎知識、Linux必備、Shell、互聯網程序原理、Mysql數據庫、抓包工具專題、接口測試工具、測試進階-Python編程、Web自動化測試、APP自動化測試、接口自動化測試、測試高級持續集成、測試架構開發測試框架、性能測試、安全測試等。