YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Avoid AlphaImageLoader filter

前端性能优化:Avoid AlphaImageLoader filter

今天要介绍的YSlow前端性能优化规则是:Avoid AlphaImageLoader filter(避免是使用 AlphaImageLoader 滤镜)。

AlphaImageLoader 滤镜是做什么的

可能有些接触前端不太久的朋友还不知道 AlphaImageLoader 滤镜是做什么的, AlphaImageLoader 是IE中浏览器中特有一个CSS滤镜,可以处理IE6浏览器中图处理PNG图片的透明底色的问题。这个属性在《pngfix.js IE7 以下浏览器中处理 PNG 图片背景透明的解决方案》一文中有介绍过:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

AlphaImageLoader 对性能的影响

YSlow 的文档介绍了AlphaImageLoader 滤镜对前端性能的影响:

The IE-proprietary AlphaImageLoader filter aims to fix a problem with semi-transparent true color PNGs in IE versions < 7. The problem with this filter is that it blocks rendering and freezes the browser while the image is being downloaded. It also increases memory consumption and is applied per element, not per image, so the problem is multiplied.

it blocks rendering and freezes the browser while the image is being downloaded,使用了AlphaImageLoader 滤镜,在图片下载完成之前,会组织页面渲染其他的组件,使浏览器被卡死。而我们知道,普通的图片的下载是一个类似异步的加载过程,并不会导致浏览无法加载解析其他的组件。 使用 AlphaImageLoader 滤镜对于前端性能的影响还是挺大的。

Avoid AlphaImageLoader filter

前面介绍了,AlphaImageLoader 主要是针对 IE6 浏览器对PNG图片透明处理的缺陷才会使用的一个处理手段。所以我们 Avoid AlphaImageLoader filter的手段,最根本就是不使用PNG格式的透明图片,而使用GIF格式的透明图片替代,IE6 对GIF格式的透明的图片的支持是不错的。

当然,从图片的透明效果出发,使用PNG图片的透明效果要比GIF格式的要更好,如果你的网站对视觉效果要求比较好,必须使用PNG格式的透明图片,为了兼容IE6也就只能使用 AlphaImageLoader 滤镜了。不过请记得,只有IE6中会有PNG透明问题,所以在使用 AlphaImageLoader 滤镜的时候,请采用只针对IE6的CSS HACK写法,例如:

// hack only for IE
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

针对IE6浏览器处理,除了CSS HACK之外,另外的一种办法就是使用 pngfix.js 中的处理策略,使用浏览器版本注释:

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js">
</script>
<![endif]-->

<!--[if lt IE 7]>
<style type="text/css">
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
</style>
<![endif]-->

IE6中背景PNG图片透明的问题

这里要说明,前面提到的 AlphaImageLoader 滤镜是针对的 IMG 标签中的图片处理,而我们现在使用CSS Sprites把页面中的修饰性的图片整合到一起的时候,图片之间也是采用的透明处理。前面也提到了,PNG格式的透明效果更好,所以我们制作CSS Sprites图片的时候也大多使用的PNG格式。但是,如果还需要兼容IE6,那么PNG图片透明的问题就摆在了你的面前。

其实,处理背景透明的时候,我们也是跟处理IMG图片采用同样的HACK策略:

// for >IE7 and other browsers
background:transparent url(sprites.png) 0 0 no-repeat;
// only for IE6
_background:transparent url(sprites.png) 0 0 no-repeat;

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Avoid AlphaImageLoader filter

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)