常用到的缓存有:浏览器缓存,DNS缓存,服务器缓存。总结下前端优化中常用到的浏览器缓存。
expires和cache-control用于本地缓存,Last-Modified和Etag用于协商缓存。
expires是http1.0定义的,是一个具体的日期时间,使用时,需要服务器和PC时钟同步,cache-control是http1.1定义的,是一个相对时间,相对时间就不必要求时钟同步了。cache-control的max-age是一个秒数,若与expires同时存在,则cache-control生效。若判断本地缓存没有过期,会直接从缓存读取,不发送新的请求。若缓存过期,重新请求。
Last-Modified和Etag用于判断服务器文件是否有更新。Last-Modified是一个具体日期时间,Etag是一个字符串。请求头中与之相对应的是If-Modified-Since和If-None-Match。Etag比Last-Modified更精细。首次请求没有对应信息,之后的请求,到服务器端会判断,若标识相同,说明文件没有更改,返回304,浏览器接收到304会从缓存中读取,缓存命中;若有更改,将返回新资源。
若用户使用F5刷新页面,无论expires和cache-control是否过期,都不会生效,但Last-Modified和Etag会有效;使用ctrl+F5刷新时,Last-Modified和Etag也无效,会强制从服务器下载资源。
总体而言,在服务器配置正确的情况下,
通过有效期控制 Expires / Pragma / Cache-Control 优点:浏览器不需要访问Server来验证资源状态 缺点:不够准确,指定的缓存时间段内浏览器默认不会再次请求资源,当产生紧急外网bug时发布的资源无法及时更新到浏览器端。
通过资源状态控制 Last-Modified + If-Modified-Since / ETag + If-None-Match 优点:缓存控制比较精确,随时发布随时生效。 缺点:即使资源已存在于浏览器本地缓存中,也需要请求一次服务器验证资源状态以验证缓存有效性