緩存流程圖

Ⅰ 瀏覽器緩存和伺服器緩存

一、瀏覽器緩存

瀏覽器緩存即http緩存；瀏覽器緩存根據是否需要向伺服器重新發起HTTP請求將緩存過程分為兩個部分，分別是 強制緩存 和 協商緩存  。

瀏覽器第一次請求資源的時候伺服器會告訴客戶端是否應該緩存資源，根據響應報文中HTTP頭的緩存標識，決定是否緩存結果，是則將請求結果和緩存標識存入瀏覽器緩存中。如下圖：

1.強制緩存 ：瀏覽器會對緩存進行查找，並根據一定的規則確定是否使用緩存。

強制緩存的緩存規則？

HTTP/1.0 Expires 這個欄位是絕對時間，比如2018年6月30日12:30，然後在這個時間點之前的請求都會使用瀏覽器緩存，除非清除了緩存。

這個欄位的缺點就是只會同步客戶端的時間，這就有可能修改客戶端時間導致緩存失效。

HTTP/1.1 cache-Control       這個是1.1的時候替換Expires的，它會有幾種取值：

public ：所有內容都將被緩存（客戶端和代理伺服器都可緩存）

private ：所有內容只有客戶端可以緩存， Cache-Control的默認取值

no-cache ：客戶端緩存內容，但是是否使用緩存則需要經過協商緩存來驗證決定

no-store ：所有內容都不會被緩存，即不使用強制緩存，也不使用協商緩存

max-age=xxx (xxx is numeric) ：緩存內容將在xxx秒後失效

比如max-age=500，則在500秒內再次請求會直接只用緩存。

優先性：cache-Control > Expires

如果同時存在，cache-Control會覆蓋Expires。

這個欄位的缺點就是：

如果資源更新的速度是秒以下單位，那麼該緩存是不能被使用的，因為它的時間單位最低是秒。

如果文件是通過伺服器動態生成的，那麼該方法的更新時間永遠是生成的時間，盡管文件可能沒有變化，所以起不到緩存的作用。

上圖中瀏覽器緩存中存在該資源的緩存結果，並且沒有失效，就會直接使用緩存的內容。

上圖中瀏覽器緩存中沒有該資源的緩存結果和標識，就會直接向伺服器發起HTTP請求。

2.協商緩存： 瀏覽器的強制緩存失效後(時間過期)，瀏覽器攜帶緩存標識請求伺服器，由伺服器決定是否使用緩存。

伺服器決定的規則？

控制協商緩存的欄位有 Last-Modified / If-Modified-Since 和 Etag / If-None-Match。

①Last-Modified 是伺服器返回給瀏覽器的本資源的最後修改時間。

當下次再次請求的時候，瀏覽器會在請求頭中帶 If-Modified-Since ,即上次請求下來的 Last-Modified 的值，

然後伺服器會用這個值和該資源最後修改的時間比較，如果最後修改時間大於這個值，則會重新請求該資源，返回狀態碼200。

如果這個值和最後修改時間相等，則會返回304，告訴瀏覽器繼續使用緩存。

② Etag 是伺服器返回的一個hash值。

當下次再次請求的時候，瀏覽器會在請求頭中帶 If-None-Match ,即上次請求下來的 Etag 值，

然後伺服器會用這個值和該資源在伺服器的 Etag 值比較，如果一致則會返回304，繼續使用緩存；如果不一致，則會重新請求，返回200。

二、伺服器緩存

上面是一個簡單的流程圖：

用戶1訪問A頁面，伺服器解析A頁面返回給用戶1，同時在伺服器內存上做一定映射，把A頁面緩存在硬碟上面

用戶2訪問A頁面，伺服器直接根據內存上的映射找到對應的頁面緩存，直接返回給用戶2，這樣就減少了伺服器對同一頁面的重復解析

伺服器緩存和瀏覽器緩存的區別：

伺服器緩存是把頁面緩存到伺服器上的硬碟里，而瀏覽器緩存是把頁面緩存到用戶自己的電腦里

Nginx伺服器 

Nginx是一個高性能的HTTP和反向代理伺服器。具有非常多的優越性：

在連接高並發的情況下，Nginx是Apache伺服器不錯的替代品，Nginx在美國是做虛擬主機生意的老闆們經常選擇的軟體平台之一。

