今天以火狐浏览器为例,对于其涉及的请求中的缓存策略展开具体分析
HTTP 缓存是一种提高网页性能和用户体验的重要技术,它可以减少网络流量,降低服务器负载,加快响应速度,节省用户流量等。HTTP 缓存的基本原理是,当客户端(如浏览器)第一次请求一个资源(如网页、图片、样式表等)时,服务器会返回该资源,并在响应头中添加一些缓存相关的信息,如 Cache-Control、Last-Modified、ETag 等。客户端会根据这些信息来决定是否将该资源缓存在本地(如浏览器缓存)。当客户端再次请求该资源时,如果本地缓存还有效(fresh),则直接从缓存中读取该资源,而不需要再向服务器发送请求;如果本地缓存已经过期(stale),则客户端会向服务器发送一个验证请求(如 If-Modified-Since、If-None-Match 等),询问该资源是否有更新。服务器会根据验证请求中的信息来判断该资源是否有更新,如果没有更新,则返回一个 304 Not Modified 的状态码,告诉客户端可以继续使用本地缓存;如果有更新,则返回一个 200 OK 的状态码,并返回最新的资源和缓存信息。这样就可以实现缓存的有效利用和及时更新。
主要分析步骤
1、打开火狐浏览器 2、打开浏览器控制台
3 切换到 Network(网络) ,查看是否捕获到报文
4. 选择CSS,进行分析
从图片处可以得到数据的请求方法为GET,状态码为200
HTTP状态码首字母表示的意思大体如下:
1××:消息响应
2××:成功响应
3××:重定响应
4××:客户端错误
5××:服务器端错误
Response Headers
Etag和Last-Modified代表了协商缓存
ETags
- Etag的优先级高于Last-Modified
- 作为缓存的一种强校验器,ETag 响应头是一个对用户代理(User Agent, 下面简称UA)不透明(注:UA无需理解,只需要按规定使用即可)的值。
- 对于像浏览器这样的HTTP UA,不知道ETag代表什么,不能预测它的值是多少。如果资源请求的响应头里含有ETag, 客户端可以在后续的请求的头中带上 If-None-Match 头来验证缓存。
Last-Modified
- Last-Modified 响应头可以作为一种弱校验器。说它弱是因为它只能精确到一秒。如果响应头里含有这个信息,客户端可以在后续的请求中带上 If-Modified-Since 来验证缓存。
- 其中包含源头服务器认定的资源做出修改的日期及时间。 它通常被用作一个验证器来判断接收到的或者存储的资源是否彼此一致。由于精确度比 ETag 要低,所以这是一个备用机制
- 当向服务端发起缓存校验的请求时,服务端会返回 200 ok表示返回正常的结果或者 304 Not Modified(不返回body)表示浏览器可以使用本地缓存文件。304的响应头也可以同时更新缓存文档的过期时间。
HTTP 响应头决定了对于后续的请求头,如何判断是请求一个新的资源还是使用缓存的文件。
强缓存和协商缓存
1. 强缓存: 强缓存是通过设置响应头信息来实现的,主要包括两个字段:Cache-Control和Expires。
-
Cache-Control:通过在响应头中设置
Cache-Control字段,可以控制资源的缓存行为。常见的指令包括:public:资源可以被任何缓存(包括浏览器和CDN)缓存。private:资源只能被私有缓存(如浏览器缓存)缓存,不应被CDN缓存。max-age=xxx:指定资源的有效时间,单位为秒。
-
Expires:通过在响应头中设置
Expires字段,可以指定一个绝对时间,浏览器在这个时间之前可以直接使用缓存。
2. 协商缓存: 协商缓存是通过在请求时与服务器进行验证来确定是否使用缓存的策略。在请求头中,浏览器会发送一个If-Modified-Since字段或者一个If-None-Match字段,分别表示上次服务器返回的响应的时间和一个响应的唯一标识(通常是一个哈希值)。服务器收到请求后,会根据这些字段的值和资源的最新状态来判断是否使用缓存返回响应。如果资源未发生变化,则返回一个304 Not Modified的响应状态,浏览器会直接使用缓存。
对于火狐浏览器而言,在开发者工具中的Network(网络)面板提供了对缓存的详细分析。可以看到每个请求的缓存状态、缓存命中/未命中情况,以及缓存的相关信息。