瀏覽器HTTP的緩存機制

時間 2019-11-07

原文原文鏈接

1、瀏覽器緩存機制

瀏覽器緩存機制，其實主要就是HTTP協議定義的緩存機制(如：Expires、Cache-Control等)。css

但是也有非HTTP協議定義的緩存機制。如使用HTML標籤，Web開發人員可以在HTML頁面的節點中增長標籤。代碼例如如下：html

<META HTTP-EQUIV='Pragma' CONTENT='no-cache'>

上述代碼的做用是告訴瀏覽器當前頁面不被緩存。每次訪問都需要去server拉取。使用上很是easy，但惟獨部分瀏覽器可以支持，而且所有緩存代理server都不支持，因爲代理不解析HTML內容自己。chrome

咱們在訪問百度首頁的時候。會發現不管怎麼刷新頁面。靜態資源基本都是返回200(from cache):
![這裏寫圖片描寫敘述](http://img.blog.csdn.net/20160407112550028)

當咱們隨便點開一個靜態資源是這樣的：
瀏覽器

接下來咱們瞭解一下http報文中與緩存相關的首部字段：
一、通用首部字段：(就是請求報文和響應報文都能用上的字段)
緩存

二、請求首部字段：bash

三、響應首部字段：
markdown

四、實體首部字段：
post

2、場景模擬

爲了方便模擬各類緩存效果，建一個很是easy的場景。
一、頁面文件ui

<!DOCTYPE html>
<html>
<head>
<title>緩存場景模擬</title>
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<h1>緩存場景模擬</h1>
<p><img src="img/test.jpg" /></p>
</body>
</html>

二、首部字段改動
有時候一些瀏覽器會自行給請求首部加上一些字段(如：chrome使用F5會強制加上」cache-control:max-age=0」)，會覆蓋一些字段(比方pragma)的功能；另外有時候咱們但願server能多/少返回一些響應字段。spa

3、http1.0時代的緩存機制

一、pragma
當該字段值爲」no-cache」的時候，會知會client不要對該資源讀取緩存，即每次都向server發送一次請求才行。
Pragma屬於通用首部字段，在client上使用時。常規要求咱們往html上加上這段meta元素標籤。

<meta http-equiv='Pragma' content='no-cache'>

它告訴瀏覽器每次請求頁面時不要讀緩存。都得往server發一次請求才行。

但是，其實這樣的禁用緩存的形式用處很是有限：
一、僅有IE才幹識別這段meta標籤的含義。其它主流瀏覽器僅能識別」Cache-Control:no-store」的meta標籤。

二、在識別IE瀏覽器中識別到該標籤的含義，並不必定會在請求字段上加上Pragma，但的確會讓當前頁面每次都發送新請求。

二、Expires
有了Pragma來禁用緩存。天然也需要有個東西來啓用緩存和定義緩存時間。對http1.0而言，Expires就是作這件事的首部字段。

Expires的值相應一個GMT，比方「Mon, 22 Jul 2002 11:12:01 GMT」來告訴你瀏覽器資源緩存過時時間，假設還沒過該時間則不發請求。
語法：

<meta http-equiv='expires' content='mon, 18 apr 2016 14:30:00 GMT'>

假設但願在IE下頁面下不走緩存，但願每次刷新頁面都能發新請求，那麼可以把「content」裏的值寫爲」-1」或「0」。
值得注意的是該方式只做爲知會IE緩存時間的標記，你並不能在請求或響應報文中找到Expires字段。
咱們經過Pragma禁用緩存，又給Expires定義一個還未到期的時間（紅框），刷新頁面時發現均發起了新請求（藍框），這意味着Pragma字段的優先級會更高。
但是。響應報文中Expires所定義的緩存時間是相對server上的時間而言的，假設client上的時間跟server上的時間不一致（特別是用戶改動了本身電腦的系統時間），那緩存時間可能就沒啥意義了。

二、Cache-Control
針對上述的「Expires時間是相對server而言，沒法保證和client時間統一」的問題。http1.1新增了 Cache-Control 來定義緩存過時時間。若報文中同一時候出現了 Pragma、Expires 和 Cache-Control，會以 Cache-Control 爲準。
Cache-Control也是一個通用的首部字段。這意味着它能分別在請求報文和響應報文中使用。

"Cache-Control":"cache-directive"

做爲請求首部時，cache-directive的可選值有：

做爲響應首部時，cache-directive的可選值有：

咱們依然可以在HTML頁面加上meta標籤來給請求報頭加上Cache-Control字段：
另外。Cache-Control贊成自由組合可選值，好比：

Cache-Control：max-age=3600，must-revalidate

它意味着該資源是從原server上取得的。且其緩存（新奇度）的有效時間爲一小時，在興許一小時內，用戶又一次訪問該資源則無須發送請求。
固然這樣的組合的方式也會有些限制。比方 no-cache 就不能和 max-age、min-fresh、max-stale 一塊兒搭配使用。

組合的形式還能作一些瀏覽器行爲不一致的兼容處理。好比在IE咱們可以使用 no-cache 來防止點擊「後退」button時頁面資源從緩存載入。但在 Firefox 中。需要使用 no-store 才幹防止歷史回退時瀏覽器不從緩存中去讀取數據，故咱們在響應報頭加上例如如下組合值就能夠作兼容處理：

Cache-Control: no-cache, no-store

未完，待續。。

。。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。