http协议入门之缓存

学习前端，http协议是我们绕不过去的一个坎，而http协议中的缓存则是重中之重。

知识储备

• 互联网协议入门
• 写给前端的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。

前端如何设置缓存

1.通过meta标签的http-equiv属性进行设置

<meta http-equiv="cache-control" content="no-cache, must-revalidate"><meta http-equiv="pragram" content="no-cache">

2.在ajax请求中通过setRequestHeaders这个方法设置

性能优化

前端性能优化里面有一条就是避免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不一样，所以就相当于请求了一个新文件，这样就实现了文件更新。

因为 304 请求相对于直接从缓存中读取多了一次请求，设置 max-age 后，就判断有没有过期，没有过期就不发送请求。如果过期了，就去服务器上验证一下数据有没有改变，没有改变就发送一个 304 请求，告诉浏览器直接读取缓存中的东西就行，我就不把文件发给你了。这样从结果上来看，都是从缓存中读取的文件，但是相对于 max-age 设置这种方式，多了一次 http 请求，性能优化里面有一条就是减少 http 请求，所以尽量用给文件添加版本号和 max-age 这种方式来处理缓存

原文链接：http://www.jianshu.com/p/6ffd3ae0e136