浏览器缓存

1、强缓存 

强缓存是利用 Expires 和 Cache-Control 这2个字段来控制的，控制资源缓存的时间，在有效期内

• Cache-Control 给 Cache-Control 设置 max-age ，表示缓存的最长时间是多少秒，定义的是时间的长短，它描述的是时间，表示的是一段时间间距，是一个相对时间。比如我想设置这个资源有效时间是3天，那么 max-age 的值就是259200（3 * 24 * 60 * 60 = 259200）。

Cache-control: max-age=259200

表示资源3天后过期，需要向服务器再次请求资源了。

Cache-Control 与 Expires 可以在服务端配置同时启用，也就是说在 response header 中，Expires 和Cache-Control 是可以同时存在，当它们同时启用的时候Cache-Control 优先级更高。

(前端无法控制)

协商缓存

协商缓存是由服务器来确定缓存资源是否可用，当然了，需要服务器和客户端一起配合。服务器可在 response header 中包含Last-Modified字段或者ETag字段。

• Last-Modified / If-Modified-Since
  Last-Modified 表示被请求资源在服务器端的最后一次修改时间，当再次请求该资源的时候，浏览器的request header中会带上If-Modified-Since，向服务器询问该资源是否有更新。

1. ETag/If-None-Match
   每次文件修改后服务端那边会生成一个新的 ETag ，是一个唯一文件标识符，当再次请求该资源时候，浏览器的request header中会带上If-None-Match ，这值就是之前返回的ETag ，把这个值发送到服务器，询问该资源 ETag 是否变动，有变动的话，说明该资源版本需要更新啦，客户端不能继续用缓存里的数据了。

总结：

浏览器会根据 http response header 中的 Expires 和cahe-control 字段判断是否命中强缓存，如若命中，则直接从缓存中取资源，不会再去向服务器请求了。否则（没有命中强缓存），浏览器会发出一个条件请求，浏览器会在请求头中包含 If-Modified-Since 或 If-None-Match 字段，If-Modified-Since 即浏览器当初得到的 Last-Modified；If-None-Match即浏览器当初得到的 ETag。当服务器发现资源的更新时间晚于 If-Modified-Since 所提供的时间，或者资源在服务器端当前的 ETag 和 If-None-Match 提供的不符时，说明该资源需要向服务器重新请求了。否则，浏览器将不需要重新下载整个资源，只需要从缓存中去加载这个资源，这时响应的http code 为 304（304 Not Modified）。

用户行为对缓存的影响

用户操作	Expires/Cache-Control	Last-Modified/Etag
地址栏回车	☑️	☑️
页面链接跳转	☑️	☑️
新开窗口	☑️	☑️
前进回退	☑️	☑️
F5刷新	✖️	☑️
Ctrl+F5强制刷新	✖️	✖️

 x  代表无效 √ 有效

浏览器缓存的优点有：

1. 减少了冗余的数据传输，节省了网费
2. 减少了服务器的负担，大大提升了网站的性能
3. 加快了客户端加载网页的速度

在前端开发面试中，浏览器缓存是web性能优化面试题中很重要的一个知识点，从而说明浏览器缓存是提升web性能的一大利器，但是浏览器缓存如果使用不当，也会产生很多问题，正所谓是，想说爱你，并不是很容易的事。     

站在巨人的肩膀上看的更远 原文链接：https://www.cnblogs.com/depsi/p/5579648.html