`

高性能WEB开发 - 图片篇

阅读更多

一、缩小图片大小  

当图片很多的时候,减少图片大小是提高下载速度最直接的方法。
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代码头部
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个页面就不用再下载图片了。
window.onload=function(){
   var img = new Image();
   img.src = "images/image.png";
   img = null;
};



[作者]:BearRui(AK-47)
[博客]:  http://www.blogjava.net/bearrui/
[声明]:本博所有文章版权归作者所有(除特殊说明以外),转载请注明出处.

 

原文:http://www.blogjava.net/BearRui/archive/2010/02/22/web_performance_image.html

分享到:
评论

相关推荐

    高性能WEB开发 图片压缩篇

    高性能WEB开发 图片篇,图片在一定的程度上,影响着页面的加载速度。

    高性能WEB开发 nginx HTTP服务器篇

    新产品为了效果,做的比较炫,用了很多的图片和JS,所以前端的性能是很大的问题,分篇记录前端性能优化的一些小经验。

    一、高性能WEB开发基础

    新产品为了效果,做的比较炫,用了很多的图片和JavaScript,所以前端的性能是很大的问题,分篇记录前端性能优化的一些小经验。因tomcat处理静态资源的速度比较慢,所以首先想到的就是把所有静态资源(JS,CSS,image,...

    集群好书《高性能Linux服务器构建实战》 试读章节下载

    由国内著名技术社区联合推荐的2012年IT技术力作:《高性能Linux服务器构建实战:运维监控、性能调优与集群应用》,即将上架发行,此书从Web应用、数据备份与恢复、网络存储应用、运维监控与性能优化、集群高级应用等...

    性能测试进阶指南——LoadRunner11实战_(完整)扫描版_@vs.part1

    3.8.3 图片检查点 3.9 事务 3.9.1 响应时间 3.9.2 添加事务 3.9.3 事务时间 3.9.4 手工事务 3.10 集合点 3.11 小结 第4章 负载生成及监控Controller 4.1 设计场景 4.1.1 新建场景 4.1.2 负载生成器管理 ...

    性能测试进阶指南——LoadRunner11实战_(完整)扫描版_@vs.part2

    3.8.3 图片检查点 3.9 事务 3.9.1 响应时间 3.9.2 添加事务 3.9.3 事务时间 3.9.4 手工事务 3.10 集合点 3.11 小结 第4章 负载生成及监控Controller 4.1 设计场景 4.1.1 新建场景 4.1.2 负载生成器管理 ...

    性能测试进阶指南——LoadRunner11实战_(完整)扫描版_@vs.part5

    3.8.3 图片检查点 3.9 事务 3.9.1 响应时间 3.9.2 添加事务 3.9.3 事务时间 3.9.4 手工事务 3.10 集合点 3.11 小结 第4章 负载生成及监控Controller 4.1 设计场景 4.1.1 新建场景 4.1.2 负载生成器管理 ...

    性能测试进阶指南——LoadRunner11实战_(完整)扫描版_@vs.part4

    3.8.3 图片检查点 3.9 事务 3.9.1 响应时间 3.9.2 添加事务 3.9.3 事务时间 3.9.4 手工事务 3.10 集合点 3.11 小结 第4章 负载生成及监控Controller 4.1 设计场景 4.1.1 新建场景 4.1.2 负载生成器管理 ...

    性能测试进阶指南——LoadRunner11实战_(完整)扫描版_@vs.part6

    3.8.3 图片检查点 3.9 事务 3.9.1 响应时间 3.9.2 添加事务 3.9.3 事务时间 3.9.4 手工事务 3.10 集合点 3.11 小结 第4章 负载生成及监控Controller 4.1 设计场景 4.1.1 新建场景 4.1.2 负载生成器管理 ...

    性能测试进阶指南——LoadRunner11实战_(完整)扫描版_@vs.part3

    3.8.3 图片检查点 3.9 事务 3.9.1 响应时间 3.9.2 添加事务 3.9.3 事务时间 3.9.4 手工事务 3.10 集合点 3.11 小结 第4章 负载生成及监控Controller 4.1 设计场景 4.1.1 新建场景 4.1.2 负载生成器管理 ...

    asp.net知识库

    Web开发: 使用URL重写WEB主题切换 如何在Asp.Net1.1中实现页面模板(所谓的MasterPage技术) Tool Tip 示例(FILTER版) Tool Tip示例 (htc版) 一个.net发送HTTP数据实体的类 按键跳转以及按Enter以不同参数提交,及...

    《iOS6开发指南》精彩书摘

    iOS中开发性能优化方法,其中包括:内存优化、资源文件优化、延迟加载、持久化优化、使用可重用对象、多线程以及程序编译参数等方面介绍性能优化。 第18章“管理好你的程序代码——代码版本控制”。学习如何使用Git...

    性能测试进阶指南——LoadRunner11实战 part3

    《测试实践丛书:性能测试进阶指南·LoadRunner 11实战》结合了很多工作中的实际案例,图文并茂,既适合渴望了解性能测试的新人,也适合对性能测试有一定认识和经验的中、高级测试工程师。同时,《测试实践丛书:...

    性能测试进阶指南——LoadRunner11实战 part1

    《测试实践丛书:性能测试进阶指南·LoadRunner 11实战》结合了很多工作中的实际案例,图文并茂,既适合渴望了解性能测试的新人,也适合对性能测试有一定认识和经验的中、高级测试工程师。同时,《测试实践丛书:...

    性能测试进阶指南——LoadRunner11实战 part2

    《测试实践丛书:性能测试进阶指南·LoadRunner 11实战》结合了很多工作中的实际案例,图文并茂,既适合渴望了解性能测试的新人,也适合对性能测试有一定认识和经验的中、高级测试工程师。同时,《测试实践丛书:...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, ...

Global site tag (gtag.js) - Google Analytics