缓存通俗解释

by Kevin Kononenko

凯文·科诺年科(Kevin Kononenko)

在超市购买牛奶解释了网络缓存 (Web Caching Explained by Buying Milk at the Supermarket)

If you have ever bought milk at the supermarket, then you can understand server-side and browser-side caching.

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

If you are an avid internet user (you probably are), you have benefitted from caching over and over again. But, you might not know when or how it is working its magic behind the scenes.

如果您是一个狂热的Internet用户(也许是)，那么一次又一次地缓存将使您受益匪浅。 但是，您可能不知道它何时或如何在幕后发挥作用。

From a developer’s perspective, caching makes it much easier to build high-performing web apps and web servers. Instead of needing to constantly optimize servers that are overwhelmed by thousands of requests, developers can implement caching protocols to make life much easier.

从开发人员的角度来看，缓存使构建高性能的Web应用程序和Web服务器变得更加容易。 开发人员可以不必实施不断优化被成千上万个请求所淹没的服务器，而可以实现缓存协议以简化工作。

Since caching might make a difference between 1 second to load a page and 2 seconds, the impact can feel a little bit…underwhelming. But, it’s necessary if you want to handle a high volume of users.

由于缓存可能会在加载页面的1秒和2秒之间产生差异，因此影响可能会有点……令人难以理解。 但是，如果要处理大量用户，则很有必要。

After using caching in a past web app, I realized that there had to be a better way to explain it than just walking through the terminology. I noticed that it aligned very well with the pathway of milk from a farm to your refrigerator, so I figured that would be a better way to explain it.

在过去的Web应用程序中使用了缓存之后，我意识到，有一种更好的方法来解释它，而不仅仅是浏览术语。 我注意到它与牛奶从农场到冰箱的路径非常吻合，因此我认为这是一种更好的解释方式。

In order to understand this guide, you just need to know about the basics of web servers. Let’s get into it!

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

如果不进行缓存，互联网将是什么样？ (What would the internet look like without caching?)

Before we get into caching, let’s think about what the internet would look like without caching. Imagine, for a moment, that you are living in the 1700s or 1800s in a rural area. You own a farm, and there is no refrigeration available. You have a few cows on your farm, but their milk is not nearly as valuable since it will spoil quickly.

在开始缓存之前，让我们考虑一下不进行缓存时互联网的外观。 想象一下，您现在生活在乡村的1700或1800年代。 您拥有一个农场，没有可用的冷藏设备。 您的农场里有几头奶牛，但是它们的牛奶价值不高，因为它们很快就会变质。

Quick interruption: Some cultures still do not have access to refrigeration. They will either drink raw milk directly from a cow’s udder, or mix milk with grains and let it ferment. Interesting.

快速中断：某些文化仍然无法获得冷藏。 他们要么直接喝牛奶，要么喝牛奶与谷物混合，然后发酵 。 有趣。

ANYWAYS, you want to sell your milk to others in your village. But, they will have a very limited time to drink the milk. Let’s say that one of your cows can produce a gallon of milk per day. But, if too many people show up to your farm looking for milk, you will need to send some home and ask them to wait til the next day.

无论如何，您想将牛奶卖给村里的其他人。 但是，他们喝牛奶的时间将非常有限。 假设您的一头母牛每天可以生产一加仑的牛奶。 但是，如果有太多人到您的农场来寻找牛奶，您将需要送回家，并要求他们等到第二天。

Also, you can’t even think about adding more cows and scaling up your operation since you have such limited distribution. Only the other members of your village can buy your milk. You have some clear limits.

另外，由于分布有限，您甚至都不会考虑增加母牛数量和扩大经营规模。 只有您村庄的其他成员可以购买您的牛奶。 您有一些明确的限制。

Without caching, you are limited by the computing power of your servers. Caching is used to load static assets, like:

如果不进行缓存，则服务器的计算能力将受到限制。 缓存用于加载静态资产，例如：

• Images图片
• CSSCSS
• Static HTML files静态HTML文件
• JavaScript filesJavaScript文件

A server, by default, must submit a new response for every incoming request. But, a request to load a page could actually mean 4 separate requests — one from each of the categories above. When you take into account larger image files, your servers can become overwhelmed by users all over the world. Then, users will experience slow load times as they wait for their page to load.

默认情况下，服务器必须为每个传入请求提交新的响应。 但是，加载页面的请求实际上可能意味着4个单独的请求-上面每个类别中的一个。 当您考虑较大的图像文件时，您的服务器可能会被全世界的用户所淹没。 然后，用户在等待页面加载时将经历缓慢的加载时间。

