网页图像加载时间

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

Answer 1

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

Answer 2

使用 data: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 的屏幕分辨率并没有那么高。在优化初始屏幕之后，然后针对访问者在与页面交互之前看不到的其余材料进行优化。

许多优化性能的艺术是一种错觉... data: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 上？答案是这是一个技巧——你认为快速下载的材料被延迟了。