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

這是我參與8月更文挑戰的第7天，活動詳情查看：8月更文挑戰

最近我在作前端面試題總結系列，感興趣的朋友能夠添加關注，歡迎指正、交流。

爭取每一個知識點可以多總結一些，至少要作到在面試時，針對每一個知識點均可以侃起來，不至於啞火。

前言

緩存是應用程序中很重要的一個概念，在有大量數據交換的應用程序中，咱們會採起一些方式將那些實時性要求不高的數據生成副本並存儲在某個相對來講可快速到達、訪問、獲取的倉庫，這樣在須要這些數據的時候咱們直接從這個倉庫中獲取數據。

緩存的目的主要有兩點：

• 提高數據交換的性能（速度）
• 提升用戶體驗
• 減小網絡傳輸
• 緩解服務器或數據庫的壓力

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

概念

HTTP 緩存指的是: 當客戶端向服務器請求資源時，會先抵達瀏覽器緩存，若是瀏覽器有「要請求資源」的副本，就能夠直接從瀏覽器緩存中提取而不是從原始服務器中提取這個資源。

常見的 HTTP 緩存只能緩存 GET 請求響應的資源，對於其餘類型的響應則無能爲力，因此後續說的請求緩存都是指 GET 請求。

HTTP 根據是否要向服務器發送請求將緩存規則分爲了兩類：

• 強緩存
• 協商緩存

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

第一次請求資源時，服務器返回資源，並在響應頭中回傳資源的緩存參數；第二次請求時，瀏覽器判斷這些請求參數，命中強緩存就直接200，不然就把請求參數加到請求頭中傳給服務器，看是否命中協商緩存，命中則返回 304，不然服務器會返回新的資源。

緩存規則

當用戶開始訪問一個網站時，瀏覽器會從目標服務器獲取一些資源用以構建最終的 WEB 頁面，好比 css、js、html 等靜態文件。

假設咱們不採起任何措施，則用戶每次訪問這個網站都要發起一系列 HTTP 請求，試想，若是這個網站的 pv 達到上百萬甚至上千萬，會對網站的後臺服務器形成多大的壓力。

爲了儘量提高網站的性能，HTTP 協議給出了一個優化方案，其大致規則以下圖所示：

• 當用戶第一次請求一個資源時的時序圖，瀏覽器會先詢問是否有命中緩存
• 沒有命中的緩存則瀏覽器再從服務器獲取資源並將資源放進緩存倉庫中，下次則能夠從緩存中拿資源了。

爲方便理解，咱們認爲瀏覽器提供了緩存數據庫，只要瀏覽器發現知足了某些緩存規則，就能夠直接從緩存數據庫中取出你須要的資源。

上述是一個簡單過程，可是事實上的緩存策略還要更復雜一點。下面是一個較爲完整的緩存流程：

總結

• HTTP 緩存是保存在瀏覽器上的
• HTTP 緩存是應用程序性能優化的重要手段
• HTTP 緩存針對的是那些時效性不是很強的資源，好比 JS、CSS、HTML 等
• HTTP 緩存分爲強緩存和協商緩存
• HTTP 緩存的相關設置參數都是在頭信息中攜帶的

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

~

~本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

你們好，我是〖編程三昧〗的做者 隱逸王，個人公衆號是『編程三昧』，歡迎關注，但願你們多多指教！

你來，懷揣指望，我有墨香相迎！ 你歸，不管得失，惟以餘韻相贈！

知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！