网页图片加载时间

Question

我有一个适用于触摸设备，如iPhone和Android的应用程序。该应用程序完全使用HTML、CSS和JavaScript构建。当应用程序加载时，它会显示那些具有背景图像设置的空元素，大约需要0.5秒钟的时间。在一段时间后，这些元素将被填充为图像，这是因为图像需要时间加载到设备上。

我在名为images.css（893 KB）的css文件中使用Base64数据URI格式保存了所有图像，如下所示。

.icon { background-image: url(data:image/png;base64,bytes.....; }
.img1 { background-image: url(data:image/png;base64,bytes.....; }
.img2 { background-image: url(data:image/png;base64,bytes.....; }
.img3 { background-image: url(data:image/png;base64,bytes.....; }

这个应用程序可以运行，但图片需要大约60秒才能加载完毕，我该如何在展现视图前预加载它们呢？或者我该如何测试图片的css文件是否被加载，以确保所有图片都被加载？

- Umair A.

Answer 1

这是一个相当庞大的CSS文件。Base64在空间方面非常低效，因此您可以通过使用适当的图像文件以及必要时使用CSS精灵来加快速度。关于如何查看这些内容的示例，您不必看得比SO本身更远。页面上的漂亮图标来自单个图像文件http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4，该文件被加载到具有适当高度/宽度偏移量的固定大小的div中，以仅显示所需的小块。

- Marc B

---

你知道应用程序已经构建完成，所以我正在寻找一步解决方案。我知道你所说的是CSS中的“clip”属性。那么告诉我，如果我在加载images.css时放置一个闪屏屏幕，这样会起作用吗？ - Umair A.

我在某处读到一篇文章，称Base64比保存在图像文件夹中并引用元素的图像文件更适合移动设备。我错了吗？ - Umair A.

谁知道呢。base64会增加大约33%的大小，所以无论如何你都会使用更多的数据。也许这篇文章是由一个移动服务提供商撰写的，他们想要增加数据费用？ - Marc B

真是让人困惑。我读了关于精灵的文章，因为它们可以减小大小。但问题是即使使用精灵，如何预加载它？当精灵加载并准备好时，如何显示视图？ - Umair A.

精灵只是 CSS 背景。当图像加载时，它们将显示。您仍然需要等待一段时间才能看到它们，但是由于您不会强迫人们加载一个 800k 的 CSS 文件，因此延迟不会很大。 - Marc B

有没有一种工具可以获取我所有的图像，创建一个精灵，并告诉我每个图像的尺寸？ - Umair A.

Answer 2

使用data:image/png;base64的好处是减少向服务器请求许多小文件。例如，20个小图像意味着20个HTTP请求，每次只能连接几个请求。

您可以使用url(data:image)来加速性能，通过消除这些请求或在某些情况下结合图像并使用CSS剪切边缘来获取正确的背景元素，或者在某些情况下最好将大型图像拆分，因为这样做可以将它们压缩成更小的图像。

然而，这两种方法都不是总能提高性能的万能药。优化是一门艺术，需要权衡取舍。如果您的images.css文件大小为100K，并包含20或30个图像，则很可能会看到改进。

如果我和您一起工作，我现在会问自己的第一个问题是：在访问者与页面交互之前，哪些图像用于页面？性能优化也像是性能的幻觉。如果页面几乎立即绘制出来，并且页面对移动响应，则已经实现了幻觉-即使在幕后仍在下载鼠标悬停对象的情况下。

您可以在幕后下载多少内容？

http://code.google.com/speed/page-speed/docs/payload.html#DeferLoadingJS

将需要展示以呈现页面的图像从大型CSS文件中取出。它太大了，你能在服务器上压缩它吗？

区分需要立即呈现初始屏幕的图像，iPhone屏幕分辨率并不高。优化初始屏幕之后再为访问者直到与页面交互之前看不到的其余材料进行优化。

优化性能的艺术很大程度上是一种伪装......因为未经压缩的data:image/png;base64是其中的一部分。当编码在小的html或CSS文件中时，它似乎会更快地下载。逻辑推断如果文件大小增加，下载时间也会增加。

硬逻辑是......"500字节的HTTP头请求可能需要与下载10KB的HTTP响应数据相同的时间上传。" http://code.google.com/speed/page-speed/docs/request.html...除非base64编码不会给图像文件大小增加超过10KB，否则将其放入数据URI中会使其变慢。

一个如此庞大的CSS文件唯一的用途就是欺骗用户，让他们看到一个快速的初始屏幕，并说：“它似乎在瞬间下载完成了？哇，他们怎么能这么快地把这么多材料放到iPhone上？”答案是这是一个技巧 - 你认为快速下载的材料实际上是被延迟加载的。

- Wayne

---

将需要展示在页面上的图片从那个庞大的CSS文件中取出来。它太大了，你能在服务器上压缩它吗？这是什么意思？ - Umair A.

如果您的服务器上有mod_deflate.c，那么通过压缩css文件，您可能无法解决所有问题，但可以减少实际下载时间。请访问此链接：http://salscode.com/web-resources/gzip-htaccess - Wayne

如果您需要这么多图片来填充整个页面，请将它们分为两组：第一组用于用户交互之前，第二组用于仅在交互时显示的图片。 - Wayne