通过在超市买牛奶来解释 Web 缓存

如果您曾经在超市购买过牛奶，那么您就能了解服务器端和浏览器端缓存。

如果你是一位狂热的互联网用户（你很可能就是），你一定已经多次受益于缓存。但是，你可能不知道它在幕后何时以及如何发挥着神奇的作用。

从开发者的角度来看，缓存让构建高性能 Web 应用和 Web 服务器变得更加轻松。开发者无需不断优化被成千上万个请求压垮的服务器，只需实现缓存协议即可，让工作更加轻松。

由于缓存可能会造成页面加载时间从1秒到2秒的差异，因此其影响可能感觉有点……不尽如人意。但是，如果你想处理大量用户，缓存是必要的。

在过去的一个 Web 应用中使用缓存之后，我意识到一定有比仅仅解释一下术语更好的解释方式。我注意到，它与牛奶从农场到冰箱的路径非常吻合，所以我觉得这会是一个更好的解释方式。

为了理解本指南，您只需要了解Web 服务器的基础知识。让我们开始吧！

如果没有缓存，互联网会是什么样子？

在讨论缓存之前，我们先想象一下没有缓存的互联网会是什么样子。想象一下，你生活在18世纪或19世纪的农村。你拥有一个农场，但没有冷藏设备。农场里有几头奶牛，但它们的牛奶却不那么值钱，因为很快就会变质。

插播一句：有些文化至今仍未普及冷藏技术。他们要么直接喝牛乳，要么把牛奶和谷物混合发酵。真有意思。

不管怎样，你都想把牛奶卖给村里的其他人。但是，他们喝牛奶的时间非常有限。假设你的一头牛每天可以产一加仑牛奶。但是，如果太多人来你的农场找牛奶，你就需要把一些人送回家，让他们等到第二天再喝。

而且，由于分销渠道有限，你根本没法考虑增加奶牛数量和扩大经营规模。只有村里其他人才能买你的牛奶。这方面有明确的限制。

如果没有缓存，您将受到服务器计算能力的限制。缓存用于加载静态资源，例如：

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

默认情况下，服务器必须为每个传入的请求提交一个新的响应。但是，一个页面加载请求实际上可能意味着 4 个单独的请求——分别来自上述类别。如果考虑到更大的图像文件，您的服务器可能会被来自世界各地的用户压垮。然后，用户在等待页面加载时会感到加载时间缓慢。

理想情况下，您希望通过存储常见请求的响应来减轻服务器需求。您的服务器无需处理每个新的单独请求，而是可以通过缓存提供即时响应。您可以随时购买更多服务器，但这可能会导致无法控制的开支。

什么是服务器端缓存？

回到我们的农场场景。你知道什么能让经营一个成功的奶牛场变得更容易吗？

有冷藏功能的超市！

这样，人们就不需要亲自到你的农场喝牛奶了。你可以把牛奶一次安全地储存几周。

超市减轻了农场的很多压力，因为你的奶牛无需实时产奶。超市会满足需求。你只需要保证奶牛每天产奶即可。更棒的是，周围所有村庄的居民现在都可以从你的农场购买牛奶，因为冰箱里随时都有牛奶供应。

就像超市一样，服务器端缓存将处理热门请求并更快、更可靠地传递内容。

在上图中，我使用了“缓存代理”这个术语。缓存代理是一种存储用于响应常见请求的静态文件的服务器。缓存代理会拦截常见请求并快速提供响应。它可以防止这些请求给您的主 Web 服务器造成压力。

你可能有很多问题，比如，

1. 什么决定了请求“受欢迎”？
2. 代理将缓存响应多长时间？

这需要一篇更长的关于设置缓存的教程，但现在你应该了解一个重要的概念，叫做“新鲜度”。缓存代理会缓存在不同时间的不同文件，它需要决定是否继续提供这些文件。这取决于你的缓存策略。

这也就像超市里的牛奶一样。超市经理需要决定牛奶要存放多久才会倒掉。缓存代理通过缓存命中率（  即可以通过缓存服务器提供的内容百分比）来衡量其成功率。

什么是 CDN？

到目前为止，只有一家杂货店在销售你的牛奶。虽然这是一个很大的进步，但你仍然无法将牛奶送到这家本地商店销售范围以外的人手中。如果你想扩大经营规模，你需要增加更多门店。

假设你开始将牛奶分销到更多超市。现在，你可以满足更大地理范围内的客户需求。这类似于内容分发网络 (CDN)。CDN 是一系列位于世界各地的代理服务器（如我们上面讨论的那样）。

作为最终用户，您可能觉得高速互联网让大多数网站加载速度非常快。然而，这仅仅是因为他们使用 CDN 来快速分发静态文件！

如果您位于英国，并尝试加载缓存在弗吉尼亚州服务器中的文件，则会遇到一些延迟，因为原始信号在数千英里的电缆上传输速度有限。英国本地的缓存代理可以提高网站加载速度。

因此，您的服务器可以将静态资产的副本发送到 CDN 网络中的每个代理服务器，这些代理服务器可以处理本地请求，直到资产不再“新鲜”。一些常见的 CDN 提供商包括 Rackspace、Akamai 和 Amazon Web Services。

浏览器缓存怎么样？

现在，全国各地（甚至全世界）的人们都可以从你的农场把冷牛奶带回家。但有一个问题——他们无法在家储存。你的顾客仍然需要在购买牛奶后尽快喝完，然后再回到杂货店购买。所以，这种系统仍然不能很好地服务顾客。

解决方案？一台冰箱！

有了冰箱，你就可以把牛奶存放在本地，省得跑一趟超市。就缓存而言，我们指的是一个完全独立的静态资源存储位置，因为它位于客户端，或者与浏览器在同一台电脑上。我们的代理服务器位于远程位置。

这对于像 Facebook 或 Amazon 这样你经常访问的网站来说非常实用。由于可以减少需要处理的请求数量，这对服务器成本也有好处。

需要注意的一点是——我们并不是说牛奶会神奇地到达你的冰箱！你仍然需要发出到达服务器或代理服务器的初始请求。之后，你可以在本地缓存一些文件。

你的浏览器如何知道何时从服务器请求新文件？否则，你永远不会体验到这些本地文件的更新版本。

就像牛奶生产商在牛奶包装上标注日期一样，服务器也会在 HTTP 响应头中添加某种标识符。HTTP缓存实际上有 4 种独立的系统。上面显示的场景与“过期日期”方法非常相似。其他一些方法仍然需要浏览器在发送缓存文件之前与服务器进行检查。

何时开始使用缓存

假设您正在构建您的第一个 Web 应用。在拥有数千名用户之前，您可能无需担心缓存协议，因为服务器成本仍然较低。但是，随着规模的扩大，如果您想让应用快速加载，就需要实现缓存。

例如，Heroku 是部署你的第一个 Web 应用的绝佳工具。但是，它需要你使用单独的服务来实现缓存，例如亚马逊的 CloudFront 或 CloudFlare。这需要花费更多时间学习。

在浏览器端，你可能遇到过这样的情况：当你尝试重新加载一个包含新静态资源的页面时，页面内容却没有任何变化。无论你刷新页面多少次，都没有任何变化。

这通常是由于浏览器端的某些缓存协议造成的。要绕过浏览器缓存并从服务器请求新资源，您可以在 Mac 上使用Cmd+Shift+R ，在 PC 上使用Ctrl+Shift+R 。

获取更多视觉教程

你喜欢这个教程吗？欢迎在CodeAnalogies 博客上查看我其他关于 Web 开发主题的图文讲解。