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緩存通常有以下分類：

• 客戶端緩存（瀏覽器緩存等）
• 服務(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ì)在用戶磁盤上對(duì)最近訪問(wèn)的頁(yè)面的資源進(jìn)行存儲(chǔ)，當(dāng)再次訪問(wèn)該頁(yè)面時(shí)，瀏覽器就可以從磁盤緩存中加載這些資源，避免頻繁向服務(wù)器發(fā)起請(qǐng)求，這樣可以加速頁(yè)面的展示，并降低服務(wù)器的負(fù)載。

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

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

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

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

了解流程之后，我們來(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ō)明是直接加載的磁盤緩存

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

??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;

總結(jié)

以上就是Nginx對(duì)瀏覽器緩存的配置，Nginx是多模塊化的，還有很多高級(jí)功能，我們后面繼續(xù)探索。

這些僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論