我有一个web应用程序，它需要为每页提供大量的小图像（最多100个）。我可以使用缓存来减少对数据库/后端的调用，但必须对图像本身进行如此多的单独请求会产生明显的影响，因为图像需要一些时间来请求和渲染，尤其是在连接速度较慢的情况下。
在一个页面上提供多个图像有哪些良好的做法？我知道使用CDN（例如S3+Cloudfront）可以减少http请求的瓶颈，并从更近的地理位置提供内容，并且可能只有在图像/内容出现在浏览器中的用户视图中时才通过Ajax加载图像/内容。是否有其他技术可以为图像密集的页面提供显著的性能提升？它们是否与硬件、前端或其他方面有关并不重要。
谢谢。
在一个页面请求中加载100个图像会增加页面加载时间，因为每个图像都需要在浏览器中加载时间。
简单的技术是只加载一个默认图像，这意味着每100个图像的来源都应该是常见的默认图像，并且只加载一张图像不会花费太多时间。
当页面加载其所有内容时，请尝试在jQuery的帮助下加载每个图像。
使用lazyloadjQuery插件加载页面后的所有图像。
像这个
<img class="lazy" src="default.jpg" data-original="img1.jpg" >
<img class="lazy" src="default.jpg" data-original="img2.jpg" >
<img class="lazy" src="default.jpg" data-original="img3.jpg" >
.......
<img class="lazy" src="default.jpg" data-original="img100.jpg">
在脚本中使用以下代码
$(document).ready(function(){
$("img.lazy").lazyload();
});
您可以将过期标头添加到每个图像，这样浏览器就可以缓存它们，而不是在下次请求时请求它们。
希望它能帮助你。
您可以为图像使用不同的域-与当前域不同，这些域将在不同的线程上调用。
您还可以在优化为提供静态内容的网络服务器上托管图像，这将比动态服务器更快。
以上内容可以扩展到几个这样的域-如果浏览器设置为每个域有4个线程，则您添加的每个域将并行到另外的4个域（这也是使用CDN的好处之一）。
可能应用的另一种常见技术是使用CSS精灵-如果你有一堆常用的图像，你可以把它们放在一个单个图像中，并使用CSS只显示需要的比特。
您总是可以将图像组合成一个图像，并使用CSS一次只显示其中的一部分（通常称为CSS精灵）
谷歌还有一篇相当深入的文章，介绍了他们如何实现"即时预览"，其中涵盖了一些优化：
http://googlecode.blogspot.com/2010/11/instant-previews-under-hood.html?m=1