YSLOW性能测试前端调优23大规则(20)避免过滤器

AlphalmageLoader过滤器是IE浏览器专有的一个关于图片的属性，主要是为了解决半透明真彩色的PNG显示问题。

AlphalmageLoader的语法如下：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

属性：

enabled：是一个布尔值，表示是否**滤镜功能，true表示**，false表示禁止。

sizingMethod：设置或检索滤镜对图片所在的对象容器边界内显示方式。

Ø crop：表示会对图片进行剪切让其适应对象尺寸。

Ø image：增大或减小对象的尺寸边界以适应图片的尺寸，默认值。

Ø scale：通过缩放图片的方法来适应对象的尺寸边界。

src：表示背景图像的绝对或相对的URL地址。

下面是一个使用的实例：

站在性能分析的角度，不建议使用AlphalmageLoader过滤器主要原因如下：

1. 会增加内在的消耗，因为在加载过程不是按图像应用来加载的，而是按每个元素应用来加载的。

如果使用抓包工具或页面分析工具会发现，使用AlphalmageLoader过滤器请求的时候明显会更长，并且所消耗的内存也会明显增多。

2.这个过滤器在下载图片时会阻止浏览器进行渲染并且冻结浏览器。

上面是一个测试页面，当加载到wap_logo.png（使用AlphaImageLoader过滤器处理）这个图片时，浏览器被冻结，此时浏览器无法动弹，冻结的时间超过1秒。

并且需要注意的是，并行下载不会被阻止，浏览器仍然在后台下载其他页面组件，但是没有渐进式渲染。

由于以上原因所以建议尽量避免使用AlphalmageLoader过滤器， 为了解决对这类透明度的过滤器的问题，通常还有以下两种方法：

1.使用VML透明度

VML是IE浏览器中关于PNG透明的另一种方法，

例如：定义一个div里面有一个vim空间

<v：rect>

<v：fill type =“ tile” src =“ test.png”>

</ v：fill>

</ v：rect>

再声明一个VML名称空间：

<xml:namespace ns=“urn:schemas-microsoft-com:vml” prefix=“v” />

在样式表中写以下内容：

v:rect {

behavior:url(#default#VML);

width: 500px;

height: 500px;

display: block;

}

v:fill {

behavior:url(#default#VML);

2.使用其它的过滤器

当然AlphaImageLoader并不是唯一存在的过滤器，另一种流行的是不透明度滤镜。

例如：如果需要对50％不透明度，那么可以使用以下属性。

Ø opacity: 0.5 (一般标准的用以)

Ø -moz-opacity: 0.5 (Mozilla和Firefox早期版本)

Ø filter: alpha(opacity=50)(对于IE浏览器)