面试精选之http缓存

最新推荐文章于 2025-05-29 14:42:40 发布

乐橙Web

最新推荐文章于 2025-05-29 14:42:40 发布

阅读量1.4k

点赞数 2

分类专栏：面试项目笔记文章标签：响应头请求头面试http

项目笔记同时被 2 个专栏收录

13 篇文章

订阅专栏

面试

4 篇文章

订阅专栏

面试精选之http缓存

前端面试常问第二大问题是关于http缓存这块。说真的，http缓存相关的细节比较多，并且 http 常用协议版本有1.0、1.1，（本文暂不讨论http2.0）。

我们先罗列一下和缓存相关的请求响应头。
Expires

响应头，代表该资源的过期时间。

Cache-Control

请求/响应头，缓存控制字段，精确控制缓存策略。

If-Modified-Since

请求头，资源最近修改时间，由浏览器告诉服务器

Last-Modified

响应头，资源最近修改时间，由服务器告诉浏览器。

Etag
响应头，资源标识，由服务器告诉浏览器。

If-None-Match

请求头，缓存资源标识，由浏览器告诉服务器。

匹配使用的字段

If-Modified-Since 和 Last-Modified
Etag 和 If-None-Match

今天着重介绍一下浏览器缓存机制，我们知道，浏览器缓存一般都是针对静态资源，比如 js、css、图片等，所以我们下面的例子围绕一个 javascript 文件 a.js 来阐述。抛开理论式灌输，我们从实际场景触发，一点点完善缓存机制，这种方式，相信大家会更容易理解。

做一些约定，方便以后比较。

a.js 大小为 10 KB
请求头约定为 1 KB
响应头约定为 1 KB

原始模型

浏览器请求静态资源 a.js。（请求头：1KB）
服务器读取磁盘文件 a.js，返给浏览器。（10KB（a.js）+1KB（响应头） = 11KB）。
浏览器再次请求，服务器又重新读取磁盘文件 a.js，返给浏览器。

如此循环。
执行一个往返，流量为 10（a.js）+1（请求头）+1（响应头） = 12KB。
访问 10 次，流量大约为12 * 10 = 120KB。
所以，流量与访问次数有关
L（流量） = N（访问次数） * 12。

该方式缺点很明显

浪费用户流量
浪费服务器资源，服务器要读磁盘文件，然后发送文件到浏览器。
浏览器要等待a.js下载并且执行后才能渲染页面，影响用户体验。

js执行时间相比下载时间要快的多，如果能优化下载时间，用户体验会提升很多。

浏览器增加缓存机制

浏览器第一次请求a.js，缓存a.js到本地磁盘。（1+10+1=12KB）
浏览器再次请求a.js，直接走浏览器缓存（200，from cache），不再向服务器发起请求。（0KB）
…
第一次访问，流量为1+10+1=12KB。第二次访问，流量为0。。。第10000次访问，流量依然为0。
所以流量与访问次数无关。
L(流量) = 12KB。

优点：

大大减少贷款
由于减少了a.js下载时间，相应的提高了用户体验。

缺点：服务器上a.js更新时，浏览器感知不到，拿不到最新的js资源。

服务器和浏览器约定过期时间

服务器和浏览器约定文件过期时间，用Expires字段来控制，时间是GMT格式的标准时间，如Fri,01 Jan 1990 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,同时记住了过期时间。
在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文件，并返给浏览器。

服务器告诉浏览器资源上次修改时间

为了解决上个方案的问题，服务器和浏览器经过磋商，指定了一种方案服务器每次返回a.js的时候，还要告诉浏览器a.js在服务器上的最近修改时间Last-Modify(GMT标准格式)

浏览器访问a.js文件。（1KB）
服务器返回a.js的时候，告诉浏览器a.js文件。（10+1=11KB）在服务器的上次修改时间Last-Mondified(GMT标准格式)以及缓存过期时间Expires（GMT标准格式）
当a。js过期时，浏览器带上If-Mondify-Since（等于上一次请求的Last-Modified）请求服务器。（1KB）
- 如果一致，则告诉浏览器:你可以继续用本地缓存（304）。此时，服务器不再返回a.js文件。（1KB）
- 如果不一致，服务器读取磁盘上的a.js返给浏览器，同时告诉浏览器a.js的最近的修改时间Last-Mondified以及过期时间Expires。（1+10KB）
- 如此往复

此种方案比上一个方案有了更进一步的优化：

