一. 瀏覽器從哪讀取緩存

• 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 {# 開啟gzipgzip 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

總結

以上是生活随笔為你收集整理的Nginx配置浏览器缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。