天天看點

【前端 · 面試 】HTTP 總結(七)—— HTTP 緩存概述

最近我在做前端面試題總結系列,感興趣的朋友可以添加關注,歡迎指正、交流。

争取每個知識點能夠多總結一些,至少要做到在面試時,針對每個知識點都可以侃起來,不至于啞火。

【前端 · 面試 】HTTP 總結(七)—— HTTP 緩存概述

前言

緩存是應用程式中很重要的一個概念,在有大量資料交換的應用程式中,我們會采取一些方式将那些實時性要求不高的資料生成副本并存儲在某個相對來說可快速到達、通路、擷取的倉庫,這樣在需要這些資料的時候我們直接從這個倉庫中擷取資料。

緩存的目的主要有兩點:

  • 提升資料交換的性能(速度)
  • 提高使用者體驗
  • 減少網絡傳輸
  • 緩解伺服器或資料庫的壓力

HTTP 緩存作為 WEB 性能優化的重要手段,對于從事 Web 開發的同學們來說,應該是知識體系庫中的一個基礎環節,同時對于有志成為前端架構師的同學來說是必備的知識技能。

概念

HTTP 緩存指的是: 當用戶端向伺服器請求資源時,會先抵達浏覽器緩存,如果浏覽器有“要請求資源”的副本,就可以直接從浏覽器緩存中提取而不是從原始伺服器中提取這個資源。

常見的 HTTP 緩存隻能緩存 GET 請求響應的資源,對于其他類型的響應則無能為力,是以後續說的請求緩存都是指 GET 請求。

HTTP 根據是否要向伺服器發送請求将緩存規則分為了兩類:

  • 強緩存
  • 協商緩存

HTTP 緩存都是從第二次請求開始的。

第一次請求資源時,伺服器傳回資源,并在響應頭中回傳資源的緩存參數;第二次請求時,浏覽器判斷這些請求參數,命中強緩存就直接200,否則就把請求參數加到請求頭中傳給伺服器,看是否命中協商緩存,命中則傳回 304,否則伺服器會傳回新的資源。

緩存規則

當使用者開始通路一個網站時,浏覽器會從目标伺服器擷取一些資源用以建構最終的 WEB 頁面,比如 css、js、html 等靜态檔案。

假設我們不采取任何措施,則使用者每次通路這個網站都要發起一系列 HTTP 請求,試想,如果這個網站的 pv 達到上百萬甚至上千萬,會對網站的背景伺服器造成多大的壓力。

為了盡可能提升網站的性能,HTTP 協定給出了一個優化方案,其大體規則如下圖所示:

【前端 · 面試 】HTTP 總結(七)—— HTTP 緩存概述
  • 當使用者第一次請求一個資源時的時序圖,浏覽器會先詢問是否有命中緩存
  • 沒有命中的緩存則浏覽器再從伺服器擷取資源并将資源放進緩存倉庫中,下次則可以從緩存中拿資源了。

為友善了解,我們認為浏覽器提供了緩存資料庫,隻要浏覽器發現滿足了某些緩存規則,就可以直接從緩存資料庫中取出你需要的資源。

上述是一個簡單過程,但是事實上的緩存政策還要更複雜一點。下面是一個較為完整的緩存流程:

【前端 · 面試 】HTTP 總結(七)—— HTTP 緩存概述

總結

  • HTTP 緩存是儲存在浏覽器上的
  • HTTP 緩存是應用程式性能優化的重要手段
  • HTTP 緩存針對的是那些時效性不是很強的資源,比如 JS、CSS、HTML 等
  • HTTP 緩存分為強緩存和協商緩存
  • HTTP 緩存的相關設定參數都是在頭資訊中攜帶的

以上就是有關 HTTP 緩存的概述内容,後面我會詳細講解強緩存和協商緩存的原理和應用。

~

~本文完,感謝閱讀!

學習有趣的知識,結識有趣的朋友,塑造有趣的靈魂!