如果你曾在超市买过牛奶，那么你就可以理解服务端缓存和浏览器端缓存。

如果你是一个狂热的互联网用户（你大概就是）,那么已经一次又一次的从缓存中获益。但是，你或许并不知道，它是何时或如何在背后发挥它的魔力的。

从一个开发者的角度来说,缓存可以帮助他们更加容易的构建高性能的web应用和web服务。开发者可以实现缓存协议来让生活更加轻松，而不需要时不时的去优化被数以千计的请求压的喘不过气的服务。

虽然缓存或许只是将加载页面的时间从2秒缩短到1秒，这种影响有一点。。。微不足道。但是当你想处理大访问量时，它变的十分必要。

在上一个app使用过缓存之后，我意识必须有一个更好的方式去解释缓存，而不是仅仅陈述概念。我注意到它与牛奶从农场到冰箱的过程非常吻合，所以我想这是更好的解释方式。

为了理解这篇指南，你只需要知道基本的web服务知识，下面让我们开始吧。

没有缓存的互联网会是什么样子？

在我们介绍缓存之前，让我们想一下没有缓存的互联网会是什么样子？相像一下，有那么一刻，你生活在十八、十九世纪的乡下。你拥有一个农场，没有冰箱(这点对理解全文很重要，除非作者告诉你有冰箱了，否则无论哪种场景，请牢记-没有冰箱！没有冰箱！没有冰箱！)。你在农场养了几头奶牛，但它们的牛奶并不怎么值钱，因为很快就会变质。

插一句：有些文化现在也没有冰箱，他们要不直接和生牛奶，要不将牛奶与谷物混合，让他们发酵，很有趣。

不管怎样,你想将你的牛奶卖给村子里的其他人，但是他们只有在特定的时间才会喝牛奶。假设你的一头奶牛一天能产一加仑牛奶，但如果太多人来你的农场喝牛奶，你就需要让其中一部分人回家，告诉他们明天再来。

没有缓存，你会被你的服务器的计算能力所限。缓存被用来加载静态资源，比如：

• 图片
• CSS
• 静态HTML文件
• JavaScript文件

一个服务器默认情况下，必须为每一个进来的请求返回一个新的响应。但是一个加载页面的请求实际上可能有4个独立的请求-上面每一类都有。如果考虑到大图片文件，你的服务器会因全世界用户的请求而不堪重负。然后用户会等待页面加载的时候中体验到缓慢的加载过程。

理想情况下，可以会想通过存储相同请求的响应来缓解对服务器的需求。你的服务器不需要处理每一个新的独立的请求，恰恰相反，你的缓存会立即发送一个响应。你可以购买更多的服务器，但那将导致不可控的费用。

什么是服务端缓存？

回到农场的例子。知道是什么让运营一家成功的奶场更加容易吗？

一家有冰箱的超市！

那样的话，人们不需要来你的农场喝牛奶。你可以将你的牛奶一次性安全的保存两个星期。

超市分担了农场很多压力，因为你的奶牛不需要立刻产奶。超市会处理牛奶需求。你只需要保持奶牛每天都有产出就好。甚至说，周围村子的居民现在也能购买你家农场的牛奶了，因为它就在超市冰箱里。

像超市一样，服务端缓存会处理受欢迎（popluar）的请求，更加快捷可靠的传递内容。

上面的图片中，我使用了术语 缓存代理。一个缓存代理是一个存储里用于响应一般请求的静态文件的服务器。缓存代理会拦截一般请求，返回相应。它阻止那些请求对你的服务器造成的压力。

你很可能有一堆下面这样的问题：
1、什么决定了 "受欢迎"（popluar）的请求?
2、代理服务器会缓存响应多久？

这些问题需要更长的关于设置缓存的教程（来回答）。但是现在，你应该知道的一个重要概念叫做：新鲜度 (freshness)。缓存代理会存有在不同时间缓存下来的不同文件，它需要决定是否还保留这些文件。这依赖于你的 缓存策略。

