通常在浏览器端会有自己的缓存机制，通过 HTTP 协议定义的缓存机制（如：Expires，Cache-Control 等）来实现的。当客户端有了缓存后在第二次发出同样的请求时浏览器会先到自己的缓存中去找，以减少与服务器的交互来降低服务器的消耗、同时提高浏览器的响应速度。
浏览器在无缓存下访问
浏览器第一次访问要请求的目标内容，直接向目标服务器发出请求，目标服务器响应请求。
浏览器已有缓存
当浏览器发现本地有缓存时他会对缓存进行校验，校验该内容的缓存周期、是否过期，具体的校验机制如下：
-
在 HTTP 1.0 中校验是否过期通过 Expires ；而在 HTTP 1.1 中 是通过 Cache-Control 进行校验的， max-age 中存放了缓存内容的缓存周期，最大过期时间。
-
当浏览器根据Expirse的过期时间或Cache-Control(max-age)的过期周期判断缓存文件没有过期时，那么就直接使用缓存的文件；
-
如果过期，浏览器会向服务端请求，服务端会通过请求头信息中的 Etag 标签(记录了缓存内容的校验码)和Last-Modified 头信息(记录了缓存内容的修改时间戳)进行校验，用于与服务器端的内容进行对比。如果这两个头信息与服务端的对比一致，说明服务端内容没有更新，返回响应
304，浏览器端会继续使用本地缓存内容；如果Etag或者Last-Modified任何一个头信息与服务端的不一致，意味着服务端内容此前有过更新，那么服务器将返回更新内容给浏览器，状态码200，浏览器此时将使用服务端返回的最新内容，更新Expirse和Cache-Control，并缓存返回的最新内容。
注意：在实际应用中 Etag 的优先级更高，因为 Last-Modified 他的时间戳只能精确到秒，不可靠。
需要注意的是市面上大多数浏览器都会在请求头中加了
Cache-Control:max-age=0使浏览器每次请求都会跟服务器进行交互，但他们传输的数据量非常小。
开启缓存
要对内容开启缓存那么就需要在响应头部中添加 Cache-control 、 Expirse 头。
在 Nginx 中使用 expires 指令来进行配置，这个指令包含在 http_headers_module 中。
expires 指令配置语法
expires [modified] time;
time 表示一个时间周期, 如 10s 表示 10 秒，1m 为一分钟，1h 为一小时，1d 为一天；Expires 的值为系统当前时间加所设定的 time 值； 可以在 http, server, location, if in location 中配置。
示例
将站点中所有图片缓存周期设置为一天：
location ~ *\.(gif|jpg|jpeg|png|bmp|ico)$ {
expires 1d;
}
网友评论