学习前端,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
这种方式来处理缓存