- 浏览: 800560 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
yuhanwm910731:
我现在需要实现复选(非级联选择)的树形下拉菜单,麻烦发给我一份 ...
extjs3.X支持树型的下拉控件 -
shine1200:
“所以咱们现在设置的虚拟路径“/message/upload/ ...
weblogic虚拟路径的配置和使用(2) -
icefireforest:
Fangrn 写道jx_dream 写道楼主,我最近在做树形下 ...
extjs3.X支持树型的下拉控件 -
cloudfile:
谢谢分享!
c++库c#调用开发时需要注意的一点 -
xuweilinbegin:
我也要一份哦:xuweilin15353@163.com,谢谢 ...
extjs3.X支持树型的下拉控件
一、缩小图片大小
当图片很多的时候,减少图片大小是提高下载速度最直接的 方法。
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代码头部
<!-- <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 >优点:性能好,速度快
缺点:使用复杂,而且不支持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元素来加载该图片,这样加载图片就能真正被缓存,鼠标移动也不会发送请求了。
<!-- </span><span style="color: rgb(0, 128, 0);">[if IE 6]></span></span>
<div style="background-color: rgb(238, 238, 238); font-size: 13px; border-left-color: rgb(204, 204, 204); padding: 4px 5px 4px 4px; width: 98%;"><span style="color: rgb(0, 128, 0);">
<div style="background-image:url(images/image.png);display:none;"></div>
<br />
<![endif]</span><span style="color: rgb(0, 128, 0);">-->
六、预加载图片
使用下
面代码可以在页面加载完毕后预加载下1个页面的图片,当进入下1个页面就不用再下载图片了。
window.onload=function(){
var img = new Image();
img.src = "images/image.png";
img = null;
};
发表评论
-
提供IT系统运维支持、系统优化方案
2012-10-26 14:46 6提供IT系统运维支持、系统优化方案,有多个运维实施经验。 ... -
Java指定编码读写文件(UTF-8)
2010-11-30 14:00 3107有时我们需要程序动态生成jsp文件,采取系统默认的编码操作的文 ... -
was6.0发布struts2项目异常
2010-11-18 18:39 1983[10-11-18 18:31:33:609 CST] 000 ... -
利用spring提供的字符编码过滤器
2010-11-14 11:55 1965<!-- spring的字符集过滤器 --> ... -
简单的几句CSS布局口诀
2010-11-10 16:41 961简单的几句CSS布局口诀,就可以写出精简,标准的样式。 ... -
commons-email笔记
2010-11-10 14:38 1370import java.io.UnsupportedE ... -
如何解决 调用jar程序时出现 outofMemory的问题
2010-10-29 12:02 1200我们在调用 打包好的java程序时,如果程序要加载大量数据的话 ... -
GC策略的调优
2010-09-30 22:30 1622GC 策略在 G1 还没成熟的情况下,目前主要有串行、并 ... -
关于Spring和WebLogic版本兼容的一点小提示
2010-09-30 16:31 2061首先 WebLogic 的各个版本和 JDK 绑定的很紧, 或 ... -
删除WebLogic 10的缓存
2010-09-30 16:07 4636在WebLogic 10上部署了一个应用,最近作了更新并重新部 ... -
weblogic如何强制先加载web-inf/lib下的jar
2010-09-30 16:05 4780方法1: 修改WEB-INF\weblogic.xml (如 ... -
用Log4j自动生成日志
2010-09-27 13:28 1634Log4j是Apache基金会的一 ... -
java smslib发送短信
2010-09-10 10:02 1628public class SendMessage { ... -
Spring定时器的两种实现方式
2010-09-01 21:07 1455有两种流行Spring定时 ... -
使用 Commons-Email 在邮件内容中直接嵌入图片
2010-08-31 20:25 1322我们在发送邮件的时候,如果使用HTML在邮件内容中嵌入图片,& ... -
Struts2中转换Date类型的问题
2010-08-29 09:43 1335Web开发会涉及到很多类型转换的情况。我们知道,页面中的一切值 ... -
java smslib 发送短信错误信息
2010-08-25 15:02 4244org.smslib.GatewayException: GS ... -
rxtx取代javax.comm实现Java跨平台设备端口通信
2010-08-24 08:53 2158From Rxtx <!-- start conte ... -
javascript汉字转拼音代码
2010-08-22 08:21 4571使用方法(1):pinyin.go('汉字'); //例:张家 ... -
关于IE等浏览器在下载JAR文件时的,将后缀更改为zip等问题及解决方案
2010-08-03 12:19 1206httpd.conf这个文件中的mime.types上面,打开 ...
相关推荐
高性能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, ...