缓存的好处：
① 使网页加载和呈现速度更快
② 减少不必要的数据传输，节省流量和带宽，减少服务器的负担

什么样的请求会被浏览器缓存？

一. 按缓存位置分类

缓存按位置可以分为：内存缓存（memory cache）、硬盘缓存（disk cache）、service worker

1. disk cache和memory cache

image.png image.png image.png

-	disk cache	memory cache
位置	硬盘	内存
控制权	服务端	浏览器
速度		更快
退出进程	缓存不会被清除，所以，当下次再进入该进程时，该进程仍可以从diskCache中获得数据	会被清除
截图	image.png	image.png

二. 按缓存策略分类

按缓存策略分类，浏览器的资源缓存可以分为：强缓存、协商缓存

• 强缓存不会向服务器发送请求，未过期就直接取缓存
• 协商缓存会向服务器发送请求，请求时会带上缓存中的etag或者last-modified值，以让服务器来判断资源是否被修改，未被修改则返回304，由浏览器从缓存中读取资源

1. 流程

未命名文件 (1).png

2. 浏览器如何判断是强缓存还是协商缓存？

缓存.jpg

强缓存	协商缓存
- image.png	- image.png

强缓存之cache-control

• no-cache：表示不使用强缓存，请求资源都要经过服务器确认。do-not-serve-from-cache-without-revalidation
• no-store：不使用缓存

以下情况，浏览器会按协商缓存机制进行缓存

• cache-control: max-age=0
• cache-control: no-cache
• cache-control: must-revalidate

3. 浏览器如何判断强缓存是否过期？

• max-age： 单位是秒，优先使用
• expires：绝对时间，表示缓存过期时间。当max-age不存在时使用这个判断

4. 服务端如何判断协商缓存的资源是否过期？

last-modified 和 etag是服务器设置到响应头中的，在请求时浏览器将缓存中的这2个字段放在if-modified-since和if-none-match中传给服务器，作为服务器判断资源是否修改的依据

• last-modified / if-modified-since：是一个时间点，精确度是秒级。服务器用传过来的值和当前资源的last-modified值作比较
• etag/ if-none-match：etag是资源的哈希值。服务器计算这个资源的哈希值，再和传过来哈希值作比较
• etag的优先级高于last-modified，因为etag更精确。比如：
  ① 资源修改时间是在ms级的话last-modified就不准确
  ② 资源可能last-modified变了，但内容未修改
  ③ 可能服务器也无法得到文件精确的last-modified
• 由于etag要服务器去计算资源的哈希值，所以使用etag的开销相比使用last-modified的方式更高

• 截图

  
  image.png

6. 常见问题

① 刷新网页后的缓存

• F5：跳过强缓存，仍可以使用协商缓存
• Ctrl+F5：直接从服务器加载资源，跳过强缓存和协商缓存

② 禁止浏览器不缓存静态资源

• 服务端设置请求的响应头：cache-control: no-cache, no-store, must-revalidate
• html中使用meta标签：<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />