一. 瀏覽器從哪讀取緩存

• memory cache

  當(dāng)直接刷新頁面的時候,頁面資源會從內(nèi)存中直接獲取

• disk cache

  如果服務(wù)器指定了強緩存它會緩存到硬盤上,如果網(wǎng)頁關(guān)掉再打開瀏覽器會從磁盤上去加載資源

二. 緩存的分類

• <-:表示服務(wù)器給瀏覽器發(fā)送的,->:表示瀏覽器給服務(wù)器發(fā)送的

• 強緩存,文件資源直接從緩存中獲取

  • <- cache-control: max-age=600
    • cache-control是http1.1中的響應(yīng)頭,max-age=600是緩存600s的意思. 不設(shè)置的話默認(rèn)緩存時間是4天.在這個時間段瀏覽器不會去服務(wù)器獲取數(shù)據(jù),直接從緩存中獲取.
    • 對于JS,CSS等文件可以設(shè)置成強緩存
  • <- expires: Mon, 14 Sep 2020 09:02:20 GMT
    • expires是http1.0中的響應(yīng)頭,他沒有max-age屬性,功能沒有cache-control強大.當(dāng)cache-control和expires都設(shè)置了的時候,只會生效cache-control

• 協(xié)商緩存,訪問服務(wù)器是否從瀏覽器緩存中獲取

  • <- last-modified: Fri, 07 Aug 2020 02:35:59 GMT
    • 服務(wù)器告訴瀏覽器資源最后的修改時間,
  • -> if-modified-since: Fri, 07 Aug 2020 02:35:59 GMT
    • 當(dāng)瀏覽器請求數(shù)據(jù)時會帶上瀏覽器上次請求數(shù)據(jù)的修改時間,服務(wù)器會把這個時間和當(dāng)前文件最后修改時間作對比,如果修改時間一致說明瀏覽器之前拿到的是最新文件,則返回304狀態(tài)碼告訴瀏覽器從緩存中讀取.如果瀏覽器拿到的時間比服務(wù)器修改的時間要早那么說明瀏覽器目前緩存的不是最新文件,則把該文件發(fā)送給瀏覽器并返回200狀態(tài)碼. 但是有的時候文件修改時間變了但是內(nèi)容沒變,這樣的話并不準(zhǔn)確,所以有了etag屬性.
  • <- etag: W/“5f2cbe0f-2382"
    • 當(dāng)服務(wù)器返回響應(yīng)的時候會告訴瀏覽器文件etag的值,etag類似一種hash值,它代表文件內(nèi)容
  • -> if-none-match: W/“5f2cbe0f-2382”
    • 當(dāng)瀏覽器去服務(wù)器請求資源的時候,會帶上服務(wù)器上次返回的etag值.服務(wù)器根據(jù)這個etag值和當(dāng)前資源的etag值進(jìn)行對比.如果一致說明文件沒有變動,返回304狀態(tài)碼,如果不一致說明有變動返回200狀態(tài)碼.
  • 默認(rèn)nginx是開啟etag和last-modified的

三. Nginx下配置文件的緩存方式

• 打開終端下載nginx配置文件

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

• 打開下載好的配置文件,在http中添加gizp相關(guān)配置,加快傳輸速度

http {# 開啟gzipgzip on;# 啟用gzip壓縮的最小文件；小于設(shè)置值的文件將不會被壓縮gzip_min_length 1k;# gzip 壓縮級別 1-10 gzip_comp_level 2;# 進(jìn)行壓縮的文件類型。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協(xié)商緩存 默認(rèn)是開啟的etag on; }

• 在server中添加協(xié)商緩存和強緩存配置,解決緩存問題

server {# html設(shè)置成協(xié)商緩存或者不緩存location ~* \.(html)$ {# 關(guān)閉訪問日志access_log off;# 添加響應(yīng)頭,no-cache:協(xié)商緩存,no-store:不緩存add_header Cache-Control max-age=no-cache;}# 特定文件設(shè)置強緩存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到服務(wù)器

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

• 到服務(wù)器重啟nginx服務(wù)器即可

nginx -s reload

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。