php - 如何高效交付大量 Assets (图片)？

Question

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

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

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

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

我唯一的想法是:

1. 设置多个子域并从中提供批处理服务。我认为最好使用 12 个子域。

2. 仅在用户向下滚动时需要时才使用 ajax 将批处理加载到浏览器。

我认为这里的选项 2 并不能真正解决问题；只是绕过它。因此，我想专注于实际使流程尽可能高效和最快。

Answer 1

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

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

如果您真的喜欢一个巨大的非动态页面，那么:

• 确保您已将缓存 header 设置为允许缓存(不会在首次加载时出现问题)
• 主要问题(除了整体大小之外)是您请求的资源太多了。有 3 种方法可以限制其后果:
  • 使用分片(即不同的子域)。这是可行的，因为浏览器最多只能为每个主机打开 4 个连接，因此通过使用多个域，您可以并行请求/加载更多资源。
  • 将你的图片放在一个 Sprite 中(即一张大图片，并使用 css 显示你想要的部分)
  • 设置您的服务器以使用谷歌的 SPDY。这几乎消除了问题很多资源。缺点是它仍然是实验性的(即你需要使用补丁重新编译 nginx)并且还没有被所有浏览器支持