网页图片加载时间

Question

我有一个应用程序，如iPhone和Android的触摸设备。该应用程序完全使用HTML，CSS和JavaScript构建。当应用程序加载时，它会显示那些背景图像设置为近似值的空白元素。 0.5秒。经过一段时间后，这些元素被充满图像，这是为什么，因为图像需要时间加载到设备。

我在一个名为images.css css文件（893 KB）所有图像为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精灵。对于这些人看起来如何的例子，你不必比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屏幕分辨率不是很高。在优化初始屏幕之后，优化访问者看不到的其他材料，直到他与页面交互。

许多本领域中用于性能优化的是错觉...数据：图像/ PNG; BASE64，因为它是未压缩的是，幻象的一部分。使用html或CSS文件进行编码时，它似乎可以更快下载。逻辑规定，如果文件大小增加，下载时间也增加。

硬逻辑是...“一个500字节的HTTP标头请求可以采取等效时间上传作为HTTP的KB 10响应数据是下载”。 http://code.google.com/speed/page-speed/docs/request.html ...除非base64编码不会为图像文件大小增加10KB以上，否则通过将其放入数据URI中来降低它的速度。

大型CSS的唯一用途是通过让用户看到一个快速初始屏幕来欺骗用户，并说：它似乎可以快速下载？哇，他们如此迅速地将这么多材料带到iPhone上？答案是这是一个窍门 - 你认为很快下载的材料被打败了。