使用 Express/Angular 为投资组合网站缓存图像的最佳方式

Question

我有一个投资组合网站，它由一个 Express 后端和一个 Angular 7 应用程序组成。 为了访问我的图片，我使用了一个 API，其中包含可以通过这种方式访问​​的图片：

返回包含所有专辑列表及其图片名称以及其他元数据的 JSON

https://example.com/public/photo

返回 base64 编码图像

https://example.com/public/photo?album=test&photo=1.jpg

问题是，当您浏览网站时，检索图像的过程一直在完成，导致一些图片被大量下载，从而降低了用户体验，尤其是在慢速网络上。

我正在尝试实现一个缓存系统，该系统允许在用户访问期间“一劳永逸”地下载图像。 在浏览了 Google 和 StackOverflow 之后，我看到了很多正在使用的方法，但我不确定哪种方法在我的特定场景中是最好的。

这是我目前的想法：

图片存储

本地存储

为了存储我的图像，到目前为止，我使用 LocalStorage 功能来存储已经检索到的 base64 编码图像。但是，我不确定这是否是存储此类数据的最佳位置，如果不是，我应该把它放在哪里？

验证方法

ETags

由于我在初始页面加载期间使用 JSON 检索所有相册元数据，因此我可以在其上计算一个 ETag 以确保相册列表和相关图片名称相同。

专业版

• 只需要计算一个 Etag，而不需要很长的计算量

骗子

• 由于图片只是编号（1.jpg、2.jpg），因此更改图片不会更改 ETag。
• 仅添加一张图片会更改哈希并使所有相册无效

If-Modified-Since

我可以在我的 API 调用中添加一个带有任意句点的 If-Modified-Since 标头，以确保不会重新加载图片。最初的调用当然会存储图像，如果不是，我会从第一次调用得到 304 并且永远不会检索图像。

专业版

• 没有 ETag 计算

骗子

• 如果客户在访问期间修改了某些图像，如果未充分设置 If-Modified-Since，他将看不到它们
• 需要为每张专辑添加修改日期？

我暂时在脑海中扭曲了这些想法，所以我的判断可能在这件事上有点模糊。 如果您能帮我选择最好的技术，我们将不胜感激，尤其是在 LocalStorage 功能上，我觉得它不是最好的。

这是我在这里的第一个问题，所以我希望我遵守本网站的所有规则。

提前致谢。

Answer 1

好消息是您不必担心本地存储 - 浏览器已经内置缓存。

This article 解释了这个过程，就像我见过的一样清楚。归结为：

• 为您的图像设置缓存期。对于投资组合网站，这个时间几乎可以肯定是几天或几周，而不是几秒钟。
• 为每张图片计算一个eTag； Express can do this for you.

值得注意的是，网络浏览器非常适应 - 如果您设置缓存指令，即使您没有设置所有其他标头，它们也会假定您希望缓存资产.因此，您不必必须设置 eTag，但不这样做意味着浏览器将无法询问自缓存后资产是否已更改，因此将再次下载。 p>