如何有效地提供大量资产（图像）？

Question

我有一个网页，负责将超过500张图片传送到浏览器。尺寸在50kb到80kb之间。

正在使用的服务器是nginx，并且还使用了清漆代理。

现在，我怎样才能使这个过程最有效？

我只有两个想法，所以想要有经验的人在这里投入一些。

我唯一的想法是：

1. 设置多个子域并从中提供批次。我相信最好使用的子域数为12。

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

我认为这里的选项2并没有真正解决问题;只是绕过它。所以我想专注于实际使这个过程最有效，最快。

Answer 1

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

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

如果您确实设置了一个巨大的非动态页面，那么：

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