学习前端，http协议是我们绕不过去的一个坎，而http协议中的缓存则是重中之重。
知识储备
如果阅读完上面这3篇文章以后没有什么疑问的话，那么完全可以不用阅读接下来的内容，下面的内容主要是对这些知识做一个梳理。
缓存的执行过程
首先第一次请求，请求成功，服务器返回200，然后再次请求该文件。这时，首先要判断一下，缓存有没有被关闭，比如在cache中设置no-stroe，那么就在本地根本没有缓存，会再次重新请求这个文件，服务器也会重新发送，并返回200，请求结束。
如果缓存服务没有被关闭，那么我们就找到上次响应的响应头，然后检查cache-control的值，如果cache-control的值是maxage,则对maxage做一个判断，判断有没有超出缓存时间，如果没有超出，则不发出http请求，直接使用本地的资源，如果超出了，则再次发送请求，让服务器来判断资源是否一致，如果资源没有发生改变，则返回304状态码，告知浏览器直接使用缓存就行。如果cache-control等于no-cache，那么就直接进入服务器判断资源是否一致环节。
服务器用来判断资源是否一致有2种方式：
- 文件修改时间
- 文件资源
第一种就是通过if-modified-since和last-modified这2个属性来判断,第一次请求资源的时候响应端先返回一个last-modified时间字段，再次请求时候 request头部会将缓存中的last-modified字段拿出来赋给if-modified-since，发送给服务器，服务器去判断时间是否过期，如未过期则返回304，告诉客户使用缓存数据，如果过期则重新返回一个last-modified并且返回200。缺点是文件可能在1s内发生多次更改，结果不一定准确。
第二种则是靠if-none-match和etag，客户端第一次发送请求时候响应报文会包含字段Etag，表示资源状态，当资源改变后该值也会改变（客户端不必关心该值怎么生成），然后缓存保存下该字段，第二次已经有该缓存时候在浏览本地缓存时候会将该值赋给if-none-match字段发送给服务器，服务器将发送的值与当前的状态进行对比，如果值一样的话则答复304去使用缓存数据，如果值改变了则发送最新数据给客户端替代现有缓存数据，并且返回状态200。
前端如何设置缓存
- 通过meta标签的http-equiv属性进行设置
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
如果还有其他的设置方法，欢迎留言指教。
性能优化
前端性能优化里面有一条就是避免304请求，具体到我们这里就是设置一个特别长的max-age,比如将max-age设置为3140000，这样在文件没有发生变动的情况下，浏览器就不用发送请求，直接从本地取就行。当文件需要变动，比如发布新版本了，那么怎么办呢？
其实可以借用etag的思路，文件命名的时候在后面加上?ver=54,比如index.html?ver=54,这样，当浏览器再次请求index.html的时候，对应的url从index.html?ver=53变成了index.html?ver=54，因为请求的url不一样，所以就相当于请求了一个新文件，这样就实现了文件更新。
但是使用这种方法又会带来一个新的问题，比如发新版本的时候我只是改动了部分文件，然后使用这种加版本号的方式来更新文件，这样的话会导致其他没有改动的文件也会被重新加载。如何解决这个问题呢？其实我们可以用hash算法来解决这个问题，就是根据文件内容来生成一串hash值作为文件的名字，只有文件更新的时候才会更改这个hash值，至于hash值的生成，可以借助前端自动化工具，比如webpack等，这样就实现了只重新下载更新过的文件这个功能。
网友评论