Nginx提供了expires、etag、if-modified-since指令來實現瀏覽器緩存控制。

nginx -s reload#重新載入配置文件 

nginx -s reopen#重新打開log文件 

nginx -s stop#快速關閉nginx服務 

nginx -s quit #優雅的關閉nginx服務，等待工作進程處理完所有的請求

Nginx設置靜態文件的緩存過期時間 

location ~.*\.(js|css|html|png|jpg)$ {

  expires 3d;

}

 expires    3d;//表示緩存3天

expires    3h;//表示緩存3小時

expires    max;//表示緩存10年

expires    -1;//表示永遠過期。

如果設置為-1在js、css等靜態文件在沒有修改的情況下返回的是http 304，如果修改返回http 200

對於靜態資源會自動添加ETag，可以通過添加etag off指令禁止生成ETag。如果是靜態文件，那麼Last-Modified值為文件的最後修改時間。

在開發調試web的時候，經常會碰到因瀏覽器緩存(cache)而經常要去清空緩存或者強制刷新來測試的煩惱，提供下apache不緩存配置和nginx不緩存配置的設置。在常用的緩存設置裡面有兩種方式，都是使用add_header來設置：分別為Cache-Control和Pragma。

location ~ .*\.(css|js|swf|php|htm|html )$ {

  add_header Cache-Control no-store;

  add_header Pragma no-cache;

  }

nginx gzip壓縮

使用 gzip 壓縮可以降低網站帶寬消耗，同時提升訪問速度。

主要在nginx服務端將頁面進行壓縮，然後在瀏覽器端進行解壓和解析，

目前大多數流行的瀏覽器都遲滯gzip格式的壓縮，所以不用擔心。

默認情況下，Nginx的gzip壓縮是關閉的，同時，Nginx默認只對text/html進行壓縮

gzip on;

ersio #開啟gzip壓縮輸出

gzip_http_vn 1.0 ;#默認1.1

#其中的gzip_http_version的設置，它的默認值是1.1，就是說對HTTP/1.1協議的請求才會進行gzip壓縮

#如果我們使用了proxy_pass進行反向代理，那麼nginx和後端的upstream server之間是用HTTP/1.0協議通信的。

gzip_vary on ;

#和http頭有關系，加個vary頭，給代理伺服器用的，有的瀏覽器支持壓縮，有的不支持，

#所以避免浪費不支持的也壓縮，所以根據客戶端的HTTP頭來判斷，是否需要壓縮

gzip_comp_level 6;

#設置gzip壓縮等級，等級越底壓縮速度越快文件壓縮比越小，反之速度越慢文件壓縮比越大 1-9

gzip_proxied any;

#Ngnix作為反向代理的時候啟用

#expample:gzip_proxied no-cache;

# off – 關閉所有的代理結果數據壓縮

# expired – 啟用壓縮，如果header中包含」Expires」頭信息

# no-cache – 啟用壓縮，如果header中包含」Cache-Control:no-cache」頭信息

# no-store – 啟用壓縮，如果header中包含」Cache-Control:no-store」頭信息

# private – 啟用壓縮，如果header中包含」Cache-Control:private」頭信息

# no_last_modified – 啟用壓縮，如果header中包含」Last_Modified」頭信息

# no_etag – 啟用壓縮，如果header中包含「ETag」頭信息

# auth – 啟用壓縮，如果header中包含「Authorization」頭信息

# any – 無條件壓縮所有結果數據

gzip_types text/html ;#壓縮的文件類型

#設置需要壓縮的MIME類型,非設置值不進行壓縮

#param:text/html|application/x-javascript|text/css|application/xml

gzip_buffers 16 8k; #設置gzip申請內存的大小,其作用是按塊大小的倍數申請內存空間設置gzip申請內存的大小,其作用是按塊大小的倍數申請內存空間

#設置gzip申請內存的大小,其作用是按塊大小的倍數申請內存空間

# param1:int 增加的倍數

# param2:int(k) 後面單位是k

# example: gzip_buffers 4 8k;

# Disable gzip for certain browsers.

gzip_disable 「MSIE [1-6].(?!.*SV1)」; #ie6不支持gzip，需要禁用掉ie6

Ⅱ 鍥劇墖嫻佺▼鍥炬ā鏉-嫻佺▼鍥懼備綍鍒朵綔錛