HTTP 缓存策略 ｜ 8月更文挑战

背景

访问浏览器的时候一些静态资源会被缓存下来，下次访问就不用再次拉取数据，减少服务器数据返回。是常见的优化和手段之一

那么如何缓存，判断依据是什么呢

强缓存

判断本地缓存数据中是否有满足的缓存并且未过期，有则直接读取，没有则发起请求。

Expires

Expires 属于 HTTP1.0 协议内容，目前主流浏览器主要使用 HTTP1.1 或者 HTTP2协议。判断是否过期根据请求的时间是否小于 Expires 的服务器时间，存在本地时间和服务器时间不同步问题

Cache-Control

no-store: 所有内容不被缓存，适用于需要经常变化的文件
no-cache: 缓存，浏览器使用缓存前判断缓存资源是否最新
max-age=x(s): 请求缓存后 x 秒不再发起请求
s-maxage=x(s): 代理服务器请求源服务器 x 秒后不再发起请求，只对 CDN 缓存有效
public: 客户端和代理服务器都可以缓存
private: 只有客户端可以缓存

协商缓存

有些地方会称之为对比缓存。协商缓存不管本地是否有缓存，都会对服务端进行请求，根据返回的标识判断是否需要重新请求。

Last-Modified / If-Modified-Since

Last-Modified: 返回资源的最后修改时间

If-Modified-Since: 二次访问，返回资源最后修改时间。与 Last-Modified 时间对比，大的话需要返回最新数据，小的话返回状态 304 浏览器使用缓存

Etag / If-None-Match

Etag: 返回当前请求内容在服务器的标识 If-None-Match: 返回当前资源字啊服务器的标识，和 Etag 进行对比判断资源是否被修改过

优先级高于 Last-Modified / If-Modified-Since

nginx配置缓存参考

server
{
    # 处理媒体资源文件，缓存为 350天
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp3|wma)$
    {
        expires 350d
    }
    
    # 设置 js 和 css 缓存时间为 360天
    location ~ .*\.(js|css)$
    {
        expires 360d
    }
}

CDN 缓存

域名设置 CDN 缓存之后，相当于设置了一个中转站。当浏览器访问到域名，这个请求会被发送到距离浏览器最近的 CDN 服务器上，CDN 会返回源服务器或者返回自身缓存

可见第一次访问是比没有添加 CND 慢的，如果是多次次访问的话就可以充分体现出距离和缓存的优势。所以如果是经常访问的网站，配置 CDN 缓存是一种不错的优化方式。当然需要均衡费用和好处之间的平衡

CDN 对于容灾也有不小的作用。当我们设置了 CDN 缓存，在源服务器发生故障的时候能够保持缓存时间内的正常访问，给予开发人员一定的时间缓冲恢复服务

浏览器访问方式

1. 浏览器跳转：输入网址、跳转、前进后退

缓存的配置均会生效

2. 刷新浏览器

忽略 Expires max-age，将 Cache-Control 设置成 max-age=0。ETag 和 Last-Modified 生效

3. 强制刷新

类似刷新浏览器，不同的是 Cache-Control 设置成 no-cache

总结

1. 先判断强缓存，然后判断协商缓存
2. 合理的配置缓存策略能够达到优化的目的
3. 目前使用的 HTTP 协议是 HTTP1.1 和 HTTP2 比较多

思考

1. 概念题：缓存、强缓存、协商缓存的概念分别是什么

2. nginx服务器或者node.js配置缓存策略

3. CDN 的好处

4. 不同方式刷新浏览器的缓存政策