除 HTTP 缓存之外,Web 性能优化还有很多其他途径,比如预加载和预渲染、脚本异步载入等
缓存的原因
- 减少服务器负载
- 降低延迟,加速页面的载入
- 降低了用户的带宽,减少了流量消耗
- 减少了冗余的数据传输
缓存相关的字段
通用头cache-control
-
private:
表示仅UA可缓存,中间节点不允许缓存 -
public:
表示大家都可以缓存,响应可被任何中间节点缓存 -
no-cache:
表示不使用Cache-Control
的缓存控制方式做验证,而是使用ETag/Last-Modified
字段来控制缓存 -
no-store:
表示不缓存任何东西,浏览器会直接向服务器请求原始文件,并且请求中不附带ETag
参数(服务器认为是新请求) -
max-age:
表示当前资源的有效时间,单位为秒
request header
-
if-none-match:
浏览器在下一次发送请求时,会将上一次返回的Etag
值放到If-None-Match
里 -
if-modified-since:
浏览器在下一次发送请求时,会将上一次返回的last-modified
的值放到If-Modified-Since
里
response header
-
ETag:
只要资源有变化,就会重新生成ETag
-
Expires:
过期时间 -
last-modified:
资源最后一次更改时间
缓存过程详解
在我们第一次发送请求的时候,如果请求成功,服务器会返回资源以及状态码200,如果服务器没有关闭缓存,也会返回
ETag,Expires,Last_Modified
后续请求的时候,浏览器会根据
Expires/Cache-Control
来判断是否过期,区别就在于Expires
是http1.0的产物,Cache-Control
是http1.1的产物,两者同时存在的话,Cache-Control
优先级高于Expires
,Cache-Control
是为了解决Expires
时间差的问题而出现的,Expires:
描述的是一个绝对时间,根据的是客户端时间,如果客户端时间被更改,就会失效如果未过期,则命中强缓存,直接从本地读取,如果过期,则会判断
ETag/Last-Modified
是否存在,ETag
的优先级比Last-Modified
高,ETag
是为了解决一个缓存文件在短时间内被多次修改的问题,而Last-Modified
只能精确到秒如果有
ETag
, 则会将服务器上次返回ETag
赋值给if-none-match
,然后判断与服务器的ETag
是否一致,如果一致,则表示资源文件没有发生改变,命中协商缓存,服务器返回304,如果不一致,则返回新的ETag
,资源以及状态码200如果没有
ETag
, 则会将服务器上次返回last-modified
赋值给if-modified-since
,然后判断与最后一次的修改时间是否一致,如果一致,命中协商缓存,服务器返回304,如果不一致,则返回新的last-modified
,资源以及状态码200
参考文章推荐:
细说 HTTP 缓存机制