前言
浏览器缓存是一个非常强大的功能。对于开发者来说,合理利用缓存,可以减少用户的网络下载,从而减少网页的白屏时间,极大提升用户体验。
本文试图用简单的语言去解释缓存中的各种概念,以帮助理解与记忆。如果需要具体HTTP报文头细节,还请移步MDN。
简介
首先,http缓存分为强缓存和协商缓存,而且他俩都有自己的基础版和升级版。所以就一共有四种形式。
之所以会有升级版,因为这两种缓存的第一代都有问题。但并不是有了升级版,原来的就不用了。这个是要看服务端配置的。他们设置是兼容的。所以你可能看到一个http报文中他们四个同时存在的情况。
强缓存
- 强缓存一代是:
Expires
。原理:服务器给客户端一个过期日期(如:2020年10月1日过期),过期了你就重新获取。存在的问题:客户端与服务器存在时间差,这就可能导致过期时间不精确。 - 强缓存二代:
Cache-control
原理:服务器给客户端一个有效期时间段(3天后过期),这样时间差的问题解决了。
但强缓存存在一个问题:有时候服务器也不能确定文件到底什么时候被更新。
“文件是程序员更新的,我也不知道哪天过期[捂脸]”, 服务器说到…
所以强缓存不能满足有些情况。就需要协商缓存。
协商缓存
- 协商缓存一代:
last-modified
+if-modified-since
。简要来说,就是服务器会检查文件的更新时间是否发生了变化来确定是否可以使用缓存在客户端的文件。
服务端给客户端响应的时候会带着last-modified
(上次修改时间),当客户端再次发起请求的时候,会携带着if-modified-since
,服务端会检查上一次修改时间与当前服务器的文件修改时间是否一致,如果一致表示文件没有被修改。所以直接返回304的http状态,304意思就是告知客户端文件没有变更,请直接使用缓存文件。 - 协商缓存二代: Etag + if-none-match. 文件摘要MD5的方式保证一致性。协商缓存一代可能存在文件时间发生变更并非意味着文件发生改变这种情况。而使用文件摘要的方式来保证只有在文件真正发生变更才会重新下载,否则仍然是返回304。
总结
可以看出,协商缓存顾名思义,浏览器需要去请求服务端是否缓存可用。是一个“协商”的概念,明显区别于强缓存。