处理图像繁重的网页

Question

我有一个电视节目列表,大约有200个节目.这些节目中的每一个都有一个小图像,40x60像素和3 kB,它们都同时列在同一页面上.

现在我开始认为,每次查看页面时,向服务器发出大约200个请求可能不是一个好主意.

在不必偏离页面的图形设计的情况下,解决此类问题的最佳方法是什么？我应该使用JavaScript使用某种"延迟加载"吗？我应该将所有这些都放在一个大图像中并使用一堆hackish CSS来使它只有一个请求吗？

Answer 1

我想你可能有几个选择

分页很常见,我认为与用户配合得很好.延迟加载适用于每个JavaScript用户(几乎所有).

例如,可以通过一次抓取20个并制作一个大图像来实现精神化.我说一次使用20个,所以用户不必等待超大图像下载才能看到任何.

您可以使用PHP和GD以20个为一组来抓取每个图像,然后将它们拼接在一起,记录它们的偏移量,然后将其打印到样式表中.

您的CDN应设置为不发送cookie(如果您的站点使用,则为不同的域或子域www).您还可以配置此服务器以对其进行优化以提供静态内容.

Wrikken还提出了一个关于发送远期到期标题的好主意(投票给他!).不要忘记添加某种版本控制,以防您需要更新图像,并希望保持相同的文件名.

Answer 2

对于静,我建议像nginx上一个static.example.com子域,一个非常轻量级的Web服务器,它可以用更少的开销,那么更多的"传统"的Web服务器所服务的图像.当然,设置正确的过期和缓存标头,访问您网站的人应该将所有图像放在缓存中相当长的时间.