使用Nginx配置浏览器缓存,页面展示更快一步

1.简介

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

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

Nginx不仅仅是一个web服务器，它也是一个web缓存服务器。

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

web缓存通常有以下分类：

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

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

2.浏览器缓存

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

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

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

• 浏览器为什么要对资源进行缓存
• 浏览器获取缓存的流程

1）浏览器为什么要对资源进行缓存呢？

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

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

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

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

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

了解流程之后，我们来具体演示一下。访问页面：http://192.168.110.98/jquery.js

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;

总结

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

这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。