Web前端基础篇-HTML5-07-浏览器缓存机制

缓存是性能优化的方式之一，浏览器缓存可以减少请求次数，减少带宽，缩短请求资源的距离，那么今天我们就来聊聊浏览器缓存的那些事情。

tmpdir__17_9_7_15_04_07.jpg

温馨提示：文章结构如下，阅读完可能需要花费7分钟

一、浏览器器缓存的存放位置以及查找优先级；

二、浏览器缓存过程分析；

三、浏览器缓存的策略；

四、浏览器缓存的使用场景；

五、用户那些行为影响缓存；

进入正文

一、浏览器器缓存的存放位置以及查找优先级；

浏览器缓存是协议层缓存，存放的位置主要有4个：

• A.Service Worker
  浏览器背后的独立线程
  必须为 HTTPS
  控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性

• B.Memory Cache - 内存中的缓存
  包含的是当前中页面中已经抓取到的资源比如js/ css / 图片等
  读取高效，但是持续时间短，关闭页面就没有啦；

• C.Disk Cache - 硬盘缓存
  读取速度慢， 但是空间大
  持续存储，没有删除就有

• D.Push Cache - 推送缓存 - 使用比较少

查找优先级：A ---> B---->C ----> D

二、浏览器缓存过程分析；

image.png

1.浏览器发起请求，先在浏览器缓存中查找该请求的结果以及缓存标识，如果找到就结果-over；

2.如果没有找到缓存结果与缓存标识，直接发起HTTP请求

3.如果返回缓存结果失效，只返回缓存标识，携带缓存标识，发起HTTP请求；

4.请求返回304，资源没有更新，则获取缓存结果- over;

5.请求返回200，资源更新啦，返回请求结果与缓存标识，同时将结果和标识放入缓存中 - over

三、浏览器缓存的策略；

缓存有2个策略：强缓存与协商缓存，一般常用都是强缓存 + 协商缓存
缓存策略的实现方案：通过设置HTTP Header 实现

3.1 强缓存

• 不会向服务器发送请求，直接从缓存中读取资源

• 从from disk cache、from memory cache 获取资源

实现方式：设置两种 HTTP Header 实现：Expires 和 Cache-Control

打开谷歌浏览器的network调试，很容易找到强制缓存的数据

image.png

3.1.1 Expires-缓存过期时间

• Expires=max-age + 请求时间，需要和Last-modified结合使用
• 用于控制文件在本地缓存有效时长
• Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效

3.1.2 Cache-Control-缓存控制

• 用于控制文件在本地缓存有效时长
• Cache-Control优先级高于Expires
• 参数配置说明：
  public：所有内容都将被缓存（客户端和代理服务器都可缓存）
  private：所有内容只有客户端可以缓存，默认值
  no-cache：客户端缓存内容，是否使用缓存则需要经过协商缓存来验证决定
  no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
  max-age：max-age=xxx (xxx is numeric)表示缓存内容将在xxx秒后失效
  s-maxage的优先级高于max-age
  max-stale：能容忍的最大过期时间
  min-fresh：能够容忍的最小新鲜度

3.2 协商缓存
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，根据服务返回304或者200判断资源是否更新，是否返回新的资源和缓存标识，存在两种情况：

• 情况A : 浏览器缓存失效之后，返回缓存标识，HTTP携带缓存标识请求，返回304，资源没有更新，直接返回浏览器缓存的数据

• 情况B：浏览器缓存失效之后，返回缓存标识，HTTP携带缓存标识请求，返回200，资源已经更新，请求返回资源和缓存标识

实现方式：通过设置 HTTP Header 来实现：Last-Modified 和 ETag

3.2.1LastModifed与If-Modified-Since-服务器上的最后修改时间

1.浏览器第一次访问资源A，返回资源同时在header返回last-modified, 浏览器缓存资源与last-modify

2.浏览器再次访问资源A，浏览器检查到存在last-modifyed,于是浏览器header 增加If-Modified-Since字段，值=last-modify值开始请求

3.服务器收到请求后，判断 If-Modified-Since 的值与服务器的修改时间对比，无变化返回304 + 空的reponse 如果有变化 返回200 + 变化后的资源

3.2.2ETag和If-None-Match
1.第一次请求，服务器生成etag(唯一标识)，资源变化从新生成，返回给浏览器

2.浏览器接收到响应在header中通过If-None-Match = etag值保存

3.再次请求，服务端比较etag, 如果无变化 返回304 + 空响应 如果变化 返回 200 + 资源

3.2.3两种方式比较

1. etag的精度 > lastmodifyed
2. etag的性能 < lastmodifyed
3. 服务器校验优先选择etag

四、浏览器缓存的使用场景

1.频繁变动的资源

Cache-Control: no-cache

2.不常变化的资源

Cache-Control: max-age=31536000(1年)

五、用户那些行为影响缓存

1. 手动刷新页面（F5)，浏览器会直接认为缓存已经过期（可能缓存还没有过期），在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新

2.强制刷新页面（Ctrl+F5)，浏览器会直接忽略本地的缓存（有缓存也会认为本地没有缓存），在请求中加上字段：Cache-Control:no-cache（或 Pragma:no-cache），发包向服务重新拉取文件

3.打开网页，地址栏输入地址： 查找 disk cache 中是否有匹配。如有则使用；如没有则发送网络请求

H5系列
Web前端基础篇-HTML-01-BOM浏览器对象模型
Web前端基础篇-HTML-02-HTML的生命周期
Web前端基础篇-HTML-03-事件处理系统
Web前端基础篇-HTML-04-HTML 渲染流程
Web前端基础篇-HTML5-05-最全本地存储总结
Web前端基础篇-HTML5-06-离线缓存AppCache
Web前端基础篇-HTML5-07-浏览器缓存机制