前端缓存之HTTP缓存

说真的，当自己还很小白的时候，明明修改了JS的内容了，但是就是没有加载成功，那时候感觉好神奇，好没道理。后来知道了这是因为缓存的原因。

说实话，现在基于各种框架的开发，基本上没有在业务代码过程中关注缓存的事情了，当然，不包括使用localstorage和cookie。今天自己学习了一些关于前端缓存的东西，不一定有什么特别的用，仅让自己知道缓存，说不定哪天就用上了。

前端分为HTTP缓存和浏览器缓存。HTTP缓存几乎没用过，也不知道有没有不经意间使用了，因为HTTP缓存主要是服务器代码上设置的。

HTTP第一次请求之后，服务器会在返回的头部传回缓存的参数。然后第二次请求的时候浏览器判断这些参数是什么缓存类型，相应的返回。

HTTP缓存有强缓存和协商缓存（也有人叫对比缓存）。

强缓存：

HTTP状态码是200，F5刷新和CTRL+F5刷新无效，强缓存一般用到两个key:

Expires:缓存过期时间，再次发起请求之后，浏览器会先判断是否在有效期之内，如果是就直接使用本地缓存，不会去请求。有一个缺点就是，有效期是服务器给的，不排除本地时间跟服务器有误差，本人认为这个误差可以忽略不计。

Cache-Control，优先级比expires高：有五个参数：

No-cache:缓存了数据，但是请求的时候直接绕过缓存向服务器请求，有些浏览器无效；

No-store：不存储缓存，比No-cache更粗暴；

Max-age：设置时效，在有效时间内直接使用，不去请求。

Public：客户端和服务端都能缓存；

Private：客户端可以缓存；

强缓存其实是比较推荐的，因为不会发起请求，那么应该有人会问，如果强缓存了，那么修改了怎么让客户端更新。其实很简单，给文件加hash值就会请求修改过的文件。

对比缓存（协商缓存）：HTTP状态码是304，是由服务器决定的，F5刷新有效，CTRL+F5刷新无效，对比缓存的key是成对出现的：

Last-Modify/If-Modify-Since: 响应端先返回一个last-modified时间，再次请求的时候 request头部会将缓存中的last-modified字段拿出来赋给if-modified-since，发送给服务器，服务器去判断时间是否过期，如未过期则返回304，告诉客户使用缓存数据，如果过期则重新返回一个last-modified并且返回200；

Etag/If-None-Match: 根据实体内容生成的一段hash字符串，可以标识资源的状态。 当资源发送改变时，ETag也随之发生变化。主要是为了解决根据时间无法解决的问题：比如文件修改频繁，导致根据时间无法判断是否更新等。

说了这么多，HTTP缓存跟前端有什么关系？确实，大部分HTTP缓存是由服务器完成，关于前端怎么操作的没查到相关的文档，只知道可以通过meta标签禁用缓存和动态设置header。

缓存对于前端的性能优化算是很大的，推荐使用强缓存，然后用hash值的方法消除强缓存的影响。

如果有人知道前端怎么去操作HTTP缓存，希望可以指教一下。

转载于:https://juejin.im/post/5c52c21b6fb9a049e12aa1e1