http缓存

492 阅读5分钟

http缓存指的是,当客户端向服务器发起请求的时候,首先会到达浏览器缓存,如果浏览器缓存中存在请求的资源,则直接从浏览器缓存中返回资源。一般http缓存指的是GET请求方式,其他请求方式不能缓存。

http缓存一般都是从第二次请求开始,第一次请求时,服务器返回资源以及资源的相关参数,第二次发起请求 ,浏览器会根据发起请求的参数,判断是否命中缓存,如果命中强缓存,则直接返回200状态码,直接使用浏览器缓存的资源,否则,浏览器会将请求参数发送给服务器,服务器根据第一次返回资源的参数和浏览器第二次请求的参数对比,判断是否命中协商缓存,如果命中协商缓存,则返回304状态码,告诉客户端可以使用浏览器缓存的资源。如果都不命中,服务器则返回最新的资源。

强缓存与协商缓存

根据是否向服务器重新发起请求,可以将http分为强缓存和协商缓存。强缓存生效,不需要再和服务器发送交互,而协商缓存,不管是否生效,都会与服务器发送交互。

对比

区别强缓存协商缓存
缓存位置本地浏览器本地浏览器
http状态码200304
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缓存的好处

  1. 减少冗余的数据传输,节省了网费
  2. 缓解了服务器压力,大大提高了网站的性能
  3. 加快客户端的加载网页的速度

使用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">

html页面设置缓存

<meta http-equiv="Cache-Control" content="max-age=7200" />
// 其他主流浏览器识别的标签
<meta http-equiv="Expires" content="Mon, 20 Aug 2018 23:00:00 GMT" />
// 仅有IE浏览器才识别的标签

静态资源缓存

静态资源的缓存一般是在web服务器上配置的,常用的web服务器有:nginx、apache。