- 浏览: 818321 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 3133有时我们需要程序动态生成jsp文件,采取系统默认的编码操作的文 ... -
was6.0发布struts2项目异常
2010-11-18 18:39 2016[10-11-18 18:31:33:609 CST] 000 ... -
利用spring提供的字符编码过滤器
2010-11-14 11:55 2052<!-- spring的字符集过滤器 --> ... -
简单的几句CSS布局口诀
2010-11-10 16:41 1058简单的几句CSS布局口诀,就可以写出精简,标准的样式。 ... -
commons-email笔记
2010-11-10 14:38 1402import java.io.UnsupportedE ... -
如何解决 调用jar程序时出现 outofMemory的问题
2010-10-29 12:02 1277我们在调用 打包好的java程序时,如果程序要加载大量数据的话 ... -
GC策略的调优
2010-09-30 22:30 1656GC 策略在 G1 还没成熟的情况下,目前主要有串行、并 ... -
关于Spring和WebLogic版本兼容的一点小提示
2010-09-30 16:31 2100首先 WebLogic 的各个版本和 JDK 绑定的很紧, 或 ... -
删除WebLogic 10的缓存
2010-09-30 16:07 4672在WebLogic 10上部署了一个应用,最近作了更新并重新部 ... -
weblogic如何强制先加载web-inf/lib下的jar
2010-09-30 16:05 4832方法1: 修改WEB-INF\weblogic.xml (如 ... -
用Log4j自动生成日志
2010-09-27 13:28 1678Log4j是Apache基金会的一 ... -
java smslib发送短信
2010-09-10 10:02 1656public class SendMessage { ... -
Spring定时器的两种实现方式
2010-09-01 21:07 1532有两种流行Spring定时 ... -
使用 Commons-Email 在邮件内容中直接嵌入图片
2010-08-31 20:25 1361我们在发送邮件的时候,如果使用HTML在邮件内容中嵌入图片,& ... -
Struts2中转换Date类型的问题
2010-08-29 09:43 1396Web开发会涉及到很多类型转换的情况。我们知道,页面中的一切值 ... -
java smslib 发送短信错误信息
2010-08-25 15:02 4273org.smslib.GatewayException: GS ... -
rxtx取代javax.comm实现Java跨平台设备端口通信
2010-08-24 08:53 2189From Rxtx <!-- start conte ... -
javascript汉字转拼音代码
2010-08-22 08:21 4612使用方法(1):pinyin.go('汉字'); //例:张家 ... -
关于IE等浏览器在下载JAR文件时的,将后缀更改为zip等问题及解决方案
2010-08-03 12:19 1238httpd.conf这个文件中的mime.types上面,打开 ...
相关推荐
在高性能网站Web开发中,图片管理是一个至关重要的环节。它涉及到如何有效地存储、处理、优化以及展示图片,以提升用户体验并降低服务器负载。本篇内容将深入探讨与图片管理相关的技术点,结合提供的"ImageConvert....
总结,"web-twain-vue-advanced-main.zip"提供了一套完整的在线扫描解决方案,结合Vue.js 3.2.13的强大功能,使得在Web应用程序中实现高质量的扫描体验成为可能。开发者可以通过深入理解Web-Twain的API和Vue的组件化...
在高性能WEB开发中,图片处理是提高页面加载速度的关键因素之一。图片压缩技术能够有效减小图片文件的大小,从而加快网页的加载时间。接下来,我将详细阐述图片压缩篇中的几个重要知识点。 一、缩小图片大小 当...
本篇文章将详细探讨“jmessage-sdk-web-2.6.0 (1).zip”压缩包中的Web端SDK Demo,为开发者提供全面的参考指南。 一、极光IM概述 极光IM,全称为JMessage,是极光公司推出的一款跨平台的即时通讯服务。它提供了丰富...
【高性能WEB开发:Nginx HTTP服务器篇】 前端性能优化对于现代互联网产品至关重要,特别是当产品设计追求炫酷效果,大量使用图片和JavaScript时。为了提高用户体验,减少服务器负载,通常需要对静态资源进行有效...
这篇资料集合显然包含了关于如何进行海康NVR的WEB开发的详细教程和官方插件资源。 1. **海康NVR API接口** 海康NVR提供了丰富的API接口,允许开发者通过HTTP或HTTPS协议进行通讯,实现如视频流的获取、录像回放、...
在实战开发方面,本教程详细介绍了控制器(controller)、模型(model)和验证器(Validate)的使用方法,这些都是构建一个Web应用不可或缺的部分。特别地,API开发部分详细说明了单条信息显示、复杂关联显示、信息...
在Web开发中,为了增强用户体验,常常需要在网页上实现图片的查看功能,这通常涉及到图片查看插件的使用。本篇文章将详细讲解一个适用于Web页面的图片查看插件,该插件支持图片的旋转、放大、缩小等多种操作,极大地...
### WEB前端开发课程计划知识点概览 #### 一、课程安排 - **培训周期**:为期2个月。 - **上课时间**:工作日晚上19:00至21:00;周末上午8:30至11:30,下午13:30至16:30。 - **每课时长度**:50分钟,课间休息10...
在当今的Web开发领域,Laravel框架因其优雅的语法、强大的功能和高效的开发流程而备受开发者喜爱。本篇文章将深入探讨Laravel的开发环境搭建,以及如何利用Laravel-Admin-Panel创建一个高效的后台管理系统。 ### 一...
在Laravel框架中,处理图像大小调整是常见的需求,特别是在构建Web应用时,我们需要确保图片在不同设备和屏幕尺寸上展示得恰到好处。"Laravel开发-resize-image"项目就是为了实现这一目标,通过预定义的尺寸来优化...
因此,对于网站管理员和开发人员来说,了解并掌握高性能网站建设的方法至关重要。本篇指南将深入探讨Web前端性能优化的相关知识点,帮助您构建一个快速、高效、响应迅速的网站。 首先,我们要认识到性能优化的重要...
新产品为了效果,做的比较炫,用了很多的图片和JavaScript,所以前端的性能是很大的问题,分篇记录前端性能优化的一些小经验。因tomcat处理静态资源的速度比较慢,所以首先想到的就是把所有静态资源(JS,CSS,image,...
对于大量或高分辨率的图片,处理可能会耗时较长。为了不阻塞用户请求,可以将图像处理放入 Laravel 的队列中异步执行。创建一个新的队列作业,并使用 `Resized` 类进行处理: ```php use Illuminate\Bus\Queueable; ...
理解这些基础概念和技术对于构建高性能、可扩展的微服务至关重要。同时,模板引擎的使用进一步提升了Web应用的用户体验和开发效率。在实际项目中,结合这些知识,我们可以更好地设计和实现复杂的微服务系统。
**正文** 在Laravel框架中,开发者经常需要处理生成PDF或图像的需求,这在Web应用中非常常见,比如创建收据、报告或者用户手册等。...正确配置和使用,能确保生成高质量的文档和图片,满足各种业务需求。
在现代Web开发中,使用云存储服务已经成为一种趋势,这有助于减轻服务器压力,提高数据安全性,并方便地扩展存储需求。Laravel框架作为PHP的热门选择,提供了与多种云存储服务集成的能力,其中包括谷歌云存储...
本篇将深入解析基于Java Web开发的个人博客系统源码,这是一个适合初学者学习和实践的项目。通过这个项目,你可以了解到Java Web开发的基本框架、技术栈以及核心概念。 1. **技术栈概述** - **Java Servlet**:...