前端面试浏览器系列：浏览器缓存
在最近的面试中，发现屡次被问到关于浏览器缓存的知识。毕竟缓存是前端性能优化中一个蛮重要的点，虽然我很懒，可是仍是打算抽出一些时间对知识点作了下整理，今天终于行动起来！css
什么是浏览器缓存
咱们知道，访问网页的时候，须要从服务器下载一些页面渲染所需的资源，好比html文档，css，js，图片等，有的资源是不多变更的，好比表明公司的logo图。若是把这些资源缓存下来，很天然减小了服务器的负载，并且页面加载时间也会缩短。 可是，要不要使用缓存，这个资源浏览器又要缓存多久，这些浏览器怎么知道？别急，这都是服务器控制的，http的返回头（ http response header ）中会有一些字段来控制，下面咱们来具体聊聊这些字段。html
浏览器缓存分类
一、强缓存
强缓存是利用 Expires 和 Cache-Control 这2个字段来控制的，控制资源缓存的时间，在有效期内不会去向服务器请求了。前端
- Expires Expires 的值为一个绝对时间，是GMT格式（GMT时间就是英国格林威治时间，GMT时间 = 北京时间 - 8小时）的时间字符串，指的是缓存的具体过时时间，它描述的是时刻，是一个时间点。
Expires: Wed, 25 Jul 2028 19:19:42 GMT
复制代码
表示资源会在2028-07-25 19:19:42后过时，到时候须要再次请求资源了。因为 Expires 是依赖于客户端系统时间，当修改了本地时间后，缓存可能会失效，因此通常状况，咱们认为使用 Cache-Control 是更好的选择。面试
- 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，向服务器询问该资源是否有更新。 - 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）。bash
用户的各类操做对缓存的影响
面试时候，有被问到用户进行一些操做的时候，对缓存是有什么影响的，以下。服务器
| 用户操做 | Expires/Cache-Control | Last-Modified/Etag |
|---|---|---|
| 地址栏回车 | ☑️ | ☑️ |
| 页面连接跳转 | ☑️ | ☑️ |
| 新开窗口 | ☑️ | ☑️ |
| 前进回退 | ☑️ | ☑️ |
| F5刷新 | ✖️ | ☑️ |
| Ctrl+F5强制刷新 | ✖️ | ✖️ |
后记
最近由于准备面试，因此打算整理下知识点，方便进行知识整理巩固，文中若有不正确的地方，烦请温柔的批评指正～
PS: 在这个2019年寒冬，我这个前端古力师，终于收获到满意的offer了。开心，下午看电影去了。晚点抽时间整理下，我以前为了面试准备的复习题目，和你们一块儿分享，共同进步！前端性能
参考资料
站在巨人的肩膀上，让我看的更远，谢谢如下文章的做者。
一、浏览器缓存，想说爱你不容易
二、网站优化：浏览器缓存控制简介及配置策略
-
每一个你不满意的现在，都有一个你没有努力的曾经。