高性能WEB开发 图片压缩篇

优点：使用简单 缺点：性能损耗很大,AlphaImageLoader会花费很多资源去处理透明图片，使用AlphaImageLoader,IE使用内存会迅速上升。 而且AlphaImageLoader所有处理都在同1个线程中同步进行，所以当AlphaImageLoader多的时候，会阻塞UI的渲染。 使用_filter，IE7也可以识别，其实IE7是可以识别PNG透明图片的，如果在IE7下使用上面代码，IE7不会直接使用图片，而是使用AlphaImageLoader。 注：个人建议尽量避免使用AlphaImageLoader 2. JS处理 使用DD_belatedPNG(http://www.dillerdesign.com/experiment/DD_belatedPNG/),可以很简单的对界面上所有的透明图片进行同一处理。 优点：使用简单(比AlphaImageLoader还简单) 缺点：当页面上需要处理的图片比较多的时候，速度也比较慢，而且不能动态改变图片。 3. VML IE6支持VML，VML可以使用透明图片，代码如下： 修改html代码头部 html xmlns ="http://www.w3.org/1999/xhtml" xmlns:v > head > style type ="text/css" > v:* { behavior : url(#default#VML) ; } span style="color: rgb(128, 0, 0);">style > span style="color: rgb(128, 0, 0);">head > body > v:image src ="image.png" /> span style="color: rgb(128, 0, 0);">body > span style="color: rgb(128, 0, 0);">html > 优点：性能好，速度快 缺点：使用复杂，而且不支持firefox等浏览器，需要判断不同的浏览器输出不同的HTML代码。 四、多域名下载图片 因每个浏览器对同1个域名同时只能发送固定的请求，比如IE6好像是2个，所以可以对图片资源开通多个域名进行请求， 比如img1.abc.com,img2.abc.com。但域名不要开启太多，因为解析域名和打开新的连接都需要消耗时间，域名多了，说不定反而会更慢。一般2-4个域名就够了。 五、IE6下缓存背景图片 IE6背景图片缓存是个麻烦事，很多人知道使用下面的JS来让IE6缓存背景图片 try{ document.execCommand("BackgroundImageCache", false, true); }catch(e){} 但是这样做的效果并不是非常好，当出现鼠标移动改变背景图片的时候，IE6老是会发送1个图片请求(尽管该背景图片已经下载)， 虽然返回结果是304，但还是要花费不少时间。在这种情况下，可以使用下面1个变通的方式来处理， 在页面上直接使用1个DIV元素来加载该图片，这样加载图片就能真正被缓存，鼠标移动也不会发送请求了。 六、预加载图片 使用下面代码可以在页面加载完毕后预加载下1个页面的图片，当进入下1个页面就不用再下载图片了。