[译]图片优化 第五章:AlphaImageLoader(2)
作者:s5s5 来源:[米随随] s5s5 时间:2010-08-29 18:39:00
时间与内存 – 副作用#2和#3
另一个使用AlphaImageLoader的副作用是它要使用更多的内存。这个问题,我们一般会认为访问者的电脑内存是足够的,但对于更早的电脑(可能还在运行IE6或更低)则可能并非如此。
所以,它的性能问题则是我们最感兴趣的,衡量性能需要测试它在浏览器中表现。所以,让我们做一个使用时间及内存的测试。
首先,让我们做一个参考页:它使用了100个<DIV>且它们具有相同的背景图片(不使用滤镜)。然后我们再做一个100个<DIV>背景相同但使用滤镜来实现的页面。使用100个滤镜来呈现背景的页面可能在一般的页面中不常见,但这样放大将帮助我们更好的测试。它将显示出每个页的“价格”。(译者:作者在这里创造了一个“价格”,是为了说明每个元素或每个页面中要消耗多少系统资源。)
时间从页面的onload事件后开始计时,图片也已经缓存,这样用以消除需要加载网页和图片的影响。内存消耗使用ProcessExplorer来帮助我们测量。
这里统计了一台双核2GHz CPU、500MB内存电脑的IE6中的10次结果。在一个不这么强大的电脑中,加载时间可能会更糟糕。
测试页 | 时间(秒) | 内存(MB) |
---|---|---|
测试#1 – 无滤镜 | 0.031 | 0.6 |
测试#2 – 有滤镜 | 0.844 | 46.8 |
正如你可以看到,使用AlphaImageLoader的结果是相当的糟糕——测试页加载慢了27倍而且使用了78倍的内存。当然这些结果有很高的随机性——这只是一个图片且只在一台电脑上的测试(相对强大且未尽其用)。由于不同的图片,应用于不同的元素的数目及不同的电脑,结果可能有很大的不同,特别是当只有较少的内存和CPU或者把网络延迟(副作用#1)也加入统计。但这个例子说明了重要的概念:
AlphaImageLoader是缓慢的,它需要更多的内存
它对的每个使用它元素的起作用,而不是每张图片
如果你有一张雪碧图并且你使用的滤镜于不同的元素(使用Alpha透明的雪碧图是非常棘手的,但也不是完全不能用),那么每个使用雪碧图的元素都会消耗更多的系统资源。
雅虎搜索案例研究
使用上面AlphaImageLoader实验测试中的“价格”理念,你可能想象或计算出要为每个滤镜使用多少的系统资源。但一个百万级在不同的浏览器、电脑、带宽和世界各地的测试能更好的说明这个问题。
雅虎的搜索结果页曾经使用PNG32雪碧图且使用AlphaImageLoader来实现透明度(旧版本的雪碧图仍然存在,如果你很好奇)。如果更换成PNG32为颜色有损的PNG8(以前讨论过)能降低50-100ms的页面加载时间为IE5-6用户。100ms可能并不起眼,但相对于使用滤镜的页面,它至少节省了10%的时间。此外,根据亚马逊研究,100ms的速度意味着1%的销售会减少(即使他们是内容型网页)。增加1%的收入而只需要更换一个图片看起来是笔好买卖。
所以,现在怎么做?
最好的事情是避免AlphaImageLoader像雅虎搜索一样,花时间去创造PNG8让它在IE6及其它浏览器中都有最好的表现。那么如何创建一个优美的PNG8呢?首先创建一个GIF图片,只有一个完全透明或完全不透明的像素。然后确保它看起来可以接受的(如同它在IE6的表现),继续加强与半透明有关的像素比如圆角或任何受益于透明度的图像。遗憾的是,据我所知,Fireworks是目前唯一使PNG8拥有Alpha透明度的图像处理软件。你也可以尝试其它工具,如命令行工具 pngnq和pngquant,但因为自动PNG32到PNG8的转换不是总令人满意,你可能需要手动选择完全不透明的像素。
可能有这样的情况:当你将无法用PNG8达到效果而一定需要使用AlphaImageLoader——例如当大部分或全部图像是半透明(比如视频缩略图上的“PLAY”图标)。Dave Artz在美国在线有一些 其他案件显示PNG8并不够完美。在这些情况下(当然,也在你尽量说服设计师重新考虑使用透明度未果情况下),请确保你使用下划线HACK(_filter),使之不影响IE7的用户。
有时,有人用为IE6使用GIF而为其它浏览器使用PNG32,但是这样完全没有必要,一个PNG8就能在兼容两种不同的显示和alpha透明。
使用PNG8的更多好处:
PNG8通常比PNG32小
在所有浏览器下只使用一个图像
CSS比较清爽,不用特别使用HACK或标签
背景能够平铺