我发现我每次写博客都不太会开头，这里从网络请求三步骤开始吧：请求、处理、响应。
前端缓存主要是在“请求”和“响应”中进行。在请求步骤中，浏览器通过缓存能减少发送请求次数；在响应步骤中，浏览器和服务器相互配合，通过减少响应的内容从而减少传输时间
缓存位置优先级由上至下：
Service worker
memory cache
disk cache
网络请求：
从Chrome开发者工具的Network —> size一栏可以看到请求处理方式：
- 如果是显示数字，几k或者几M，则是表示是从网络传输的
- 其他的则是from ServiceWorker，from memory cache，from disk cache
Service worker：是浏览器在后台独立于网页运行的脚本，类似于一个中间人，浏览器发出的请求都会被Service Worker拦截并被它处理。当有Service Worker时，浏览器会优先从Service Worker读取缓存。
memory cache是短期存储，页面刷新时通常是从内存中获取缓存；页面关闭，缓存就失效了，从内存中获取缓存比从硬盘中获取速度快。几乎所有的请求资源都能进入memory cache。浏览器为了加快读取缓存速度而进行的自身的优化行为，不受开发者控制也不受HTTP协议的约束。
从memory cache获取缓存内容时，浏览器会忽视max-age=0,no-cache等头部配置，如果完全不想让一个资源进入缓存，需要使用no-store。
disk cache是存在硬盘中的缓存，当页面关闭后再次打开时读取的就是硬盘缓存。
disk cache（HTTP cache）包括强制缓存（强缓存）和协商缓存（对比缓存）：首先进行强制缓存，如果强缓存失效，需要使用对比缓存，由服务器决定缓存内容是否失效。
强制缓存：
当命中强制缓存时，浏览器不会去请求服务器，而是直接使用本地缓存资源，并返回200
强制缓存直接减少请求数，是提升最大的缓存策略
是否命中强制缓存是由头中的expires和cache-control控制的。
1、 expires是HTTP1.0时的标准，是表示服务器的过期时间，是格林威治时间，绝对时间。当请求的时候客户端的时间超过expires标识的时间时就会去请求服务器。
2、 但是expires存在的问题是：当用户手动修改了这个时间就会有问题
3、 Cache-control是HTTP1.1的产物，可以看作expires的补充
4、 判断缓存是否过期的步骤：看是否有cache-control的max-age；如果没有则用expires作为过期时间比较
Cache-control常用值：
- Max-age：缓存的最大有效时间，会覆盖expires。不经常更新的资源一般会设置一个很大的值，例如：3453600。
- S-maxage：如果该值存在，则会优先使用它作为CDN的缓存时间
- Public：表明响应可以被任何对象包括客户端、服务器缓存
- Private：只能是发起请求的浏览器进行缓存
- No-cache：仍然对资源使用缓存，每一次在使用缓存之前必须向服务器对缓存资源进行验证
- No-store：所有内容都不会被缓存，即不是用强制缓存也不使用协商缓存
- Must-revalidate：如果配置了max-age，如果超过max-age的时间，即需要对资源的有效性进行验证
max-age=0和no-cache在浏览器反应上是没有差别的，两者的区别在于：
max-age=0在语义上被理解为：到期应该（should）重新验证
no-cache：必须（must）重新验证
协商缓存：
需要与服务器协商是否使用缓存，命中协商缓存会返回304
协商缓存由响应头中的Last-Modified和ETag + 请求头中的If-Modified-Since和If-None-Match控制
优化点在于：响应体积上的节省，通过减少响应体体积来缩短网络传输时间。对比缓存在请求数上和没有缓存是一样的，但是如果是304返回的仅仅是一个状态码，没有实际的内容
Response：Last-Modified + Request：If-Modified-Since
服务器通过传回Last-Modified这个数据告诉浏览器资源最后一次被修改的时间
浏览器将这个Last-Modified值和资源存到缓存数据库中，当再次请求相同的资源时浏览器会将上次Last-Modified值写入到If-Modified-Since中传回服务器，服务器通过对比Last-Modified和If-Modified-Since两个值是否一致，如果一致就返回304，表示资源未被修改；如果两个值不一致说明服务器中该资源被更新，则返回200和新的资源
Response：ETag + Request：If-None-Match
整个流程同（Response：Last-Modified + Request：If-Modified-Since）只不过ETag是文件的特殊标识，由服务器生成。
ETag的优先级高于Last-Modified。同理，服务器也会优先验证If-None-Match
补充一个 CDN缓存：
CDN（Content Delivery Network）内容分发网络
采取与强制缓存相似的机制，把CDN看成是浏览器，把源服务器看成是浏览器需要请求的服务器，此时，源服务器的max-age头决定了资源在CDN节点本地缓存的时间，如果s-maxage存在，则会优先使用s-maxage
参考文章：
原文地址：https://www.cnblogs.com/ningyn0712/p/11929408.html