Ideally, you would want to ease the demand on your servers by storing responses to common requests. Your server would not need to handle each new individual request, but instead, your cache could deliver an immediate response. You could always pay for more servers, but that can lead to uncontrollable expenses.

理想情况下，您将希望通过存储对常见请求的响应来减轻对服务器的需求。 您的服务器不需要处理每个新的单独请求，但是您的缓存可以传递立即响应。 您始终可以为更多的服务器付费，但这可能导致不可控制的费用。

什么是服务器端缓存？ (What is server-side caching?)

Back to our farm scenario. Know what would make it a LOT easier to run a successful dairy farm?

回到我们的农场场景。 知道什么会使经营成功的奶牛场变得更容易吗？

A supermarket with refrigeration!

有冷藏的超市！

That way, people will not need to show up to your farm and consume the milk immediately. You will be able to keep it safely stored for a couple weeks at a time.

这样，人们将无需出现在您的农场并立即食用牛奶。 您将可以一次安全地保存几个星期。

The supermarket removes a lot of the stress on your farm, because your cows will not be expected to produce in real-time. The supermarket will handle the demand. You just need to keep the cows productive on a daily basis. Even better, residents of all the surrounding villages can now buy milk from your farm, because it will always be available in the refrigerator.

超级市场减轻了您农场的许多压力，因为不会期望您的母牛实时生产。 超市将处理需求。 您只需要使母牛每天保持生产力即可。 更好的是，周围所有村庄的居民现在都可以从您的农场购买牛奶，因为牛奶始终可以在冰箱中购买。

Just like a supermarket, a server-side cache will handle popular requests and deliver content much more quickly and reliably.

就像超市一样， 服务器端缓存将处理受欢迎的请求并更快，更可靠地交付内容。

In the image above, I use the term caching proxy. A caching proxy is a server that stores the static files that are used to respond to common requests. A caching proxy will intercept common requests and quickly deliver a response. It prevents those requests from stressing your main web servers.

在上图中，我使用了术语缓存代理 。 高速缓存代理是一台服务器，用于存储用于响应常见请求的静态文件。 缓存代理将拦截常见请求并快速传递响应。 它可以防止这些请求对您的主要Web服务器造成压力。

You probably have a bunch of questions like,

您可能有很多问题，例如，

1. What determines a “popular” request?是什么决定了“受欢迎”的请求？
2. How long will the proxy cache the responses?代理将响应缓存多长时间？

That would require a longer tutorial on setting up caching, but for now, you should know about one important concept called freshness. The caching proxy will have different files that have been cached at different times, and it needs to decide whether it should still serve these files. This will depend on your caching policy.

这将需要更长的关于设置缓存的教程，但是就目前而言，您应该了解一个称为新鲜度的重要概念。 缓存代理将具有在不同时间缓存的不同文件，并且需要确定是否仍应为这些文件提供服务。 这将取决于您的缓存策略 。

This also works just like milk in a supermarket. A supermarket manager needs to decide how long they will hold your milk before throwing it out. Caching proxies measure their success through a cache hit ratio — the percentage of content that can be served through the caching server.

这也就像超市里的牛奶一样。 超市经理需要决定将您的牛奶扔掉多长时间。 高速缓存代理通过高速缓存命中率(可以通过高速缓存服务器提供服务的内容的百分比)来衡量其成功与否。

什么是CDN？ (What is a CDN?)

So far, there is one grocery store selling your milk. Although that is a big improvement, you still have no way to get your milk to people outside the range of this local store. You are going to need to add more stores if you want to scale up your operation.

到目前为止，有一间杂货店出售您的牛奶。 尽管这是一个很大的进步，但是您仍然无法将牛奶卖给该本地商店范围之外的人们。 如果您想扩大运营规模，则需要添加更多的商店。

So, let’s say you start distributing your milk to more supermarkets. Now, you can satisfy customers across a much larger geographic range. This is similar to a content delivery network, or a CDN. A CDN is a series of proxy servers (like we discussed above) located all over the world.

因此，假设您开始将牛奶分配给更多的超市。 现在，您可以满足更大范围的客户需求。 这类似于内容交付网络或CDN。 CDN是遍布世界各地的一系列代理服务器(如我们上面讨论的那样)。

As an end-user, you probably feel that high-speed internet allows most sites to load very quickly. However, this is only because they use CDNs to deliver static files at rapid speed!

作为最终用户，您可能会觉得高速互联网允许大多数站点快速加载。 但是，这仅是因为它们使用CDN来快速交付静态文件！

