我有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文件以确保图像全部加载？
答案 0 :(得分：2)
这是一个相当庞大的CSS文件。 Base64在空间方面效率极低，因此您可以通过使用正确的图像文件来加快速度，如果需要，可以使用CSS sprites。有关这些外观的示例，您不必看起来比SO本身更远。整个页面上的漂亮图标来自单个图像文件http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4，它被加载到具有适当高度/宽度偏移的固定大小的div中，以仅显示所需的小块。
答案 1 :(得分：0)
使用数据的好处：image / png; base64用于减少对许多小文件的服务器请求。 IE 20小图像意味着一次限制为几个连接的20个http请求。
你可以使用url（数据：图像通过消除这些请求来加速性能，或者在某些情况下组合图像并使用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上？答案是这是一个技巧 - 您认为快速下载的材料是推迟的。
