初探HTTP缓存

男娘i 2022-10-01 08:53 142阅读 0赞

## 作用 ##

浏览器（和代理）利用缓存减少http数量或者是减少相应文件大小，增加页面加载速度。

## 缓存方法 ##

### expires header ###

浏览器会将过期时间和相应的url缓存起来，请求同一个资源时查看是否过期，没有过期就直接从缓存里取出，不用发送请求了。过期之后的策略请看最下面的**缓存有效性确认**

res.setHeader(“Expires”, new Date(Date.now() + 2592000000).toUTCString());
    复制代码

优点： 没有额外请求 `200 OK (from memory cache)`

缺点：

1.  因为是一个具体时间，需要服务端和客服端的时间一致
2.  需要监测这个资源，当时间点到了的时候要更新过期时间

### Cache-Control Max-Age ###

使用了偏移时间，应该是把资源创建时间和资源以及偏移时间一起存到缓存里了。每次访问资源的时候，查看资源创建的时间并且加上偏移时间和现在时间进行比较。和`Expires`一样都是不发送请求了。 在自己的电脑上简单测了下，500KB的也可以缓存。 同时有`Expires` 和 `Cache-Control` 的话后者会覆盖前者

res.setHeader("Cache-Control", "public, max-age=2592000");
    复制代码

#### server cache-control ####

上面的是server端的

#### client cache-control ####

浏览器会将`html`文件的请求头里带上`Cache-Control:max-age=0` 表示即使有缓存，也会重新访问下服务器验证下。server可以根据改变日期(参考最下面的**缓存有效性确认**)可以返回`304`,这样浏览器就直接用缓存了。

优点： 和`Expires` 一样

缺点： `http1.1`引入，尽管很少量的浏览器仍然使用1.0。 有些插件可以帮助你设置，一种写法同时写`Expires` 和`Cache-Control`

## 缓存有效性确认 ##

过期了会做个一个**conditional get request**(条件GET请求）。如果过期了，会进行有效性检验，如果返回`304` 则直接拿缓存里的，否则请求新的返回200响应。 有两种方法可以查看缓存的有效性

### 比较最新修改日期 ###

server: Last-Modified client: If-Modified-Since 浏览器将服务器返回的 `Last-Modified` 的时间和对应资源存入缓存，再请求的时候将这个时间写入请求头的 `If-Modified-Since` 发送给服务器，服务器判断是否过期，过期则返回200需要重新下载；否则就返回304，无需返回资源所有内容。

### ETag (Entity Tags) 实体标签 ###

类似指纹，可以理解为资源发生变化时，它一定会发生变化。 server: ETag client: If-None-Match 缺点：做服务器集群时，向不同服务器请求的资源时同一个资源时，可能返回的ETag反而不同，没法充分利用缓存，浪费带宽。《高性能网站建设指南》是不建议使用 `Etag` 或者要特殊配置 `ETag` 推荐使用 `Last-Modified`

## 参考 ##

1.  [http - What’s the difference between Cache-Control: max-age=0 and no-cache? - Stack Overflow][http - What_s the difference between Cache-Control_ max-age_0 and no-cache_ - Stack Overflow]
2.  《高性能网站建设指南》
3.  [developer.mozilla.org/en-US/docs/…][developer.mozilla.org_en-US_docs]

转载于:https://juejin.im/post/5cb4919bf265da03b20424c9

[http - What_s the difference between Cache-Control_ max-age_0 and no-cache_ - Stack Overflow]: https://link.juejin.im?target=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F1046966%2Fwhats-the-difference-between-cache-control-max-age-0-and-no-cache
[developer.mozilla.org_en-US_docs]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTTP%2FHeaders%2FETag