我有一个电视节目列表，大约有200个节目。这些节目中的每一个都有一个小图像，40x60像素和3 kB，它们都同时列在同一页面上。
现在我开始认为，每次查看页面时，向服务器发出大约200个请求可能不是一个好主意。
解决这类问题的最佳方法是什么，而不必偏离页面的图形设计？我应该使用JavaScript使用某种“延迟加载”吗？我应该将所有这些都放在一个大图像中并使用一堆hackish CSS来使它只有一个请求吗？
答案 0 :(得分：8)
我想你可能有几个选择
分页很常见，我觉得与用户配合得很好。延迟加载适用于每个JavaScript用户（几乎所有）。
可以通过例如一次抓取20个并制作一个大图像来实现精神化。我说一次使用20个，这样用户就不必等待超大图像下载才能看到任何内容。
您可以使用PHP和GD以20个为一组抓取每个图像，然后将它们拼接在一起，记录它们的偏移量，然后将其打印到样式表中。
您的CDN应设置为不发送Cookie（如果您的网站使用www，则为不同的域或子域）。您还可以配置此服务器以优化它以提供静态内容。
Wrikken also makes a good point关于发送远期到期的标题（投票给他！）。不要忘记添加某种版本控制，以防您需要更新图像，并希望保持相同的文件名。
答案 1 :(得分：8)
对于静态，我建议在nginx子域上使用static.example.com之类的东西，这是一个非常轻量级的网络服务器，它可以比更“传统”的网络服务器提供更少的开销。并设置适当的到期＆amp;缓存标题当然，访问您网站的人应该将所有图像放在缓存中相当长的时间。
答案 2 :(得分：3)
您最好的选择是分页。
如果你必须在一个页面上拥有所有项目，那么使用精灵会将其归结为一个图像，并且这是完全有效的方法（即不是真正的黑客攻击）。
答案 3 :(得分：1)
还有一个选项：css中的数据URI。基本上，你base64编码图像并将它们直接粘贴到css文件中。一个请求提供了css和所有图像，整个过程可以进行gzip压缩以获得更多节省。
缺点？ IE 5-7本身不处理数据（IE 8+支持这一点）。你可以通过两个版本的样式表（一个带有嵌入式图像，一个没有）来解决这个问题，并让apache选择要提供哪个样式。或者，您可以使用javascript解决方案，为旧的IE添加数据支持。
http://www.websiteoptimization.com/speed/tweak/inline-images/
对于Rails人群，有一个名为Jammit的宝石会自动执行此操作。它生成data-uri和常规版本，以及每个版本的压缩等价物。
答案 4 :(得分：1)
我建议使用200个div，每个背景图像从一个单独的图像文件加载，所有图像的条带连接在一起，ala css sprites
答案 5 :(得分：1)
我会创建图像精灵并使用CSS在div中显示图像，如滚动-10px 30px。 这是一个简单的基于Web的精灵和CSS生成器http://spritegen.website-performance.org/
答案 6 :(得分：0)
使用CSS精灵。所有图像的声像总大小约为600kb，这可能太大而无法一次性加载，因此您可以将图像分成几个精灵，每个精灵~100k。然后，您可以根据正在查看的内容确定其加载顺序的优先级。