缓存过期后，服务器检测如果文件没变化，不再把a.js发给浏览器，省去了10KB的流量。
缓存过期后，服务器检测文件有变化，则把最新a.js发给浏览器，浏览器能够得到最新的a.js。

缺点：

Expires过期控制不稳定，因为浏览器端可以随意修改时间，导致缓存使用不精准。
Last-Modified过期时间只能精确到秒。

精确到秒存在两个问题：

1、如果a.js在一秒时间内经常变动，同时服务器给a.js设置无缓存，那浏览器每次访问a.js，都会请求服务器，此时服务器比较发给浏览器上次修改时间和a.js的最近修改时间，发现都是在同一时间（同时精确到秒）,因此返回给浏览器继续使用本地缓存的消息（304）,但事实上服务器上a.js已经改动好多次了。所以这种情况，浏览器拿不到最新的a.js文件。
2、如果再服务器上a.js被修改了，但其实际内容根本没发生改变，会因为Last-Mondified时间匹配不上而重新返回a.js给浏览器。

继续改进，增加相对时间的控制，引入Cache-Contorl

为了兼容已经实现了上述方案的浏览器，同时加入新的缓存方案，服务器除了告诉浏览器Expires，同时告诉浏览器一个相对时间Cache-Control：max-age=10秒。意思是在10秒以内，使用缓存到浏览器的a.js资源

浏览器先检查Cache-Control，如果有，则以Cache-Control为准，忽略Expires。如果没有Cache-Control，则以Expires为准

继续改进，增加文件内容对比，引入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-Mondified-Since和Etag,发现有If-None-Match，则比较If-None-Match和a.js的Etag值，忽略If-Modified-Since的比较。
a.js文件内容没变化，则Etag和If-None-Match一致，服务器告诉浏览器继续使用本地缓存（304）。
如此往复。

结束了吗？

到此就结束了。是的，http的缓存机制就是如此了，但是仍然存在一个问题：
浏览器无法主动得治服务器上的a.js资源变化了。
不管用Expires还是Cache-Control，他们都只能够控制缓存是否过期，但是在缓存过期之前，浏览器是无法得治服务器上的资源是否变化的。只有当缓存过期候，浏览器才会发请求询问服务器。

最终方案

大家可以想象我们使用a.js的场景，我们一般都是输入网址，访问一个html文件，html文件中会引入js、css、图片等资源。

所以呢，我们在html上做些手脚。
我们不让html缓存，每次访问Html都去请求服务器。所以浏览器每次都能拿到最新的url资源。

a.js内容更新的时候，我们修改以下html中的a.js的版本号。

第一次访问html

<script src="http://test.com/a.js?version=0.0.1"></script>

浏览器下载0.01版本的a.js文件。
浏览器再次访问html,发现使用本地缓存。
某一天a.js变了，我们的html文件也相应变化如下

<script src="http://test.com/a.js?version=0.0.2"></script>

浏览器再次访问html，发现【http://test.com/a.js?version=0.0.2】对应的资源没有缓存，则请求服务器，服务器返回最新的 a.js。
如此往复。

所以，通过设置html不缓存，html引用资源内容变化则改变资源路径的方式，就解决了无法及时得治资源更新的问题。

当然除了版本号来区分，也可以以MD5 hash值来区分。如

使用webpack打包的话，借助插件可以很方便的处理。

除此以外的东东

Cache-Control除了可以设置max-age相对过期时间以外，还可以设置成如下几种值：

public，资源允许被中间服务器缓存。

浏览器请求服务器时，如果缓存的时间没到，中间服务器直接返回给浏览器内容，而不必请求资源服务器
private，资源不允许被中间代理服务器缓。
浏览器请求服务器时，中间服务器都要把浏览器的请求头传给服务器。
no-cache，浏览器不做缓存检查
每次访问资源，浏览器都要向服务器询问，如果文件没变化，服务器只告诉继续使用缓存（304）。
no-store，浏览器不缓存资源

每次访问资源，浏览器都要请求服务器，并且，服务器不去检查文件是否变化，而是直接返回完整的资源。
- must-revalidate，可以缓存，但是使用之前必须向源服务器确认。
- proxy-revalidate，要求缓存服务器针对缓存资源向源服务器进行确认.
- s-maxage，缓存服务器对资源缓存的最大时间。
Cahe-Control对缓存的控制粒度更细，包括缓存代理服务器的缓存控制。