1.簡介

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

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

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

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

web緩存通常有以下分類：

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

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

2.瀏覽器緩存

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

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

對于瀏覽器緩存，有以下幾個關(guān)鍵點：

• 瀏覽器為什么要對資源進行緩存
• 瀏覽器獲取緩存的流程

1）瀏覽器為什么要對資源進行緩存呢？

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

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

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

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

圖里面存在幾個header的定義：

了解流程之后，我們來具體演示一下。訪問頁面：http://192.168.110.98/jquery.js

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

請求頭信息：

響應(yīng)頭信息：

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

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

??Tips：F5刷新頁面，會讓瀏覽器認為緩存已過期，因此會走緩存已過期的流程。Ctrl+F5強制刷新頁面，會直接跳過瀏覽器緩存。

請求頭信息：

相比第一次訪問時，多了兩個header：If-Modified-Since、If-None-Match

3）Nginx對瀏覽器緩存的配置

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

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

主要的指令如下：

• 作用域：http, server, location, if in location
• 語法：expires [modified] time; expires epoch | max | off;
• 默認值：expires off;

1）expires [modified] time;

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

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

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

location /jquery {
	gzip_types application/javascript;
	gzip_min_length 20;
	# 緩存過期時間10s
	expires 10;
	root   html;
}

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

2） expires epoch | max | off;

總結(jié)

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

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

最新評論