无缓存,原始模型
- 浏览器请求静态资源 a.js。(请求头:1KB)
- 服务器读取磁盘文件 a.js,返给浏览器。(10KB(a.js)+1KB(响应头) = 11KB)。
- 浏览器再次请求,服务器又重新读取磁盘文件 a.js,返给浏览器。
- 如此循环。。。
缺点:
- 浪费用户流量。
- 浪费服务器资源,服务器每次都要读磁盘文件,然后发送文件到浏览器。
- 浏览器要等待 a.js 下载并且执行后才能渲染页面,花费的时间会影响用户体验。
有缓存,无更新
- 浏览器第一次请求 a.js,缓存 a.js 到本地磁盘。(1+10+1 =12KB)
- 浏览器再次请求 a.js,直接走浏览器缓存(200,from cache),不再向服务器发起请求。(0KB)
缺点:
- 如果服务器上a.jpg的文件内容变了,浏览器每次都从缓存读取无法获取最新文件
有缓存,Expires 更新机制
浏览器和服务器约定文件过期时间,浏览器第一次请求 a.jpg 时服务器会发送完整的文件,但是服务器在发送文件的时候还附带发送一些额外信息——过期时间,用 Expires 字段来控制,时间是 GMT 格式的标准时间,如 Expires: Fri, 01 Jan 2021 00:00:00 GMT 。
- 浏览器第一次请求一个静态资源 a.js。(1KB)
- 服务器把 a.js 和 a.js 的缓存过期时间(Expires:Mon, 26 Sep 2018 05:00:00 GMT)发给浏览器。(10+1=11KB)
- 浏览器接收到 a.js,同时记住了过期时间。
- 在2018年9月26日5点之前,浏览器再次请求 a.js,便不再请求服务器,直接使用上一次缓存的 a.js 文件。(0KB)
- 在2018年9月26日5点01分,浏览器请求 a.js,发现 a.js 缓存时间过了,于是不再使用本地缓存,而是请求服务器,服务器又重新读取磁盘文件 a.js,返给浏览器,同时告诉浏览器一个新的过期时间。(1+10+1=12KB)。
- 如此循环。。。
优点:
- 在过期时间以内,节省了用户流量。
- 减少了服务器重复读取磁盘文件的压力。
- 缓存过期后,能够得到更新的 a.js 文件
缺点:
- 控制功能较为单一。缓存过期以后,服务器不管 a.js有没有变化,都会再次读取 a.js文件,并返给浏览器。
有缓存,Expires + Last-Modified 更新机制
为了解决上个方案的问题,服务器和浏览器协商,制定了一种方案,服务器每次返回 a.js 的时候,还要告诉浏览器 a.js 在服务器上的最近修改时间 Last-Modified (GMT标准格式)。
- 浏览器请求 a.js 文件。(1KB)
- 服务器返回 a.js 文件(10+1=11KB),并带上 a.js 文件上次被修改时间 Last-Modified(GMT标准格式)以及缓存过期时间 Expires(GMT标准格式)
- 当 a.js 过期时,浏览器带上 If-Modified-Since(等于上一次请求返回的 Last-Modified ) 请求服务器。(1KB)
- 服务器比较请求头里的 Last-Modified 时间和服务器上 a.js 文件上次被修改的时间:
- 如果一致,则告诉浏览器:你可以继续用本地缓存(304)。此时,服务器不再返回 a.js 文件。(1KB)
- 如果不一致,服务器读取磁盘上的 a.js 文件返给浏览器,同时告诉浏览器 a.js 的最近的修改时间 Last-Modified 以及重设过期时间 Expires。(1+10=11KB)
- 如此循环。。。
优点:
- 缓存过期后,就算再次请求,服务器如果发现文件没变化,不会把 a.js 发给浏览器,而是告诉浏览器继续使用本地缓存。
缺点:
- Expires 过期控制不稳定,因为浏览器端可以随意修改时间,导致缓存使用不精准。
Last-Modified 过期时间只能精确到秒。
添加 Cache-Contorl 相对时间控制
为了兼容已经实现了上述方案的浏览器,同时加入新的缓存方案,服务器除了告诉浏览器 Expires ,同时告诉浏览器一个相对时间 Cache-Control:max-age=10秒。意思是在10秒以内,使用缓存到浏览器的 a.js 资源。
浏览器先检查 Cache-Control,如果有,则以 Cache-Control 为准,忽略 Expires。如果没有 Cache-Control,则以 Expires 为准。可以看出 Cache-Control 对缓存的控制粒度更细。具体参看Cache-Control MDN
添加 Etag 文件内容对比
为了解决文件修改时间只能精确到秒带来的问题,我们给服务器引入 Etag 响应头。也就是说 a.js 内容变了,Etag 才变。内容不变,Etag 不变,可以理解为 Etag 是文件内容的唯一 ID。
同时引入对应的请求头 If-None-Match,每次浏览器请求服务器的时候,都带上If-None-Match字段,该字段的值就是上次请求 a.js 时,服务器返回给浏览器的 Etag。
- 浏览器请求 a.js。
- 服务器返回 a.js,同时告诉浏览器过期绝对时间(Expires)以及相对时间(Cache-Control:max-age=10),以及a.js上次修改时间Last-Modified,以及 a.js 的Etag。
- 10秒内浏览器再次请求 a.js,不再请求服务器,直接使用本地缓存。
- 11秒时,浏览器再次请求 a.js,请求服务器,带上上次修改时间 If-Modified-Since 和上次的 Etag 值 If-None-Match。
- 服务器收到浏览器的If-Modified-Since和If-None-Match,发现有If-None-Match,则比较 If-None-Match 和 服务器 a.js 文件计算后的 Etag 值,忽略If-Modified-Since的比较。
a.js 文件内容没变化,则Etag和If-None-Match 一致,服务器告诉浏览器继续使用本地缓存(304)。 - 如此循环。。。
不缓存 index.html 的原因
http 缓存机制存在一个问题——浏览器无法主动得知服务器上的 a.js 资源变化。
不管用 Expires 还是 Cache-Control,他们都只能够控制缓存是否过期,但是在缓存过期之前,浏览器是无法得知服务器上的资源是否变化的。只有当缓存过期后,浏览器才会请求服务器。
想象一些我们浏览网页的场景,我们一般都是输入网址,访问一个 html 文件,html文件中会引入 js、css 、图片等资源。
我们不让 html 文件缓存,那么每次访问浏览器都会请求服务器,所以浏览器每次都能拿到最新的 html 资源。资源更新的时候,比如 a.js 文件产生变动,我们只需更改 a.js 文件资源的版本号:
<script src="http://test.com/a.js?version=0.0.1"></script>
或者在文件末尾添加 hash 值:
<script src="http://test.com/jQuery-edb203c114.10.2.js"></script>
这样,通过设置 html 不缓存,html 引用资源内容变化则改变资源路径的方式,就解决了无法及时得知资源更新的问题。使用webpack打包的话,借助插件可以很容易处理。
与 http 缓存相关的头信息
Expires
响应头,代表该资源的过期时间。
如果在Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令,那么 Expires 头会被忽略。
Cache-Control
请求/响应头,通用消息头字段,被用于在http请求和响应中,通过指定指令来实现缓存机制。
缓存指令是单向的,这意味着在请求中设置的指令,不一定被包含在响应中。
If-Modified-Since / Last-Modified
请求头/响应头,资源最近修改时间,分别用于浏览器和服务器。
Etag
响应头,资源标识,由服务器告诉浏览器。
If-None-Match
请求头,缓存资源标识,值为 Etag ,由浏览器告诉服务器。