Nginx配置瀏覽器快取

一. 瀏覽器從哪讀取快取

• memory cache

  當直接重新整理頁面的時候,頁面資源會從記憶體中直接獲取

• disk cache

  如果伺服器指定了強快取它會快取到硬碟上,如果網頁關掉再開啟瀏覽器會從磁碟上去載入資源

二. 快取的分類

• <-:表示伺服器給瀏覽器傳送的,->:表示瀏覽器給伺服器傳送的

• 強快取,檔案資源直接從快取中獲取

  • <- cache-control: max-age=600
    • cache-control是http1.1中的響應頭,max-age=600是快取600s的意思. 不設定的話預設快取時間是4天.在這個時間段瀏覽器不會去伺服器獲取資料,直接從快取中獲取.
    • 對於JS,CSS等檔案可以設定成強快取
  • <- expires: Mon, 14 Sep 2020 09:02:20 GMT
    • expires是http1.0中的響應頭,他沒有max-age屬性,功能沒有cache-control強大.當cache-control和expires都設定了的時候,只會生效cache-control

• 協商快取,訪問伺服器是否從瀏覽器快取中獲取

  • <- last-modified: Fri, 07 Aug 2020 02:35:59 GMT
    • 伺服器告訴瀏覽器資源最後的修改時間,
  • -> if-modified-since: Fri, 07 Aug 2020 02:35:59 GMT
    • 當瀏覽器請求資料時會帶上瀏覽器上次請求資料的修改時間,伺服器會把這個時間和當前檔案最後修改時間作對比,如果修改時間一致說明瀏覽器之前拿到的是最新檔案,則返回304狀態碼告訴瀏覽器從快取中讀取.如果瀏覽器拿到的時間比伺服器修改的時間要早那麼說明瀏覽器目前快取的不是最新檔案,則把該檔案傳送給瀏覽器並返回200狀態碼. 但是有的時候檔案修改時間變了但是內容沒變,這樣的話並不準確,所以有了etag屬性.
  • <- etag: W/“5f2cbe0f-2382"
    • 當伺服器返回響應的時候會告訴瀏覽器檔案etag的值,etag類似一種hash值,它代表檔案內容
  • -> if-none-match: W/“5f2cbe0f-2382”
    • 當瀏覽器去伺服器請求資源的時候,會帶上伺服器上次返回的etag值.伺服器根據這個etag值和當前資源的etag值進行對比.如果一致說明檔案沒有變動,返回304狀態碼,如果不一致說明有變動返回200狀態碼.
  • 預設nginx是開啟etag和last-modified的

三. Nginx下配置檔案的快取方式

• 開啟終端下載nginx配置檔案

scp root@47.242.36.24:/etc/nginx/nginx.conf ./

• 開啟下載好的配置檔案,在http中新增gizp相關配置,加快傳輸速度

http {
  # 開啟gzip
  gzip on;
  # 啟用gzip壓縮的最小檔案；小於設定值的檔案將不會被壓縮
  gzip_min_length 1k;
  # gzip 壓縮級別 1-10 
  gzip_comp_level 2;
  # 進行壓縮的檔案型別。
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  # 是否在http header中新增Vary: Accept-Encoding，建議開啟
  gzip_vary on;
  # etag協商快取 預設是開啟的
  etag on;
}

• 在server中新增協商快取和強快取配置,解決快取問題

server {
	# html設定成協商快取或者不快取
	location ~* \.(html)$ {
		# 關閉訪問日誌
	    access_log off;
	    # 新增響應頭,no-cache:協商快取,no-store:不快取
	    add_header  Cache-Control  max-age=no-cache;
  	}
	
	# 特定檔案設定強快取
  location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
	    access_log off;
	    add_header    Cache-Control  max-age=360000; # 4天
  	}
}

• 上傳修改好的nginx.conf到伺服器

 scp nginx.conf root@47.242.36.24:/etc/nginx/nginx.conf

• 到伺服器重啟nginx伺服器即可

nginx -s reload