Browser Caching 是浏览器将网络资源存储在本地的一种行为。 优点有:
可以看出,浏览器缓存与性能优化有着千丝万缕的联系。
听名字可以看出来,这两类缓存,一个属于细心的暖男,另一个则是强硬的霸道总裁。 我们先来了解一下浏览器缓存的过程:
先来看看这个霸道总裁好了。 强缓存主要利用Http Response Header中的两个字段来控制,分别是Expires和Cache-Control。
Expires的值是一个绝对时间的字符串,GMT格式,比如:Expires:Thu, 26 Jan 2017 23:39:02 GMT。这个时间表示的是该资源的有效期限,当请求处于这个时间之前时,均视为命中缓存。 缺点:因为这个时间表示的是资源过期的时间,所以当客户端和服务端有较大的时间偏差时,咳咳,情况就不妙了。
Cache-Control是HTTP1.1时出现的头信息,主要利用其max-age的值来进行判断,Cache-Control:max-age=1800,表明这个资源的有效期是1800秒,不难看出,和Expires不同,这是一个相对时间。
所谓协商缓存,就是协商嘛,这种情况下客户端和服务端地位是平等的,不像之前说的强缓存,服务端一个header字段,浏览器就要唯命是从。 准确的讲,
协商缓存是由服务端来确定缓存资源是否可用,这个情况下,需要客户端与服务端通过某种标识来进行通信,从而让服务端判断请求的资源是否可以通过缓存来访问。
这个过程涉及到两组字段(成对出现的字段):
上述1和2中的前者都是在第一次请求的响应头中存在的字段,后者则均存在于后续请求的请求Header中。 成对出现的表现在于:如果响应头中没有前者,则后续的请求头不会有后者。
当服务端接收到来自浏览器的第一个请求时,服务端在响应的头中会带上Last-Modified,是一个GMT的时间字符串,代表着该资源的最后修改时间,例如Last-Modified: Wed, 26 Jan 2017 00:35:11 GMT。 当浏览器再次请求相同的资源时,请求的头中会包含一个If-Modified-Since,这个值就是第一次请求该资源时返回的Last-Modified。服务端会拿这个字段的值和资源上次修改的时间进行对比,如果相同,则说明资源没有改变,即命中缓存,此时返回304,不会返回相应的资源和Last-Modified。
和上一对不同的是,这一对字段的值不是时间,而是一个校验码。Etag保证每个网络资源都是唯一的,资源变化都会导致Etag的变化。当服务端再次收到请求时,根据客户端上送的If-None-Match来进行判断,看是否命中协商缓存(过程与Last-Modified/If-Modified-Since相似)。 当两对字段一起使用时,Etag的优先级大于Last-Modified。