浏览器缓存
第一次请求是直接请求服务器资源,然后根据返回的响应header来决定资源是否缓存,返回的响应头可能有这些数据: Expires,Cache-control,Etag,LastModified等。
第二次请求:
- 检查本地是否有缓存资源,判断缓存资源是否过期,如果未过期直接从缓存中获取
- 如果已经过期,则进行下一步的判断
- 首先判断Etag,是否资源被修改,如果未被修改,则下一步判断Last-modified,根据这个响应头判断资源是否被修改。
- Etag判断资源过期之后,直接给服务器发送一个携带If-None-Match的请求头进行协商请求,根据服务器返回响应,最后决定是否从缓存中获取资源。Last-modified判断资源被修改之后,也同样会携带一个If-Modified-since的请求头进行协商请求
- 如果向服务器发送了协商请求,则服务器会返回对应的状态码,200表示直接从服务器返回资源,304则是告诉浏览器直接从缓存中获取对应资源。
强缓存:
直接从本地缓存中进行获取资源,请求没有发出去。
什么时候浏览器执行强缓存?
response Header中有以下属性来判断强缓存:
expires,这是http1.0规范
浏览器通过expires来判断缓存是否过期,expires代表的是过期时间,超过这个时间发请求,则不会走本地缓存,会向浏览器发请求。
cache-control 是http1.1规范,
浏览器会根据max-age值判断缓存是否过期,如果过期则会重新向服务器发送请求,否则会直接在本地获取缓存数据。
cache有以下属性值:最常用给的是max-age属性。
private:客户端可以缓存
public:客户端和代理服务器均可缓存;
max-age=xxx:缓存的资源将在 xxx 秒后过期;
no-cache:需要使用协商缓存来验证是否过期;
no-store:不可缓存
一般来说,为了兼容,两个版本的强制缓存都会被实现。
协商缓存:
先去浏览器拿,浏览器告诉你是否需要从缓存中拿,如果命中,会返回304,从缓存中拿到数据,否则浏览器会返,请求发出去了。
response Header中有以下属性来判断协商缓存,
Last-Modified和If-Modified-Since http1.0版本
当第一次浏览器请求的时候,服务器会返回一个Last-Modified,代表资源的最后修改的时间,
当浏览器再次请求相同的路径资源的时候,回到一个请求头If-Modified-Since,这个值即为上一次服务器返回的Last-Modified,
服务器拿到If-Modified-Since与资源的最后修改时间做对比,如果不同,则会返回新的资源,并会返回新的Last-Modified,否则,服务器会返回304,并且不会在再返回新的Last-Modified,。
Etag/If-None-Match http1.1版本
这个判断过程与Last-Modified和If-Modified-Since类似
Last-Modifued/If-Modified-Since和Etag/If-None-Match这两组搭档都是成对出现的,即第一次请求的响应头带上某个字段(Last-Modifued或者Etag),则后续请求会带上对应的请求字段(If-Modified-Since或者If-None-Match),若响应头没有Last-Modifued或者Etag字段,则请求头也不会有对应字段