1.简介

缓存能够存储请求的响应结果，可以很方便的再次访问，使用缓存的优点是很明显的。

加速内容的访问，降低响应时间减少服务器的负载

Nginx不仅仅是一个web服务器，它也是一个web缓存服务器。通过Nginx缓存，我们对一些静态资源或者更新频率低的数据做缓存，降低请求的响应时间，同时也能降低服务器的负载，一举多得。

web缓存通常有以下分类：

客户端缓存（浏览器缓存等）服务器缓存（Nginx缓存、Redis缓存等）

我们将着重介绍浏览器缓存。

2.浏览器缓存

B/S架构是一种很流行的软件架构，浏览器在这种架构中扮演着极其重要的角色。

在使用浏览器的过程中，要刷新页面，可以使用快捷键F5刷新，这个时候有些小伙伴可能会遇到页面信息并没有刷新的情况，这就是浏览器缓存在“作祟”，这个时候我们需要强制刷新（Ctrl + F5），才能够越过浏览器缓存获取最新的数据。

对于浏览器缓存，有以下几个关键点：

浏览器为什么要对资源进行缓存浏览器获取缓存的流程1）浏览器为什么要对资源进行缓存呢？

为了节约网络资源，加速访问，浏览器会在用户磁盘上对最近访问的页面的资源进行存储，当再次访问该页面时，浏览器就可以从磁盘缓存中加载这些资源，避免频繁向服务器发起请求，这样可以加速页面的展示，并降低服务器的负载。

2）浏览器获取缓存的流程

既然浏览器可以将页面的资源缓存到本地磁盘，那么浏览器又是怎么去加载这些缓存资源的呢？

下面这张图就是具体流程：

图里面存在几个header的定义：

header

示例

说明

Etag

"6459ce31-15499"

资源的哈希码

Last-Modified

Tue, 09 May 2023 04:38:09 GMT

用于表示资源最后修改时间

If-None-Match

"6459ce31-15499"

将当前资源的哈希码发送给服务器进行匹配

If-Modified-Since

Tue, 09 May 2023 04:38:09 GMT

将当前资源的最后修改时间发送给服务器进行匹配

了解流程之后，我们来具体演示一下。访问页面：

1）第一次访问，没有缓存，响应状态码：200，资源大小87.5kb

请求头信息：

响应头信息：

2）新建标签页访问，响应状态码：200，资源来自disk cache，说明是直接加载的磁盘缓存

3）F5刷新页面，状态304，资源大小182B，说明会向web服务器发送请求，服务器响应304，因此浏览器去磁盘缓存加载资源。

Tips：F5刷新页面，会让浏览器认为缓存已过期，因此会走缓存已过期的流程。Ctrl+F5强制刷新页面，会直接跳过浏览器缓存。

请求头信息：

相比第一次访问时，多了两个header：If-Modified-Since、If-None-Match

3）Nginx对浏览器缓存的配置

前面，在看浏览器获取缓存的流程时，有一步是请求响应，缓存协商，这就涉及到nginx的一些配置指令。

在ngx_http_headers_module模块中，该模块可以将Expires和Cache-Control添加到响应头中，供浏览器使用，我们可以对其进行配置。主要的指令如下：

作用域：http, server, location, if in location

语法：expires [modified] time; expires epoch | max | off;

默认值：expires off;

1）expires [modified] time;

time可以为正数，也可以为负数，默认单位为秒。

如果为负数，则响应为：Cache-Control:no-cache，即不缓存如果为正数或0，则响应为：Cache-Control:max-age=time

示例：设置缓存过期时间10s

location /jquery {    gzip_types application/javascript;    gzip_min_length 20;    # 缓存过期时间10s    expires 10;    root   html;}

发送请求，查看结果，和预期保持一致。Date和Expires的时间也是相差10s。

2） expires epoch | max | off;

指令

响应头

expires epoch

Expires:Thu, 01 Jan 1970 00:00:01 GMT Cache_Control:no-cache

expires max

Expires:Thu, 31 Dec 2037 23:55:55 GMT max-age=315360000

expires off

响应头不添加Expires和Cache-Control

以上就是Nginx对浏览器缓存的配置，Nginx是多模块化的，还有很多高级功能，我们后面继续探索。