这就像市场里的牛奶一样。超市管理者需要决定在把牛奶倒掉之前保留多久。缓存代理通过缓存命中率来衡量它们的成功——通过缓存服务提供的内容的百分比。

什么是CDN？

到目前为止，你有一个杂货铺来销售你的牛奶。 虽然这是一个很大的进步，但你仍没有办法将你的牛奶卖给这个本地商店范围之外的人。如果你想扩大你的经营，你需要增加更多的超市。

现在，假设你开始讲你的牛奶派送到更多的超市。 现在你已经能够满足更大范围的顾客的需求。这很像内容分分发网络，或者叫 CDN。CDN是位于世界各地的一系列代理服务器（就像我们上面讨论的）的统称。

作为一个终端使用者，你大概感觉到高速互联网让大部分网站可以快速加载。然而，这仅仅是因为他们使用CDN来快速派送静态文件。

如果你人在英格兰，正尝试加载一个缓存在位于弗吉尼亚州的服务器上的文件，你会遇到一些延迟，因为原始信号只能在数千英里的电缆上快速传输。而一个位于大不列颠及北爱尔兰联合王国的本地缓存会让网站加载的更快。

因此，你的服务商给你的CDN网络中的每一个代理服务器发送一份静态资源的副本，他们可以处理本地请求直到这些资源不在"新鲜"。一些常见的CDN提供有：Rackspace, Akamai, 和 Amazon Web Services。

那么浏览器缓存呢？

现在全国(或全世界)的人能将冷藏的牛奶带回家，但是有一个问题-他们没发在自己家存放牛奶。你的顾客仍需要在购买牛奶后理解喝掉（否则会变质），然后放回杂货铺继续购买。因此这个系统仍然无法很好的服务顾客。

解决方法？一个冰箱！

有了冰箱，你可以在家里存放牛奶，避免了回到超市的麻烦。在在缓存的世界里，我们正谈论一个完全独立的存放静态资源的位置，因为它是在客户端，或者说与浏览器在同一台电脑上，而我们的代理服务器位于远端。

这对像Facebook，或者Amazon这样你会频繁访问的网站而言，是极好的。这对于他们的服务器成本而言也很好，因为他们能减少需要处理的请求数量。

有一个关键点需要注意——我们并没有说牛奶会像变戏法似的凭空跑进你的冰箱！你仍需要发送能够到达服务器或代理服务器的初始请求。在那之后，你能够在本地缓存一些文件。

你的浏览器如何知道何时从服务器请求新文件？否则你将永远无法体验本地文件更新版本。

就像牛奶生产商给牛奶包装打上日期一样，服务器会再HTTP相应头中加入某种标识符。实际上有四种用于HTTP缓存的独立系统。上面展示的场景接近于"截止日期"的方式，其他方式仍需要你的浏览器在发送缓存前与服务器进行检查。

什么时候开始使用缓存

假设你正在构建你的第一个web应用。在你用于数以千计的用户之前，你大概不需要担心缓存协议，因为服务器仍很便宜。然而，随着你的业务规模扩大，如果你想要你应用快速加载，你就需要实现缓存。

举个例子，Heroku（一个云平台）是一个很好的工具用来部署你的一个web应用。但它要求你使用独立的服务实现缓存，想亚马逊的CloudFront或者CloudFlare。这需要花费更多的时间去学习。

在浏览器端，你在尝试重载页面来使用新的静态资源时，大概已经体验过了缓存的强大，但页面就是没有变化。无论你刷新多少次，就是没变化。
这通常是由于一些浏览器端缓存协议造成的。你可以使用组合快捷键来绕开浏览器缓存，从服务器请求新的资源。Mac用户可以使用Cmd + Shift +R，Windows用户使用Ctrl + Shift + R。

关于本文
作者：@Kevin Kononenko
翻译：@哈维尔
原文：https://dev.to/kbk0125/web-caching-explained-by-buying-milk-at-the-supermarket-9k4#comments/