- 浏览: 799712 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
yuhanwm910731:
我现在需要实现复选(非级联选择)的树形下拉菜单,麻烦发给我一份 ...
extjs3.X支持树型的下拉控件 -
shine1200:
“所以咱们现在设置的虚拟路径“/message/upload/ ...
weblogic虚拟路径的配置和使用(2) -
icefireforest:
Fangrn 写道jx_dream 写道楼主,我最近在做树形下 ...
extjs3.X支持树型的下拉控件 -
cloudfile:
谢谢分享!
c++库c#调用开发时需要注意的一点 -
xuweilinbegin:
我也要一份哦:xuweilin15353@163.com,谢谢 ...
extjs3.X支持树型的下拉控件
本篇文章主要讨论下目前JS,CSS 合并、压缩、缓存管理存在的一些问题,然后分享下自己项目中用到的1个处理方案,并提供1个实例下载。
存在的问题
:
合并、压缩文件主要有2方面的问题:
1. 每次发布的时候需要运行一下自己写的bat文件或者其他程序把文件按照自己的配置合并和压缩。
2.
因生产环境和开发环境需要加载的文件不一样,生产环境为了需要加载合并、压缩后的文件,而开发环境为了修改、调试方便,需要加载非合并、压缩的文件,所以
我们常常需要在JSP中类似与下面的判断代码:
<c:if test="${env=='prod'}"><script type="text/javascript" src="/js/all.js"></script></c:if><c:if test="${env=='dev'}"><script type="text/javascript" src="/js/1.js"></script><script type="text/javascript" src="/js/2.js"></script><script type="text/javascript" src="/js/3.js"></script></c:if>
缓存问题:在现在JS满天飞的时代,大家都知道缓存能带来的巨大好处,但缓存确实非常麻烦的一个问题,相信很多人曾经历过下面的情况:为了让程序更快,
在服务器上为JS加上缓冲5天的代码,但产品更新后第二天就接到电话说系统出错,详细了解后就发现是缓存引起的,让用户删除缓存后就会OK。原因很简单,
就是你JS已经修改了,但用户还在使用缓存中的老JS。在经历几次这种情况,被领导数落了几次后。没办法只能把JS的缓冲去掉,或者改成8个小时。可这样
就完全失去了缓存的优势了,哪我们到底需要解决哪些问题才能让我们使用缓冲顺心如意了?
1. 如何在修改了某个JS后,自动把所有引用该JS页面的代码中加上1个版本号?
2. 该如何生成版本号,根据什么来产生这个版本号。
可能有人为了解决上面的缓存问题,写了个JSP标签,通过标签读取JS、css文件的修改时间来作为版本号,从而来解决上面2个问题。但这种方法有下面
几个缺点:
1. 每次请求都要通过标签读取读取文件的修改时间,速度慢。当然你可以把文件的修改时间放到缓存中,这样也会加到了内存使用量。
2. 在HTML静态页面中用不了
3.
如果你们公司是如下的部署发布方式(我们公司就是这样),则会失效。每次发布,不是直接覆盖之前的WEB目录,运维的为的发布方便,要求每次发布直接给他
们1个war包,他们会把之前WEB目录整个删除,然后上传现在的war包,这样就导致程序运行后,所有文件的最后修改时间都是解压war的时间。
分享自己项目中的处理方案:
为了解决上面讨论过的问题,在下写了1个如下的组件,组件中根据我们自己的实际情况使用了文件大小来做为文件的版本号,虽然在文件修改很小(比如把字符
a改成b),可能文件大小并没有变,导致版本号也不会变。
但这种机率还是非常低的。当然如果你觉的使用文件修改时间作为版本号适合你,只需要修改一行代码就行,下面看下这个组件的处理流程(本来想用流
程图表达,最后还是觉的文字来的直白写):
1. 程序启动(contextInitialized)
2. 搜索程序目录下的所有merge.txt文件,根据merge.txt文件的配置合并文件, merge.txt文件实例如下:
# 文件合并配置文件,多个文件以|隔开,以/开头的表示从根目录开始,# 空格之后的文件名表示合并之后的文件名# 把1,2,3合并到all文件中1.js|2.js|3.js all.js#合并CSS/css/mian.css|/css/common.css all.css
3. 搜索程序目录下所有JS,CSS文件(包括合并后的),每个文件都压缩后生成对应的1个新文件。
4. 搜索程序目录下所有JSP,html文件,把所有JS,css的引用代码改成压缩后并加了版本号的引用。
实例:
实例的文件结构如下图:
看JSP原始代码(程序运行前):
<%@page contentType="text/html" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><% boolean isDev = false; // 是否开发环境%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JSP Page</title><% if(isDev){ %><script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2.js"></script><script type="text/javascript" src="<%=request.getContextPath() %>/js/1.js"></script><script type="text/javascript" src="<%=request.getContextPath() %>/js/2.js"></script><link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/1.css" /><link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/2.css" /><% }else{ %><script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2.js"></script><script type="text/javascript" src="<%=request.getContextPath() %>/js/all.js"></script><link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/all.css" /><% } %></head><body><h1 class="c1">Hello World!</h1></body></html>
程序运行后JSP的代码:
<%@page contentType="text/html" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><%boolean isDev = false; // 是否开发环境%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JSP Page</title><% if(isDev){ %><script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2-3gmin.js?99375"></script><script type="text/javascript" src="<%=request.getContextPath() %>/js/1-3gmin.js?90"></script><script type="text/javascript" src="<%=request.getContextPath() %>/js/2-3gmin.js?91"></script><link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/1-3gmin.css?35" /><link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/2-3gmin.css?18" /><% }else{ %><script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2-3gmin.js?99375"></script><script type="text/javascript" src="<%=request.getContextPath() %>/js/all-3gmin.js?180"></script><link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/all-3gmin.css?53" /><% } %></head><body><h1 class="c1">Hello World!</h1></body></html>
加3gmin后缀的文件全部是程序启动时自动 生成的。
实例下载:猛
击此处下载
PS:自己的设计的处理方案并没有解决"需
要JSP中加判断代码的问题",主要是因为还没有找到什么好的办法去自动删除1.js,2.js,3.js的3个引用,而插入1个新的all.js的引
用,如果那位同学对解决这个问题有好的想法,请不吝赐教。
如果有同学想使用这个组件,建议在测试环境下运行一次后,把修改后的程序直接上传到正式服务器上,然后去掉这个功能,不然在服务器上每次启动都调用这个 功能还是需要花费一些时间和资源的
其实一直想使用SVN中的版本号来控制缓存,这个是最严谨的一个方法,但也因为做起来太复杂,所以一直也没做起来,以后以后有时间可以再研究。
如果有同学想使用这个组件,建议在测试环境下运行一次后,把修改后的程序直接上传到正式服务器上,然后去掉这个功能,不然在服务器上每次启动都调用这个 功能还是需要花费一些时间和资源的
其实一直想使用SVN中的版本号来控制缓存,这个是最严谨的一个方法,但也因为做起来太复杂,所以一直也没做起来,以后以后有时间可以再研究。
评论
1 楼
bohemia
2010-06-24
plz google packtag。it's a nice solution for js and css compression and cache;
发表评论
-
提供IT系统运维支持、系统优化方案
2012-10-26 14:46 6提供IT系统运维支持、系统优化方案,有多个运维实施经验。 ... -
Java指定编码读写文件(UTF-8)
2010-11-30 14:00 3100有时我们需要程序动态生成jsp文件,采取系统默认的编码操作的文 ... -
was6.0发布struts2项目异常
2010-11-18 18:39 1980[10-11-18 18:31:33:609 CST] 000 ... -
利用spring提供的字符编码过滤器
2010-11-14 11:55 1963<!-- spring的字符集过滤器 --> ... -
简单的几句CSS布局口诀
2010-11-10 16:41 956简单的几句CSS布局口诀,就可以写出精简,标准的样式。 ... -
commons-email笔记
2010-11-10 14:38 1367import java.io.UnsupportedE ... -
如何解决 调用jar程序时出现 outofMemory的问题
2010-10-29 12:02 1193我们在调用 打包好的java程序时,如果程序要加载大量数据的话 ... -
GC策略的调优
2010-09-30 22:30 1614GC 策略在 G1 还没成熟的情况下,目前主要有串行、并 ... -
关于Spring和WebLogic版本兼容的一点小提示
2010-09-30 16:31 2058首先 WebLogic 的各个版本和 JDK 绑定的很紧, 或 ... -
删除WebLogic 10的缓存
2010-09-30 16:07 4635在WebLogic 10上部署了一个应用,最近作了更新并重新部 ... -
weblogic如何强制先加载web-inf/lib下的jar
2010-09-30 16:05 4776方法1: 修改WEB-INF\weblogic.xml (如 ... -
用Log4j自动生成日志
2010-09-27 13:28 1632Log4j是Apache基金会的一 ... -
java smslib发送短信
2010-09-10 10:02 1628public class SendMessage { ... -
Spring定时器的两种实现方式
2010-09-01 21:07 1452有两种流行Spring定时 ... -
使用 Commons-Email 在邮件内容中直接嵌入图片
2010-08-31 20:25 1318我们在发送邮件的时候,如果使用HTML在邮件内容中嵌入图片,& ... -
Struts2中转换Date类型的问题
2010-08-29 09:43 1330Web开发会涉及到很多类型转换的情况。我们知道,页面中的一切值 ... -
java smslib 发送短信错误信息
2010-08-25 15:02 4240org.smslib.GatewayException: GS ... -
rxtx取代javax.comm实现Java跨平台设备端口通信
2010-08-24 08:53 2157From Rxtx <!-- start conte ... -
javascript汉字转拼音代码
2010-08-22 08:21 4569使用方法(1):pinyin.go('汉字'); //例:张家 ... -
关于IE等浏览器在下载JAR文件时的,将后缀更改为zip等问题及解决方案
2010-08-03 12:19 1201httpd.conf这个文件中的mime.types上面,打开 ...
相关推荐
基于java的开发源码-JSCSS压缩工具 YUI Compressor.zip 基于java的开发源码-JSCSS压缩工具 YUI Compressor.zip 基于java的开发源码-JSCSS压缩工具 YUI Compressor.zip 基于java的开发源码-JSCSS压缩工具 YUI ...
基于java的开发源码-JS和CSS压缩混淆 JsCompressor.zip 基于java的开发源码-JS和CSS压缩混淆 JsCompressor.zip 基于java的开发源码-JS和CSS压缩混淆 JsCompressor.zip 基于java的开发源码-JS和CSS压缩混淆 ...
Munee是一个集图片尺寸调整、CSS-JS合并/压缩、缓存等功能于一身的PHP库。可以在服务器端和客户端缓存资源。它集成了PHP图片操作库Imagine来实现图片尺寸调整和剪切,之后进行缓存。 Munee可以自动编译LESS、...
Munee是一个集图片尺寸调整、CSS-JS合并/压缩、缓存等功能于一身的PHP库。可以在服务器端和客户端缓存资源。它集成了PHP图片操作库Imagine来实现图片尺寸调整和剪切,之后进行缓存。 Munee可以自动编译LESS、SCSS和...
基于Java的实例开发源码-JSCSS压缩工具 YUI Compressor.zip
基于Java的实例开发源码-JS和CSS压缩混淆 JsCompressor.zip
compress-js-css-v2.0.0.zip.7z HtmlCompressorBundle-master.zip html-minify-master[php压缩html].zip jsmin-php-master[php压缩js].zip minify-2.1.5[php合并js&css].zip Minimee-master.zip packer.php-1.1[php...
JS、CSS合并压缩工具说明 一、工具包简介 二、工具包使用
Pro-Android-Web-Apps-Developing-HTML5-JavaScript-CSS-and-Chrome-OS-Web-Apps.pd
本篇文章主要讨论下目前JS,CSS 合并、压缩、缓存管理存在的一些问题,然后分享下自己项目中用到的1个处理方案,并提供1个实例下载。
web-js-css_jb51.rar
基于Java的源码-JSCSS压缩工具 YUI Compressor.zip
1.目录source:需要压缩的源文件 ...4.合并压缩css.bat 根据source将css进行合并到in目录,并输出到out目录 5.合并js.bat 只将source下数据合并到in目录 6.合并js.bat 只将in下数据合压缩处理到out目录
基于Java的实例源码-JSCSS压缩工具 YUI Compressor.zip
C#开发的JS、CSS压缩工具,项目中的引用全部依赖一个XML配置文件,也是根据这个区压缩。压缩、合并后,以md5命名,这样也改变了客户端缓存。未改变的同一个组文件,md5值不会改变,客户端也无需重新下载。我把这个做...
基于Java的源码-JS和CSS压缩混淆 JsCompressor.zip
JS和CSS合并压缩工具 SpeedJSCSS ,在一个页面中,每一个外部JS及CSS文件都会导致一个额外的HTTP请求。所以,如何合理的合并JS文件...
基于Java的实例源码-JS和CSS压缩混淆 JsCompressor.zip
在不破坏JS/CSS结构的前提下,压缩文件大小/加密 JS CSS文件
这是一个基于YahooYuiCompressor算法的js和css压缩工具(.net版) 可以实现复制和粘贴代码然后压缩,也可以手动打开一个js或css文件(文件内容自动加载),压缩完成后的代码可以另存为为js或css文件 (更新了多线程...