Nginx 瀏覽器緩存

瀏覽器緩存原理

 HTTP協議定義的緩存機制（如：Expire；Cache-control等）

瀏覽器無緩存場景圖

瀏覽器有緩存場景圖

緩存校驗過期機制

 

（1）第一步：客戶端緩存校驗

 　　第一步：本地客戶端通過Expires、Cache-Control（max-age）字段校驗本地緩存是否過期

    Expires出現在Http1.0版本；Cache-Control（max-age）出現在Http1.1版本；

（2）第二步：Etag緩存校驗

 　　第二步：通過Etag頭信息校驗服務器緩存是否過期，如果不過期，不走第三步，否則執行下一步

    Etag解釋：

•     Etag的值是一串字符串，在一秒時間內更新的話，服務端是無法識別的，這個時候就需要Etag校驗

（3）第三步：Last-Modified緩存校驗

 

  第三步：通過Last-Modified頭信息校驗服務器緩存是否過期，如果不過期，直接返回，否則請求服務端。

    Last-Modified解釋：

    Last-Modified的值是具體時間：年-月-日 時:分:秒

    Last-Modified用來跟服務端的緩存文件進行校驗，如果服務端緩存文件在新的時間有新的更新，客戶端請求的時間就會跟服務端緩存文件時間對比，這個時候就會出現客戶端請求的時間跟服務端請求的時間不一致。 這樣的話，服務端就會把最新的文件返回給客戶端，這個利用的就是請求頭中的Last-Modified頭信息進行校驗的。

 瀏覽器請求到服務端緩存原理圖

 

304狀態碼：客戶端已經執行了GET，但文件未變化。

瀏覽器緩存場景演示

Nginx在響應頭中添加：Cache-Control、Expires頭

expires過期時間語法

Syntax: 

• expires [modified] time;
• expires epoch | max | off; 不常用

Default:expires off;

Context: http, server, location, if in location

 

配置沒有expires場景

（1）配置location

    location ~ .*\.(htm|html)$ {
        root  /opt/app/code;
    }

　　

（2）創建新的html文件

在/opt/app/html目錄下創建index.html文件並編寫內容

<h1>hello zhangbiao </h1>

訪問

http://www.zhangbiao.com/index.html

 

第一次請求

 

連續請求 響應狀態碼 304 

客戶端請求頭攜帶這兩個字段，目的是跟服務端本地緩存文件對比

• If-Modified-Since:
• If-None-Match:

Nginx配置expires場景 

Nginx配置location

    location ~ .*\.(htm|html)$ {
        expires 24h;
        root  /opt/app/code;
    }

  第一次請求：查看請求頭和響應頭信息

 

 

響應頭多了兩個字段：

• Cache-Control:
• Expires:

 

第二次請求：查看請求頭和響應頭信息

響應頭中Cache-Control字段在第一次和第二次的值都一樣

 

 不管Nginx是否配置expires過期時間，第二次請求都會攜帶這兩個字段

• If-Modified-Since:
• If-None-Match: