高性能WEB开发

Fangrn

一、缩小图片大小

当图片很多的时候，减少图片大小是提高下载速度最直接的方法。
1. 使用PNG8代替GIF(非动画图片)，因为PNG8在效果一样的情况，图片大小比GIF要小。
 
2. 用fireworks处理PNG图片，在我们产品中很多PNG图片是美工直接用photoshop导出的，
    后来让美工用fireworks处理PNG(大概的方式是选择保存为PNG8,删除背景色)。
    处理后100K的图片大小基本减少了3/4，但图片质量也会有少许降低，要看自己是否能接受。

3. 使用Smush.it(http://www.smushit.com/ysmush.it/)压缩图片，Smush.it是YUI团队做1个在线压缩图片的网站，
   该网站在不影响原图片的质量下去掉图片中一些元数据，所以可以放心使用该网站进行压缩，
   但这个压缩比例也是比较有限的。

 
二、合并图片和拆分图片

1. CSS Sprites合并图片以减少请求数来提高性能大家都知道。但不要把图片合并太多，太多太大了，
就会因为这1个图片影响这个页面的显示了。

2. 有时候我们需要把1个大图片拆分成多个小图片，比如产品首页图片比较少，就1个很大的banner图片，
因浏览器都可以并发下载图片，所以如果不拆分，只使用1个大图片的话，下载速度反而会比较慢

 
三、透明图片处理

IE6不能显示透明的PNG图片，是很多开发人员特别头疼的事，分别介绍下几种方式的优缺点。

1.使用AlphaImageLoader，IE6支持filter,使用下面的CSS代码，可以让IE6支持PNG
  #some-element {
    background: url(image.png);
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
  }
优点：使用简单
缺点：性能损耗很大,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代码头部

<blockquote class="webkit-indent-blockquote" style="margin: 0pt 0pt 0pt 40px; border: medium none; padding: 0px;"><div style="background-color: #eeeeee; font-size: 13px; border-left-color: #cccccc; padding: 4px 5px 4px 4px; width: 98%;"><!-- <br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->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>