如何有效地交付大量资产（图像）？答案

【问题标题】：How can I efficiently deliver large number of assets (images)?如何有效地交付大量资产（图像）？
【发布时间】：2013-02-18 09:56:59
【问题描述】：

我有一个网页，负责将 500 多张图片传送到浏览器。大小在 50kb 和 80kb 之间。

正在使用的服务器是 nginx，并且还使用了一个 varnish 代理。

现在，我怎样才能使这个过程尽可能地高效？

我只有两个想法，所以想从这里有经验的人那里得到一些意见。

我唯一的想法是：

我认为这里的选项 2 并不能真正解决问题；只是绕过它。所以我想专注于让这个过程尽可能地最有效和最快。

【问题讨论】：

【解决方案1】：

您正在加载 1 个页面，其中包含 500*50kb ~ 25MB 的数据，这完全是一个疯狂的页面大小！

无论你做什么，与average pagesisze of around 1 MB currently 相比，它总是会感觉很慢。在需要时通过 AJAX 动态加载大部分内容更有意义。或者，您可以将其拆分为多个板块。

如果你真的是在一个巨大的非动态页面上，那么：

确保您已将缓存标头设置为允许缓存（不会在首次加载时进行缓存）
主要问题（除了整体大小）是您请求的资源非常多。有 3 种方法可以限制其后果：
- 使用分片（即不同的子域）。这是可行的，因为浏览最多只能打开每个主机 4 个连接，因此通过使用多个域，您可以并行请求/加载更多资源。
- 将您的图像放入一个精灵中（即一个大图像，并使用 css 显示您想要的位）
- 设置您的服务器以使用 google 的 SPDY。这几乎消除了问题很多资源。缺点是它仍然是实验性的（即你需要使用补丁重新编译 nginx）并且尚未被所有浏览器支持

【讨论】：