- 浏览: 304173 次
- 性别:
- 来自: 长沙
文章分类
最新评论
-
完善自我:
支持一下!
揭秘IT人才特点:中美印日四国程序员比较 -
悲剧了:
好文,看玩thinking in java的提到的异常处理,看 ...
高效的Java异常处理框架(转) -
yin_bp:
开源框架bbossgroups页支持组件异步方法调用哦,详情请 ...
Spring 3中异步方法调用 -
flyjava:
sun的悲哀
Apache怒了,威胁说要离开JCP
一、缩小图片大小
当图片很多的时候,减少图片大小是提高下载速度最直接的方法。
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代码头部
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;
};
原文:http://www.blogjava.net/BearRui/archive/2010/02/22/web_performance_image.html
发表评论
-
Web编程是函数式编程
2010-11-30 13:44 1025任何一位在两个领域里 ... -
如何开发Web应用程序
2010-11-30 13:41 1062这是一个经常被问到的 ... -
设计Web应用程序时要注意可伸缩性
2010-11-26 09:19 875Max Indelicato是一位软件 ... -
Web 2.0应用客户端性能问题十大根源
2010-11-25 20:19 987Web 2.0应用的推广为用户带来了全新的体验,同时也让开 ... -
HTML压缩(JSP的GZIP实现)
2010-11-24 22:31 4890HTTP 压缩可以大大提高浏览网站的速度,它的 ... -
浏览器加载和渲染html的顺序
2010-11-22 09:45 25021.浏览器加载和渲染html的顺序 1、IE下载的顺序是从上到 ... -
在服务端合并和压缩JavaScript和CSS文件
2010-11-22 09:16 1083Web性能优化最佳实践中最重要的一条是减少HTTP请求 ... -
用 YUI Compressor 压缩和混淆 JS 和 CSS
2010-11-22 09:05 2293一、简介: 目前开发Web应用Javas ... -
如何缓存DWR生成的JS文件
2010-11-18 17:37 1930DWR provides a convenient mec ... -
HTTP状态一览
2010-11-17 22:43 734在网站建设的实际应用中,容易出现很多小小的失误,就像m ... -
两款HTTP流量分析工具的比较:HTTP Watch,Fiddler
2010-11-17 17:26 0做Web开发或者Web分析经常需要查看Http通讯的过程, ... -
了解CSS的查找匹配原理,让CSS更简洁、高效
2010-11-17 16:49 0用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知 ... -
高性能WEB开发 - flush让页面分块,逐步呈现
2010-11-17 16:47 0在处理比较耗时的请求的时候,我们总希望先让用户先 ... -
WEB高性能开发 - 疯狂的HTML压缩
2010-11-17 16:46 0前言: ... -
该如何加载google-analytics(或其他第三方)的JS
2010-11-17 16:44 0很多网站为了获取用户访问网站的统计信息,使用了go ... -
高性能WEB开发 - 页面呈现、重绘、回流。
2010-11-17 15:57 0页面呈现流程 在讨论页面重绘、回流之前。需要 ... -
高性能WEB开发 - JS、CSS的合并、压缩、缓存管理
2010-11-17 15:54 0本篇文章主要讨论下目前JS,CSS 合并、压缩、缓存 ... -
高性能WEB开发- 减少请求,响应的数据量
2010-11-17 15:49 0上一篇中我们说 ... -
高性能WEB开发 - 为什么要减少请求数,如何减少请求数!
2010-11-17 15:42 0http请求头的数据量 我们先分析下 ... -
高性能web开发 - 如何加载JS,JS应该放在什么位置?
2010-11-17 15:39 0外部JS的阻塞下载 所有浏览器在下载JS的时候, ...
相关推荐
高性能WEB开发 图片篇,图片在一定的程度上,影响着页面的加载速度。
新产品为了效果,做的比较炫,用了很多的图片和JS,所以前端的性能是很大的问题,分篇记录前端性能优化的一些小经验。
新产品为了效果,做的比较炫,用了很多的图片和JavaScript,所以前端的性能是很大的问题,分篇记录前端性能优化的一些小经验。因tomcat处理静态资源的速度比较慢,所以首先想到的就是把所有静态资源(JS,CSS,image,...
由国内著名技术社区联合推荐的2012年IT技术力作:《高性能Linux服务器构建实战:运维监控、性能调优与集群应用》,即将上架发行,此书从Web应用、数据备份与恢复、网络存储应用、运维监控与性能优化、集群高级应用等...
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 负载生成器管理 ...
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 负载生成器管理 ...
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 负载生成器管理 ...
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 负载生成器管理 ...
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 负载生成器管理 ...
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 负载生成器管理 ...
Web开发: 使用URL重写WEB主题切换 如何在Asp.Net1.1中实现页面模板(所谓的MasterPage技术) Tool Tip 示例(FILTER版) Tool Tip示例 (htc版) 一个.net发送HTTP数据实体的类 按键跳转以及按Enter以不同参数提交,及...
iOS中开发性能优化方法,其中包括:内存优化、资源文件优化、延迟加载、持久化优化、使用可重用对象、多线程以及程序编译参数等方面介绍性能优化。 第18章“管理好你的程序代码——代码版本控制”。学习如何使用Git...
《测试实践丛书:性能测试进阶指南·LoadRunner 11实战》结合了很多工作中的实际案例,图文并茂,既适合渴望了解性能测试的新人,也适合对性能测试有一定认识和经验的中、高级测试工程师。同时,《测试实践丛书:...
《测试实践丛书:性能测试进阶指南·LoadRunner 11实战》结合了很多工作中的实际案例,图文并茂,既适合渴望了解性能测试的新人,也适合对性能测试有一定认识和经验的中、高级测试工程师。同时,《测试实践丛书:...
《测试实践丛书:性能测试进阶指南·LoadRunner 11实战》结合了很多工作中的实际案例,图文并茂,既适合渴望了解性能测试的新人,也适合对性能测试有一定认识和经验的中、高级测试工程师。同时,《测试实践丛书:...
目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, ...