使用Nginx配置瀏覽器緩存,頁(yè)面展示更快一步

更新時(shí)間：2024年01月25日 10:51:32 作者：fkjavaer

這篇文章主要介紹了使用Nginx配置瀏覽器緩存,頁(yè)面展示更快一步問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

1.簡(jiǎn)介

緩存能夠存儲(chǔ)請(qǐng)求的響應(yīng)結(jié)果，可以很方便的再次訪問(wèn)，使用緩存的優(yōu)點(diǎn)是很明顯的。

加速內(nèi)容的訪問(wèn)，降低響應(yīng)時(shí)間
減少服務(wù)器的負(fù)載

Nginx不僅僅是一個(gè)web服務(wù)器，它也是一個(gè)web緩存服務(wù)器。

通過(guò)Nginx緩存，我們對(duì)一些靜態(tài)資源或者更新頻率低的數(shù)據(jù)做緩存，降低請(qǐng)求的響應(yīng)時(shí)間，同時(shí)也能降低服務(wù)器的負(fù)載，一舉多得。

web緩存通常有以下分類(lèi)：

客戶端緩存（瀏覽器緩存等）
服務(wù)器緩存（Nginx緩存、Redis緩存等）

我們將著重介紹 瀏覽器緩存。

2.瀏覽器緩存

B/S架構(gòu)是一種很流行的軟件架構(gòu)，瀏覽器在這種架構(gòu)中扮演著極其重要的角色。

在使用瀏覽器的過(guò)程中，要刷新頁(yè)面，可以使用快捷鍵F5刷新，這個(gè)時(shí)候有些小伙伴可能會(huì)遇到頁(yè)面信息并沒(méi)有刷新的情況，這就是瀏覽器緩存在“作祟”，這個(gè)時(shí)候我們需要強(qiáng)制刷新（Ctrl + F5），才能夠越過(guò)瀏覽器緩存獲取最新的數(shù)據(jù)。

對(duì)于瀏覽器緩存，有以下幾個(gè)關(guān)鍵點(diǎn)：

瀏覽器為什么要對(duì)資源進(jìn)行緩存
瀏覽器獲取緩存的流程

1）瀏覽器為什么要對(duì)資源進(jìn)行緩存呢？

為了節(jié)約網(wǎng)絡(luò)資源，加速訪問(wèn)，瀏覽器會(huì)在用戶磁盤(pán)上對(duì)最近訪問(wèn)的頁(yè)面的資源進(jìn)行存儲(chǔ)，當(dāng)再次訪問(wèn)該頁(yè)面時(shí)，瀏覽器就可以從磁盤(pán)緩存中加載這些資源，避免頻繁向服務(wù)器發(fā)起請(qǐng)求，這樣可以加速頁(yè)面的展示，并降低服務(wù)器的負(fù)載。

2）瀏覽器獲取緩存的流程

既然瀏覽器可以將頁(yè)面的資源緩存到本地磁盤(pán)，那么瀏覽器又是怎么去加載這些緩存資源的呢？

下面這張圖就是具體流程：

圖里面存在幾個(gè)header的定義：

header	示例	說(shuō)明
Etag	“6459ce31-15499”	資源的哈希碼
Last-Modified	Tue, 09 May 2023 04:38:09 GMT	用于表示資源最后修改時(shí)間
If-None-Match	“6459ce31-15499”	將當(dāng)前資源的哈希碼發(fā)送給服務(wù)器進(jìn)行匹配
If-Modified-Since	Tue, 09 May 2023 04:38:09 GMT	將當(dāng)前資源的最后修改時(shí)間發(fā)送給服務(wù)器進(jìn)行匹配

了解流程之后，我們來(lái)具體演示一下。訪問(wèn)頁(yè)面：http://192.168.110.98/jquery.js

1）第一次訪問(wèn)，沒(méi)有緩存，響應(yīng)狀態(tài)碼：200，資源大小87.5kb

請(qǐng)求頭信息：

響應(yīng)頭信息：

2）新建標(biāo)簽頁(yè)訪問(wèn)，響應(yīng)狀態(tài)碼：200，資源來(lái)自disk cache，說(shuō)明是直接加載的磁盤(pán)緩存

3）F5刷新頁(yè)面，狀態(tài)304，資源大小182B，說(shuō)明會(huì)向web服務(wù)器發(fā)送請(qǐng)求，服務(wù)器響應(yīng)304，因此瀏覽器去磁盤(pán)緩存加載資源。

??Tips：F5刷新頁(yè)面，會(huì)讓瀏覽器認(rèn)為緩存已過(guò)期，因此會(huì)走緩存已過(guò)期的流程。Ctrl+F5強(qiáng)制刷新頁(yè)面，會(huì)直接跳過(guò)瀏覽器緩存。

請(qǐng)求頭信息：

相比第一次訪問(wèn)時(shí)，多了兩個(gè)header：If-Modified-Since、If-None-Match

3）Nginx對(duì)瀏覽器緩存的配置

前面，在看瀏覽器獲取緩存的流程時(shí)，有一步是 請(qǐng)求響應(yīng)，緩存協(xié)商，這就涉及到nginx的一些配置指令。

在ngx_http_headers_module模塊中，該模塊可以將Expires和Cache-Control添加到響應(yīng)頭中，供瀏覽器使用，我們可以對(duì)其進(jìn)行配置。

主要的指令如下：

作用域：http, server, location, if in location
語(yǔ)法：expires [modified] time; expires epoch | max | off;
默認(rèn)值：expires off;

1）expires [modified] time;

time可以為正數(shù)，也可以為負(fù)數(shù)，默認(rèn)單位為秒。

如果為負(fù)數(shù)，則響應(yīng)為：Cache-Control:no-cache，即不緩存
如果為正數(shù)或0，則響應(yīng)為：Cache-Control:max-age=time

示例：設(shè)置緩存過(guò)期時(shí)間10s

location /jquery {
	gzip_types application/javascript;
	gzip_min_length 20;
	# 緩存過(guò)期時(shí)間10s
	expires 10;
	root   html;
}

發(fā)送請(qǐng)求，查看結(jié)果，和預(yù)期保持一致。Date和Expires的時(shí)間也是相差10s。

2） expires epoch | max | off;

指令	響應(yīng)頭	說(shuō)明
expires epoch	Expires:Thu, 01 Jan 1970 00:00:01 GMTCache_Control:no-cache	不緩存
expires max	Expires:Thu, 31 Dec 2037 23:55:55 GMTmax-age=315360000	緩存10年
expires off	響應(yīng)頭不添加Expires和Cache-Control