HTML：多次调用仅加载一次图像答案

【问题标题】：HTML: Load image only once for multiple callsHTML：多次调用仅加载一次图像
【发布时间】：2015-08-02 00:47:29
【问题描述】：

我正在开发一个基于社交网络的 Laravel 应用程序。图像存储在 S3 存储桶中，定价基于 GET/PUT/DELETE.... 请求的数量。我想以任何方式减少发送到 S3 存储桶的请求数量。

场景：想象一个 facebook 帖子和 cmets

在页面加载时从 S3 存储桶中提取用户的个人资料图片。在帖子的 cmets 部分，用户评论了 10 次。我照常写代码

<img src="https://s3-ap-southeast-1.amazonaws.com/somebucket/32431435696950423.jpg">

对于每条评论，都会向存储桶发送一个新请求？或者默认情况下，图像在第一次请求后被缓存，其余部分从缓存中提取？

如何避免单个图像的多个 GET 请求？

【问题讨论】：

【解决方案1】：

这取决于浏览器实现和您的图像Cache-Control 标头。大多数现代浏览器都支持缓存。他们将缓存您的图片如果您的图片被允许缓存，反之亦然。检查When multiple instances of same images are embedded in an HTML, does that load the image once?问题。

AWS S3 可以配置为允许缓存您的对象（阅读how to add cache control in AWS S3）。

但是，如果您的网站流量很大，我建议您使用AWS CloudFront 而不是纯 S3。它是一个 CDN（内容交付网络）。它比普通的 S3 更快，也更便宜。

【讨论】：

【解决方案2】：

“或者默认情况下，图像在第一次请求后被缓存，其余部分从缓存中提取？”只有当图像具有相同的源和文件名时，它才是正确的答案。

因此，来自一个 URL 的 10 张相同图像将被下载一次。

【讨论】：