网页图像加载时间

Question

我有iPhone和Android等触控设备的应用程序。 该应用程序完全使用HTML，CSS和JavaScript构建。 当应用程序加载时，它会显示那些背景图像设置为大约的人的空白元素。 0.5秒 一段时间后，这些元素被图像填充，这就是为什么因为图像需要时间来加载到设备。

我在css文件中将所有图像都作为Base64数据URI命名为images.css（893 KB），如下所示。

.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秒，如何在显示视图之前预先加载它们？ 或者我如何测试是否加载images.css文件以确保图像全部加载？

Answer 1

这是一个相当庞大的CSS文件。 Base64在空间方面效率极低，因此您可以通过使用正确的图像文件来加快速度，如果需要，可以使用CSS sprites。 有关这些外观的示例，您不必看起来比SO本身更远。 整个页面上的漂亮图标来自单个图像文件http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4 ，它被加载到具有适当高度/宽度偏移的固定大小的div中以显示只需要小块。

Answer 2

使用数据的好处：image / png; base64是为了减少对许多小文件的服务器请求。 IE 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屏幕分辨率不是那么高。 在优化初始屏幕之后，优化访问者在与页面交互之前看不到的其余材料。

很多优化性能的艺术都是幻觉......数据：image / png; base64因为它是未压缩的，是幻觉的一部分。 当在html或CSS文件中编码时，它似乎下载速度更快。 逻辑规定，如果文件大小增加，则下载时间也会增加。

硬逻辑是......“一个500字节的HTTP头请求可能需要相同的上传时间，因为需要下载10 KB的HTTP响应数据。” http://code.google.com/speed/page-speed/docs/request.html ...除非base64编码不会将超过10KB的内容添加到图像文件大小，而是通过将其放入数据中来减慢速度URI。

CSS的唯一用途就是欺骗用户，让他看到一个快速的初始屏幕并说：它似乎快速下载？ 哇，他们怎么这么快就把这么多材料放到了iphone上？ 答案是这是一个技巧 - 您认为快速下载的材料是推迟的。