通俗理解浏览器的缓存机制

通俗理解浏览器的缓存机制

八月 2, 2018 阅读 129 字数 1057 评论 0 喜欢 1


浏览器的缓存,是前端性能优化的一个手段,用户在第二次加载网页的时候,不需要去请求所有的文件,而是从本地磁盘中读取,速度超快!

缓存相关的头字段

这里有一个很普通的请求,里面有几个头字段需要注意一下

img

expires:缓存过期的绝对时间,格林尼治时间 (现在基本已经不用这个了,都用相对时间啦,如果你看到某个网站还有这个字段,要么是为了兼容,要么是历史遗留问题)

cacha-control:缓存过期的相对时间

if-modified-since:文件最后的修改时间

划线的都是跟缓存相关的,不过可不止这几个

现在来看看RFC2616规定的47种http报文首部字段中与缓存相关的字段

1. 通用首部字段(就是请求报文和响应报文都能用上的字段)

img

2. 请求首部字段

img

3. 响应首部字段

img

4. 实体首部字段

img

这么大堆,看的人头皮发麻,还是来梳理一下整个缓存流程吧。

缓存流程

img图不是我画的

首先来看绿框:

浏览器发起请求,服务器收到请求后发出响应,在响应头字段里有 expires, cache-control, last-modified

expires设置了过期的绝对时间,然而会被下面的cache-control设置的相对时间覆盖掉,所以过期时间就是60s

服务器把文件最后修改的时间last-modified 也传给浏览器,浏览器会把这个最后修改时间保存下来,一会儿有用

再来看红框:

浏览器在30s之后再次请求这个资源,因为在60s之内,磁盘里还有缓存呢。浏览器就从磁盘里读取这个资源,根本不请求服务器。

这里就是强缓存

最后看黄框:

浏览器在61s后请求这个资源,因为已经超过60s,所以浏览器去请求服务器,请求的时候浏览器把之前保存的文件最后修改时间if-modified-since传过去。

服务器收到请求发现这个最后修改时间if-modified-since跟我这里的最后修改时间last-modified完全一样啊,说明文件没有改动过。然后服务器就发送一个空的响应回去,只有响应头,并没有发送资源。这个响应头的意思是让浏览器继续去读取磁盘里的那个缓存文件。

这叫协商缓存

如果修改时间不一致,说明文件有改动了。

服务器就把那个新的资源发过去

最后些要注意的

通过上面的流程,相信缓存的机制就很好理解了。但是这里有一个问题,文件有可能被改动了,但是内容没变化(比如重新写了一遍原来内容进去),这里修改的时间就变了。

所以就有了个新的字段

Etag : 根据文件的内容生成的哈希值,这个值是不会重复的,所以可以根据这个值来判断文件是否被改动

if-Match : 判断Etag是否一致

  • Home
  • code
  • 通俗理解浏览器的缓存机制

发表评论

电子邮件地址不会被公开。