0%

强缓存与协商缓存

多益网络的前端岗位的笔试有一道题让我解释下 强缓存与协商缓存是什么 看到这题就迷糊了对于这两个概念完全的一无所知啊,总是搞些高端的名词,让人摸不到方向只好下来搜索一下了。
浏览器缓存做的好可以使得用户的体验得到不错的提升,卓越的优化可以说能够给企业带来更棒的业绩,而浏览器缓存就包括基本两项那就是强缓存与协商缓存。

基本认识

  • 缓存肯定是在浏览器发起过请求才会有的,而服务器再给你资源的时候打了标记,这些标记是你到时候选择何种缓存的依据。
  • 强缓存是在加载资源时找到上次服务器的标志与现在时间进行对比,如果资源未过期那么直接读取本地缓存资源(这就是强缓存),过期则需要向服务器发起请求。这样就避免了浏览器每一次加载资源都要向服务器发起请求减轻的服务器的负载,且从本地加载提升了用户体验。
  • 协商缓存就是当你向服务器发起请求时要带上上一次服务器给你的标记,拿着标记与服务器现在的资源的标记进行对比,如果对比发现为改变则返回 304,浏览器于是从本地缓存中读取资源(这就是协商缓存),如果发生改变则向浏览器发送新资源。

强缓存原理

好了我们已经了解何为强缓存了,那我们是如何去实现的呢?

如果我们打开开发者工具,看 network 可以看到很多 status 为 200 的 size 为 (from cache) 其实这就是强缓存。其实强缓存是利用了 Expired 与 Cache-Control 这两个 HTTP 响应头来实现的(也就是之前所说的标记)

  • Expired 记录的是过期的格里尼治时间 HTTP1.0
  • Cache-Control 中有 max-age 记录从开始发送资源到资源过期的秒数 HTTP1.1

而在资源加载时先从缓存中找,找到后看看现在时间与标记进行对比。在过期前就能过命中缓存。当两个标记都存在在的时候,看 max-age。

协商缓存原理

我们经常也能看到 304(not modified) 那他是如何实现的呢?

通过对比浏览器发来的标记与自己本身的标记进行对比有两对标记

[Last-Modified与If-Modified-Since]及[ETag与If-None-Match]

两两配对就能表示服务器的资源也没有发生改变可以放心使用浏览器的本地缓存,一旦浏览器接收到 304 的响应就会从缓存中来加载资源。

参考及扩展