前端性能优化篇之设置缓存Expirescache-control

Posted 2021-04-14 鸭梨web前端

1. Cache -Control

HTTP协议的Cache -Control指定请求和响应遵循的缓存机制。

• 在请求消息或响应消息中设置 Cache-Control并不会影响另一个消息处理过程中的缓存处理过程。

• 请求时的缓存指令包括no-cache、no-store、max-age、 max-stale、min-fresh、only-if-cached等。

• 响应消息中的指令包括public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age。

浏览器中关于Cache的3属性:

Cache-Control:

设置相对过期时间, max-age指明以秒为单位的缓存时间. 若对静态资源只缓存一次, 可以设置max-age的值为315360000000 (一万年).

Http协议的cache-control的常见取值及其组合释义:

• no-cache: 数据内容不能被缓存, 每次请求都重新访问服务器, 若有max-age, 则缓存期间不访问服务器.

• no-store: 不仅不能缓存, 连暂存也不可以(即: 临时文件夹中不能暂存该资源)

• private(默认): 只能在浏览器中缓存, 只有在第一次请求的时候才访问服务器, 若有max-age, 则缓存期间不访问服务器.

• public: 可以被任何缓存区缓存, 如: 浏览器、服务器、代理服务器等

• max-age: 相对过期时间, 即以秒为单位的缓存时间.

• no-cache, private: 打开新窗口时候重新访问服务器, 若设置max-age, 则缓存期间不访问服务器.

private, 正数的max-age: 后退时候不会访问服务器

• no-cache, 正数的max-age: 后退时会访问服务器

点击刷新: 无论如何都会访问服务器.
Expires:

设置以分钟为单位的绝对过期时间, 优先级比Cache-Control低, 同时设置Expires和Cache-Control则后者生效.

以nginx配置为例：

   location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
 add_header Cache-Control public;
 add_header Cache-Control max-age=31536000;
}

如下图，则该图片在当前浏览器中未过期前，会一直读取缓，而不会发起新的请求；

image.png

设置 Expires

expires 指令可以控制 HTTP 应答中的“ Expires ”和“ Cache-Control ”的头标（起到控制页面缓存的作用）

语法：expires [time|epoch|max|pff]

默认值：off
expires指令控制HTTP应答中的“Expires”和“Cache-Control”Header头部信息，启动控制页面缓存的作用

• time:可以使用正数或负数。“Expires”头标的值将通过当前系统时间加上设定time值来设定。
  time值还控制"Cache-Control"的值：
  负数表示no-cache
  正数或零表示max-age=time

• epoch：指定“Expires”的值为 1 January,1970,00:00:01 GMT

• max:指定“Expires”的值为31 December2037 23:59:59GMT,"Cache-Control"的值为10年。
  -1：指定“Expires”的值为当前服务器时间-1s，即永远过期。

• off：不修改“Expires”和"Cache-Control"的值

expires使用了特定的时间，并且要求服务器和客户端的是中严格同步。
而Cache-Control是用max-age指令指定组件被缓存多久。
对于不支持http1.1的浏览器，还是需要expires来控制。所以最好能指定两个响应头。但HTTP规范规定max-age指令将重写expires头。

  # 设置30天过期时间
   location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
         expires 30d;
}