Nginx 瀏覽器緩存

瀏覽器緩存原理

 HTTP協議定義的緩存機制(如:Expire;Cache-control等)html

瀏覽器無緩存場景圖瀏覽器

瀏覽器有緩存場景圖緩存

緩存校驗過時機制服務器

 

(1)第一步:客戶端緩存校驗app

   第一步:本地客戶端經過Expires、Cache-Control(max-age)字段校驗本地緩存是否過時3d

    Expires出如今Http1.0版本;Cache-Control(max-age)出如今Http1.1版本;code

(2)第二步:Etag緩存校驗server

   第二步:經過Etag頭信息校驗服務器緩存是否過時,若是不過時,不走第三步,不然執行下一步htm

    Etag解釋:blog

  •     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:

 

相關文章
相關標籤/搜索