一. 浏览器缓存机制介绍
浏览器缓存分为强缓存和协商缓存2种方式。
1) 强缓存 Cache-Control:max-age / Expires
2) 协商缓存 Last-Modified/ETag
A. Last-Modified/If-Modified-Since
B. ETag/If-None-Match
Last-Modified与ETag比较
A、B两种协商缓存方案相比而言，应该优先选择ETag方案，原因如下：
1.Last-Modified的值精确到秒，精确度不高；
2.Last-Modified方案即使文件相同，只要修改时间发生变化，都会再次请求该资源，而不是缓存读取；而ETag是后端根据文件内容生成的，只要文件相同，ETag值即相同，缓存策略更佳；
二. 前端常用的项目缓存方案
a.强缓存与协商缓存结合的缓存方案：
1.对于HTML文档配置协商缓存，只在有变更的情况加载新资源；
2.对JS、CSS、图片等资源配置强缓存
b.都配置强缓存，但是根据文件类型差异化配置缓存时间：
1.对HTML文档配置一个较短的过期时间；
2.对JS、CSS、图片等资源配置一个较长的过期时间，这样HTML会定期更新，一旦HTML文档内部有更新，页面所依赖的其他资源也会随之更新；
三.缓存配置注意事项
Cache-Control
是 HTTP1.1 中控制网页缓存的字段，主要取值为：
•public：资源客户端和服务器都可以缓存
•privite：资源只有客户端可以缓存
•no-cache：使用协商缓存（别理解成不缓存哦）
•no-store：不使用缓存
•max-age：缓存保质期，是相对时间
Expires
是HTTP1.0控制网页缓存的字段，值是一个时间戳，服务器返回该资源缓存的到期时间。但 Expires 有个缺点，就是它判断是否过期是用本地时间来判断的，本地时间是可以自己修改的，所以到了HTTP/1.1，Expire 已经被 Cache-Control 替代，Cache-Control 使用了max-age相对时间，解决了Expires 的缺陷
*当 Cache-Control 与 expires 两者都存在时，Cache-Control 优先级更高。
协商缓存的触发条件：
•Cache-Control 的值为 no-cache （协商缓存）
•或者 Cache-Control: max-age=0
memory cache 与 disk cache 的区别
两者都属于强缓存，主要区别在于存储位置和读取速度上：
1、memory cache 表示缓存来自内存， disk cache 表示缓存来自硬盘
2、memory cache 要比 disk cache 快的多！从磁盘访问可能需要5-20毫秒，而内存访问只需要100纳秒甚至更快
•memory cache 特点： 当前tab页关闭后，数据将不存在（资源被释放掉了），再次打开相同的页面时，原来的 memory - cache 会变成 disk cache
•disk cache 特点： 关闭tab页甚至关闭浏览器后，数据依然存在，下次打开仍然会是 from disk cache
一般情况下，浏览器会将js和图片等文件解析执行后直接存入内存中，这样当刷新页面时，只需直接从内存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)
