http缓存

http缓存

有时候为了页面加载快，咱们须要让一部分资源默认缓存在本地，这样不用每次都进行请求。但如果发布也被缓存下来，这样就很尴尬了，原本已经更新了，却依旧显示上一次的，这样就不合理了

各类类型的缓存

• 私有缓存 [local (private) cache]
  • 只能用于单独用户 (eg: 浏览器设置中的“缓存”选项。浏览器缓存拥有用户经过 HTTP 下载的全部文档。)
• 共享缓存 [shared cache]
  • 共享缓存能够被多个用户使用 (eg: ISP 或你所在的公司可能会架设一个 web 代理来做为本地网络基础的一部分提供给用户。这样热门的资源就会被重复使用，减小网络拥堵与延迟。)

缓存操做的目标

常见的HTTP缓存只能存储GET响应，对于其余类型的响应无能为力

缓存控制

• Cache-control 头

  HTTP/1.1定义的 Cache-Control 头用来区分对缓存机制的支持状况， 请求头和响应头都支持这个属性。经过它提供的不一样的值来定义缓存策略

  • 缓存请求指令 [客户端]

    Cache-Control: max-age=<seconds>
      Cache-Control: max-stale[=<seconds>]
      Cache-Control: min-fresh=<seconds>
      Cache-control: no-cache 
      Cache-control: no-store
      Cache-control: no-transform
      Cache-control: only-if-cached

  • 缓存响应指令 [服务端]

    Cache-control: must-revalidate
      Cache-control: no-cache
      Cache-control: no-store
      Cache-control: no-transform
      Cache-control: public
      Cache-control: private
      Cache-control: proxy-revalidate
      Cache-Control: max-age=<seconds>
      Cache-control: s-maxage=<seconds>

  • 指令解读
    • 可缓存性
      • public 代表响应能够被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存
      • private 代表响应只能被单个用户缓存，不能做为共享缓存（即代理服务器不能缓存它）,能够缓存响应内容
      • no-cache 在发布缓存副本以前，强制高速缓存将请求提交给原始服务器进行验证
      • only-if-cached 代表客户端只接受已缓存的响应，而且不要向原始服务器检查是否有更新的拷贝
    • 到期
      • max-age=<seconds> 设置缓存存储的最大周期，超过这个时间缓存被认为过时(单位秒)。与Expires相反，时间是相对于请求的时间
      • s-maxage=<seconds> 覆盖max-age 或者 Expires 头，可是仅适用于共享缓存(好比各个代理)，而且私有缓存中它被忽略
      • max-stale[=<seconds>] 代表客户端愿意接收一个已通过期的资源。 可选的设置一个时间(单位秒)，表示响应不能超过的过期时间
      • min-fresh=<seconds> 表示客户端但愿在指定的时间内获取最新的响应
    • 从新验证和从新加载
      • must-revalidate 缓存必须在使用以前验证旧资源的状态，而且不可以使用过时资源
      • proxy-revalidate 与must-revalidate做用相同，但它仅适用于共享缓存（例如代理），并被私有缓存忽略
    • 其余
      • no-store 缓存不该存储有关客户端请求或服务器响应的任何内容
      • no-transform 不得对资源进行转换或转变 (Content-Encoding, Content-Range, Content-Type等HTTP头不能由代理修改)
    • 示例

      • 禁止缓存

        Cache-Control: no-cache, no-store, must-revalidate

      • 缓存静态资源

        // 图像，CSS文件和JavaScript文件
          Cache-Control:public, max-age=31536000

• 禁止进行缓存

  Cache-Control: no-store

• 强制确认缓存
  每次有请求发出时,该请求应该会带有与本地缓存相关的验证字段发到服务器，服务器端会验证请求中所描述的缓存是否过时，若为过时（返回 304），则缓存才使用本地缓存副本。

  Cache-Control: no-cache

• 私有缓存和公共缓存
  • private 通常应用于浏览器私有缓存
  • public 能够被任何中间人（eg: 中间代理， cdn等）缓存
• 缓存过时机制
  • max-age=<seconds> 资源可以被缓存的最大时间, 是距离请求发起的时间的秒数

  • Expires 响应头包含日期/时间， 即在此时候以后，响应过时。 如今基本不使用了

    若是在Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令，那么 Expires 头会被忽略。

    // http-date: 一个 HTTP-日期 时间戳 (eg: Wed, 21 Oct 2015 07:28:00 GMT)
      Expires: <http-date>

• 缓存验证确认 must-revalidate

  那就意味着缓存在考虑使用一个陈旧的资源时，必须先验证它的状态，已过时的缓存将不被使用

• Pragma 头 是HTTP/1.0标准中定义的一个header属性 (等同于 Cache-Control: no-cache),可是HTTP的响应头不支持这个属性

解决方案

实现方案

• 新鲜度
• 加速资源

• 实现方案

• 前端设置
  • 添加时间戳 [get请求] (eg: index.css?v=Date.now())
  • 请求头设置
• 服务端设置【基于 Apache/2.4.39】 参考
  1. 找到 httpd.conf
  2. 搜索到下面两个，同时去掉#

  LoadModule expires_module modules/mod_expires.so
  LoadModule headers_module modules/mod_headers.so

  1. 文本后添加
  • expire 开启

  <IfModule expires_module>
  
    #打开缓存
    ExpiresActive on 
    #css文件缓存7200000/3600/24=83天
    ExpiresByType text/css A7200000
  
    #js文件缓存83天
    ExpiresByType application/x-javascript A7200000
    ExpiresByType application/javascript A7200000
  
    #html文件缓存83天
    ExpiresByType text/html A7200000
  
    #图片文件缓存83天
    ExpiresByType image/jpeg A7200000
    ExpiresByType image/gif A7200000
    ExpiresByType image/png A7200000
    ExpiresByType image/x-icon A7200000
  
  </IfModule>

  • Cache-Control

  <FilesMatch "\.(flv|gif|jpg|jpeg|png|ico|swf)$">
  　　Header set Cache-Control "max-age=604800, public"
  </FilesMatch>
  
  <FilesMatch "\.(css|js)$">
  　Header set Cache-Control "max-age=604800, public"
  </FilesMatch>

  1. 重启apache

  注意：如果报\xe3\x80\x80（空格的问题）在对应行清除空格便可

总结

• 这个依旧没有我想象的那般随意，也觉得着，须要先后一块儿整，而不是单纯依靠前端便可
• 上述找了大量资料，如有不当不处还请谅解