typescript - 使用 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 编码图像。但是，我不确定这是否是存储此类数据的最佳位置，如果不是，我应该把它放在哪里？

验证方法

电子标签

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

临

• 只需一个 Etag 即可计算，而不是很长的计算压力

骗局

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

If-Modified-Since

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

临

• 没有ETag计算

骗局

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

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

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

提前致谢。

标签： typescriptimageexpresscachinglocal-storage

Answer 1

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

这篇文章像我所看到的一样清楚地解释了这个过程。它归结为：

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

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