浏览器本地缓存

定义

缓存是性能优化中简单高效的一种优化方式。

和本地存储不一样，浏览器缓存是浏览器请求网站留下的资源副本。

好处

1. 减少带宽消耗
2. 提升性能
3. 缓解服务器压力

缓存位置

1. Service Worker
2. Memory Cache
3. Disk Cache
4. Push Cache

缓存策略

浏览器第一次向服务器发起请求拿到请求结果后，根据请求资源时返回的响应头来确定该不该缓存。

浏览器常见字段

• Expires：告知客户端资源缓存失效的绝对时间。
• Cache-Control：告知客户端或服务器如何处理缓存
  1. max-age=xxx：表示缓存内容将在缓存时间的xxx秒后失效
  2. no-cache：表示可以缓存，但每次用都要去向服务器验证缓存是否可用。
  3. no-store：表示所有内容都不会缓存。
  4. private：客户端可以缓存。
  5. public：客户端和代理服务器都可以缓存。默认值。
• Last-Modified：资源最后一次修改时间。
• Etag：文件的特殊标识。用于文件内容对比，判断内容是否修改。
• Cache-Control优先级高于Expires。
• Etag优先级高于Last-Modified。

强缓存

1. 根据本地缓存资源的header中的Expires和Cache-Control来判断是否命中强缓存。
2. 如果命中强缓存则返回缓存的数据。
3. 如果没有命中则进入协商缓存。

协商缓存

1. 如果没有命中强缓存，浏览器会将本地缓存资源的header中的Last-Modified和Etag的值分别放入请求头的IF-Modified-Since和IF-None-Match字段中，向服务器发送请求，由服务器根据请求中的相关header信息来对比结果是否命中协商缓存。
2. 若命中即资源未更新，则服务器返回新的响应header信息且返回的http状态为304，但是并不返回资源内容，它会显示一个Not Modified的字符串，来告知浏览器使用缓存。
3. 否则返回最新的数据，并将新数据存入缓存。

总结

当浏览器再次访问一个已经访问过的资源时，会

1. 先判断是否存在缓存，再看是否命中强缓存，如果命中，就直接使用缓存了。
2. 如果没有命中强缓存，就发请求到服务器检查是否命中协商缓存。
3. 如果命中协商缓存，服务器会返回 304。
4. 告诉浏览器使用本地缓存。
5. 否则，返回最新的资源。

拓展

ctrl+F5和F5的区别

F5只是刷新本地缓存，强缓存无效，协商缓存有效；ctrl+F5是强缓存与协商缓存均无效，重新向服务器请求。

禁止浏览器缓存方法

1. 设置响应头

//把Cache-Control设置为no-cache
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">

2. 在访问的url后添加一个参数，可以是随机数或者时间戳。这样url时刻在变化，就要重新发送http请求