Question

我有一个Web应用程序，每页需要提供大量小图像（最多100个）。我可以使用缓存来减少对数据库/后端的调用，但是由于图像需要一些时间来请求和渲染，特别是在较慢的连接上，因此必须对图像本身进行如此多的单独请求会产生明显的影响。

在网页上投放多张图片有哪些良好做法？我知道使用CDN（例如S3 + Cloudfront）来减少对http请求的瓶颈并从更近的地理位置提供内容，并且只有当他们在浏览器中进入用户的视图时才可能通过Ajax加载图像/内容。是否有其他技术可以为图像繁重的页面提供显着的性能提升？它们与硬件，前端还是别的东西有关并不重要。

感谢。

Answer 1

在一个页面请求中加载100个图像会增加页面加载时间，因为每个图像都需要时间在浏览器中加载。

简单的技术是只加载一个默认图像，意味着每个100图像的源应该是普通的默认图像，只有一个图像不会花费很多时间来加载。

当页面加载其所有内容时，请尝试使用帮助jQuery加载每个单独的图像。

使用lazyload jQuery插件在页面加载后加载所有图像。

像这样

<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();
});

您可以为每个图像添加expires标头，允许浏览器缓存它们，而不是在下次请求时请求它们。

希望它会对你有所帮助。

Answer 2

您始终可以将图像合并为一个图像，并使用CSS一次只显示部分图像（通常称为CSS精灵）

Google还有一篇相当深入的文章，介绍了他们如何实施涵盖部分优化的“即时预览”：

http://googlecode.blogspot.com/2010/11/instant-previews-under-hood.html?m=1

Answer 3

您可以为图像使用不同的域 - 这些域将在与当前域不同的线程上调用。

您还可以在优化为提供静态内容的Web服务器上托管您的图像 - 这将比动态服务器更快。

以上内容可以扩展到几个这样的域 - 如果浏览器设置为每个域有4个线程，则您添加的每个域将并行化为另外4个域（这也是使用CDN的好处之一）。 / p>

可以应用的另一种常见技术是使用CSS sprites - 如果你有一堆常用的图像，你可以将它们全部放在单一中图像并使用CSS仅显示需要它们所需的位。

每页提供多张图像的好方法

3 个答案: