http缓存指的是,当客户端向服务器发起请求的时候,首先会到达浏览器缓存,如果浏览器缓存中存在请求的资源,则直接从浏览器缓存中返回资源。一般http缓存指的是GET请求方式,其他请求方式不能缓存。
http缓存一般都是从第二次请求开始,第一次请求时,服务器返回资源以及资源的相关参数,第二次发起请求 ,浏览器会根据发起请求的参数,判断是否命中缓存,如果命中强缓存,则直接返回200状态码,直接使用浏览器缓存的资源,否则,浏览器会将请求参数发送给服务器,服务器根据第一次返回资源的参数和浏览器第二次请求的参数对比,判断是否命中协商缓存,如果命中协商缓存,则返回304状态码,告诉客户端可以使用浏览器缓存的资源。如果都不命中,服务器则返回最新的资源。
强缓存与协商缓存
根据是否向服务器重新发起请求,可以将http分为强缓存和协商缓存。强缓存生效,不需要再和服务器发送交互,而协商缓存,不管是否生效,都会与服务器发送交互。
对比
区别 | 强缓存 | 协商缓存 |
---|---|---|
缓存位置 | 本地浏览器 | 本地浏览器 |
http状态码 | 200 | 304 |
http头属性 | 1、Pragma 2、Cache-Control 3、Expires | 1、ETag/If-Not-Match 2、Last-Modified/If-Modified-Since |
强缓存
强缓存在缓存数据未失效的情况下(即Cache-Control的max-age没有过期或者Expires的缓存时间没有过期),那么就会直接使用浏览器的缓存数据,不会再向服务器发送任何请求。强制缓存生效时,http状态码为200。这种方式页面的加载速度是最快的,性能也是很好的,但是在这期间,如果服务器端的资源修改了,页面上是拿不到的,因为它不会再向服务器发请求了。
header属性 | 可选值 | 优先级 | 优缺点 |
---|---|---|---|
Pragma(HTTP/1.0) | no-cache:不直接使用缓存,根据新鲜度使用缓存 | 高 | 1、响应头不支持这个属性 2、为了兼容HTTP/1.0客户端 3、在HTTP1,1中已被废弃 |
Cache-Control(HTTP/1.1) | 1、no-cache:不直接使用缓存,根据新鲜度使用缓存 2、no-store:不使用缓存,每次都是请求下载新资源 3、max-age:缓存时长 4、public/private:是否只能被单个用户使用,默认为private 5、must-revalidate:每次访问需要缓存校验 | 中 | 1、请求头和响应头都支持这个属性 2、不适用HTTP1.0 3、在缓存未失效时,获取不到修改后的资源 |
Expires(HTTP/1.0+) | GMT时间 | 低 | 1、服务器和客户端时间不一致会出现问题 2、适用于HTTP1.0和HTTP1.1 3、在缓存未失效前,获取不到修改后的资源 |
协商缓存
客户端发起第一次请求时服务器返回响应头没有设置Cache-Control和Expires或者设置不缓存又或者设置时间过期,第二次请求就会与服务器进行协商,查看相关资源是否修改更新,若无,则直接返回304状态码,若有修改更新,则返回最新资源和200状态码。
header属性 | 可选值 | 优先级 | 优缺点 |
---|---|---|---|
ETag/If-Not-Match(HTTP/1.1) | 校验值 | 高 | 1、默认使用hash算法,在分布式环境下可能会出现不同服务器生成的Tag值不一致 2、精确的判断资源有无被修改,可识别一秒内的修改次数 3、计算ETag需要性能消耗 |
Last-Modified/If-Modified-Since(HTTP/1.0) | GMT时间 | 低 | 1、只要资源修改,无论内容有无变化,都会将资返回给客户端 2、以时刻为标识,无法获取一秒内的修改变化 3、某些服务器不能准确获取最后修改时间 |
私有缓存(浏览器缓存)
私有缓存只能用于单独的用户:Cache-Control: Private
共享缓存(代理级缓存)
共享缓存可以被多个用户使用: Cache-Control: Public
http缓存的好处
- 减少冗余的数据传输,节省了网费
- 缓解了服务器压力,大大提高了网站的性能
- 加快客户端的加载网页的速度
使用http缓存
一般需要缓存的资源有html页面和其他静态资源:
html页面缓存
html页面缓存的设置主要是在<head>标签中嵌入<meta>标签,这种方式只对页面有效,对页面上的资源无效
html页面禁用缓存:
<meta http-equiv="pragma" content="no-cache">
// 仅有IE浏览器才识别的标签,不一定会在请求字段加上Pragma,但的确会让当前页面每次都发新请求
<meta http-equiv="cache-control" content="no-cache">
// 其他主流浏览器识别的标签
<meta http-equiv="expires" content="0">
// 仅有IE浏览器才识别的标签,不一定会在请求字段加上Pragma,但的确会让当前页面每次都发新请求
<meta http-equiv="cache-control" content="no-cache">
// 其他主流浏览器识别的标签
<meta http-equiv="expires" content="0">
html页面设置缓存:
<meta http-equiv="Cache-Control" content="max-age=7200" />
// 其他主流浏览器识别的标签
<meta http-equiv="Expires" content="Mon, 20 Aug 2018 23:00:00 GMT" />
// 仅有IE浏览器才识别的标签
// 其他主流浏览器识别的标签
<meta http-equiv="Expires" content="Mon, 20 Aug 2018 23:00:00 GMT" />
// 仅有IE浏览器才识别的标签
静态资源缓存
静态资源的缓存一般是在web服务器上配置的,常用的web服务器有:nginx、apache。