0

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

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

谢谢。

4

3 回答 3

2

在一个页面请求中加载 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 标头，允许浏览器缓存它们而不是在下一次请求时请求它们。

希望它会帮助你。

于 2013-02-20T13:25:23.980 回答
1

您始终可以将图像组合成单个图像并使用 CSS 一次仅显示部分图像（通常称为 CSS sprites）

谷歌还有一篇关于他们如何实现“即时预览”的相当深入的文章，其中涵盖了一些优化：

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

于 2013-02-16T19:48:39.153 回答
1

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

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

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

另一种可能适用的常见技术是使用CSS sprites - 如果您有一堆通常一起使用的图像，您可以将它们全部放在一个图像中，并使用 CSS 仅在需要它们的地方显示需要的位.

于 2013-02-16T19:51:55.033 回答