If you are located in England and you are trying to load a file cached in a server in Virginia, you will experience some delay since the original signal can only travel so quickly along thousands of miles of cable. A local caching proxy in the United Kingdom would allow the site to load faster.

如果您位于英格兰，并且试图加载缓存在弗吉尼亚州服务器中的文件，则将遇到一些延迟，因为原始信号只能沿着数千英里的电缆如此快速地传播。 英国的本地缓存代理将使站点加载速度更快。

So, your servers can send a copy of static assets to each of these proxy servers within your CDN network, and they can handle local requests until the assets are no longer “fresh”. Some common CDN providers include Rackspace, Akamai, and Amazon Web Services.

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

浏览器缓存如何？ (What about browser caching?)

Now, people across the country (or the world) can bring home cold milk from your farm. There’s just one issue — they have no way to store it in their own homes. Your customers still need to drink the milk pretty quickly after they buy it, and then return to the grocery store for more. So, this system still doesn’t serve customers particularly well.

现在，全国(或世界)各地的人们都可以从您的农场带回家的冷牛奶。 只有一个问题-他们无法将其存储在自己的家中。 您的客户在购买牛奶后仍需要很快喝牛奶，然后再回到杂货店购买更多牛奶。 因此，该系统仍然不能很好地为客户服务。

The solution? A refrigerator!

解决方案？ 一台冰箱！

With a fridge, you can store the milk locally and avoid a return trip to the supermarket. In caching terms, we’re talking about a completely separate location for storing static assets since it is on the client-side, or on the same computer as the browser. Our proxy server was located in a remote location.

有了冰箱，您可以将牛奶存储在本地，避免回超市。 用缓存的术语来说，我们谈论的是用于存储静态资产的完全独立的位置，因为它位于客户端或与浏览器位于同一台计算机上。 我们的代理服务器位于远程位置。

This is great for sites like Facebook or Amazon that you might frequently visit. It’s great for their server costs too, since they can reduce the number of requests they need to handle.

这对于您可能经常访问的Facebook或Amazon网站非常有用。 这对于他们的服务器成本也很重要，因为它们可以减少需要处理的请求数量。

One key thing to note — we are NOT saying that milk magically arrives in your refrigerator! You still need to make that initial request that reaches either the server or the proxy server. After that, you can cache some of the files locally.

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

How does your browser know when to request new files from the server? Otherwise, you would never experience updated versions of these local files.

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

Well, just like milk producers put a date on their milk packaging, servers will add some sort of identifier within the HTTP response header. There are actually 4 separate systems for HTTP caching. The scenario shown above closely resembles the “expiration date” method. Some of the other methods still require your browser to check with the server before sending the cached file.

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

何时开始使用缓存 (When To Start Using Caching)

Let’s say that you are building your first web app. Until you have thousands of users, you probably won’t need to worry about caching protocols, since server costs will still be low. However, as you scale up, you will need to implement caching if you want your app to load quickly.

假设您正在构建第一个Web应用程序。 在拥有成千上万的用户之前，您可能不必担心缓存协议，因为服务器成本仍然很低。 但是，在向上扩展时，如果希望您的应用程序快速加载，则需要实施缓存。

Heroku, for example, is a great tool for deploying your first web app. But, it requires you to use a separate service to implement caching, like Amazon’s CloudFront or CloudFlare. That will take more time to learn.

例如，Heroku是部署第一个Web应用程序的绝佳工具。 但是，它要求您使用单独的服务来实现缓存 ，例如Amazon的CloudFront或CloudFlare。 这将需要更多时间来学习。

On the browser-side, you have probably experienced caching when you are trying to reload a page with new static assets, but the page simply won’t change. No matter how many times you refresh the page, nothing changes.

在浏览器端，当您尝试用新的静态资产重新加载页面时，您可能会遇到缓存，但是页面不会改变。 无论您刷新页面多少次，都不会改变。

This is usually because of some caching protocol on the browser-side. To bypass your browser’s cache and request new assets from the server, you can use Cmd+Shift+R on a Mac or Ctrl+Shift+R on PC.

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

获取更多可视教程 (Get More Visual Tutorials)

Did you enjoy this tutorial? Give it a “clap”! Or, sign up here to get my latest visual tutorials from the CodeAnalogies blog.

您喜欢本教程吗？ 给它一个“掌声”！ 或者，在此处注册以从CodeAnalogies博客获取我的最新视觉教程。

翻译自: https://www.freecodecamp.org/news/web-caching-explained-by-buying-milk-at-the-supermarket-2ba6133ca4ed/

缓存通俗解释