posts - 36, comments - 419, trackbacks - 0, articles - 0
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

前言:    

     上一篇随笔中网友 skyaspnet 问我如何压缩HTML,当时回答是推荐他使用gzip,后来想想,要是能把所有的html,jsp(aspx)在运行前都压缩成1行未免不是一件好事啊。一般我们启动gzip都比较少对html启动gzip,因为现在的html都是动态的,不会使用浏览器缓存,而启用gzip的话每次请求都需要压缩,会比较消耗服务器资源,对js,css启动gzip比较好是因为js,css都会使用缓存。我个人觉得的压缩html的最大好处就是一本万利,只要写好了一次,以后所有程序都可以使用,不会增加任何额外的开发工作。

 

     在“JS、CSS的合并、压缩、缓存管理”一文中说到自己写过的1个自动合并、压缩JS,CSS,并添加版本号的组件。这次把压缩html的功能也加入到该组件中,流程很简单,就是在程序启动(contextInitialized or Application_Start)的时候扫描所有html,jsp(aspx)进行压缩。

 

压缩的注意事项:

     实现的方式主要是用正则表达式去查找,替换。在html压缩的时候,主要要注意下面几点:

          1. pre,textarea 标签里面的内容格式需要保留,不能压缩。

          2. 去掉html注释的时候,有些注释是不能去掉的,比如:<!--[if IE 6]> ..... <![endif]-->

          3. 压缩嵌入式js中的注释要注意,因为可能注释符号会出现在字符串中,比如: var url = "http://www.cnblogs.com";    // 前面的//不是注释

              去掉JS换行符的时候,不能直接跟一下行动内容,需要有空格,考虑下面的代码:

              else

                 return;

             如果不带空格,则变成elsereturn。

          4. jsp(aspx) 中很有可能会使用<% %>嵌入一些服务器代码,这个时候也需要单独处理,里面注释的处理方法跟js的一样。

 

源代码:

    下面是java实现的源代码,也可以 猛击此处 下载该代码,相信大家都看的懂,也很容易改成net代码:
      1 import java.io.StringReader;

  2 import java.io.StringWriter;
  3 import java.util.*;
  4 import java.util.regex.*;
  5 
  6 /*******************************************
  7  * 压缩jsp,html中的代码,去掉所有空白符、换行符
  8  * @author  bearrui(ak-47)
  9  * @version 0.1
 10  * @date     2010-5-13
 11  *******************************************/
 12 public class HtmlCompressor {
 13     private static String tempPreBlock = "%%%HTMLCOMPRESS~PRE&&&";
 14     private static String tempTextAreaBlock = "%%%HTMLCOMPRESS~TEXTAREA&&&";
 15     private static String tempScriptBlock = "%%%HTMLCOMPRESS~SCRIPT&&&";
 16     private static String tempStyleBlock = "%%%HTMLCOMPRESS~STYLE&&&";
 17     private static String tempJspBlock = "%%%HTMLCOMPRESS~JSP&&&";
 18     
 19     private static Pattern commentPattern = Pattern.compile("<!--\\s*[^\\[].*?-->", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
 20     private static Pattern itsPattern = Pattern.compile(">\\s+?<", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
 21     private static Pattern prePattern = Pattern.compile("<pre[^>]*?>.*?</pre>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE); 
 22     private static Pattern taPattern = Pattern.compile("<textarea[^>]*?>.*?</textarea>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
 23     private static Pattern jspPattern = Pattern.compile("<%([^-@][\\w\\W]*?)%>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
 24     // <script></script>
 25     private static Pattern scriptPattern = Pattern.compile("(?:<script\\s*>|<script type=['\"]text/javascript['\"]\\s*>)(.*?)</script>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
 26     private static Pattern stylePattern = Pattern.compile("<style[^>()]*?>(.+)</style>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
 27 
 28     // 单行注释,
 29     private static Pattern signleCommentPattern = Pattern.compile("//.*");
 30     // 字符串匹配
 31     private static Pattern stringPattern = Pattern.compile("(\"[^\"\\n]*?\"|'[^'\\n]*?')");
 32     // trim去空格和换行符
 33     private static Pattern trimPattern = Pattern.compile("\\n\\s*",Pattern.MULTILINE);
 34     private static Pattern trimPattern2 = Pattern.compile("\\s*\\r",Pattern.MULTILINE);
 35     // 多行注释
 36     private static Pattern multiCommentPattern = Pattern.compile("/\\*.*?\\*/", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
 37 
 38     private static String tempSingleCommentBlock = "%%%HTMLCOMPRESS~SINGLECOMMENT&&&";  // //占位符
 39     private static String tempMulitCommentBlock1 = "%%%HTMLCOMPRESS~MULITCOMMENT1&&&";  // /*占位符
 40     private static String tempMulitCommentBlock2 = "%%%HTMLCOMPRESS~MULITCOMMENT2&&&";  // */占位符
 41     
 42     
 43     public static String compress(String html) throws Exception {
 44         if(html == null || html.length() == 0) {
 45             return html;
 46         }
 47         
 48         List<String> preBlocks = new ArrayList<String>();
 49         List<String> taBlocks = new ArrayList<String>();
 50         List<String> scriptBlocks = new ArrayList<String>();
 51         List<String> styleBlocks = new ArrayList<String>();
 52         List<String> jspBlocks = new ArrayList<String>();
 53         
 54         String result = html;
 55         
 56         //preserve inline java code
 57         Matcher jspMatcher = jspPattern.matcher(result);
 58         while(jspMatcher.find()) {
 59             jspBlocks.add(jspMatcher.group(0));
 60         }
 61         result = jspMatcher.replaceAll(tempJspBlock);
 62         
 63         //preserve PRE tags
 64         Matcher preMatcher = prePattern.matcher(result);
 65         while(preMatcher.find()) {
 66             preBlocks.add(preMatcher.group(0));
 67         }
 68         result = preMatcher.replaceAll(tempPreBlock);
 69         
 70         //preserve TEXTAREA tags
 71         Matcher taMatcher = taPattern.matcher(result);
 72         while(taMatcher.find()) {
 73             taBlocks.add(taMatcher.group(0));
 74         }
 75         result = taMatcher.replaceAll(tempTextAreaBlock);
 76         
 77         //preserve SCRIPT tags
 78         Matcher scriptMatcher = scriptPattern.matcher(result);
 79         while(scriptMatcher.find()) {
 80             scriptBlocks.add(scriptMatcher.group(0));
 81         }
 82         result = scriptMatcher.replaceAll(tempScriptBlock);
 83         
 84         // don't process inline css 
 85         Matcher styleMatcher = stylePattern.matcher(result);
 86         while(styleMatcher.find()) {
 87             styleBlocks.add(styleMatcher.group(0));
 88         }
 89         result = styleMatcher.replaceAll(tempStyleBlock);
 90         
 91         //process pure html
 92         result = processHtml(result);
 93         
 94         //process preserved blocks
 95         result = processPreBlocks(result, preBlocks);
 96         result = processTextareaBlocks(result, taBlocks);
 97         result = processScriptBlocks(result, scriptBlocks);
 98         result = processStyleBlocks(result, styleBlocks);
 99         result = processJspBlocks(result, jspBlocks);
100         
101         preBlocks = taBlocks = scriptBlocks = styleBlocks = jspBlocks = null;
102         
103         return result.trim();
104     }
105     
106     private static String processHtml(String html) {
107         String result = html;
108         
109         //remove comments
110 //        if(removeComments) {
111             result = commentPattern.matcher(result).replaceAll("");
112 //        }
113         
114         //remove inter-tag spaces
115 //        if(removeIntertagSpaces) {
116             result = itsPattern.matcher(result).replaceAll("><");
117 //        }
118         
119         //remove multi whitespace characters
120 //        if(removeMultiSpaces) {
121             result = result.replaceAll("\\s{2,}"," ");
122 //        }
123                 
124         return result;
125     }
126     
127     private static String processJspBlocks(String html, List<String> blocks){
128         String result = html;
129         for(int i = 0; i < blocks.size(); i++) {
130             blocks.set(i, compressJsp(blocks.get(i)));
131         }
132         //put preserved blocks back
133         while(result.contains(tempJspBlock)) {
134             result = result.replaceFirst(tempJspBlock, Matcher.quoteReplacement(blocks.remove(0)));
135         }
136         
137         return result;
138     }
139     private static String processPreBlocks(String html, List<String> blocks) throws Exception {
140         String result = html;
141         
142         //put preserved blocks back
143         while(result.contains(tempPreBlock)) {
144             result = result.replaceFirst(tempPreBlock, Matcher.quoteReplacement(blocks.remove(0)));
145         }
146         
147         return result;
148     }
149     
150     private static String processTextareaBlocks(String html, List<String> blocks) throws Exception {
151         String result = html;
152         
153         //put preserved blocks back
154         while(result.contains(tempTextAreaBlock)) {
155             result = result.replaceFirst(tempTextAreaBlock, Matcher.quoteReplacement(blocks.remove(0)));
156         }
157         
158         return result;
159     }
160     
161     private static String processScriptBlocks(String html, List<String> blocks) throws Exception {
162         String result = html;
163         
164 //        if(compressJavaScript) {
165             for(int i = 0; i < blocks.size(); i++) {
166                 blocks.set(i, compressJavaScript(blocks.get(i)));
167             }
168 //        }
169         
170         //put preserved blocks back
171         while(result.contains(tempScriptBlock)) {
172             result = result.replaceFirst(tempScriptBlock, Matcher.quoteReplacement(blocks.remove(0)));
173         }
174         
175         return result;
176     }
177     
178     private static String processStyleBlocks(String html, List<String> blocks) throws Exception {
179         String result = html;
180         
181 //        if(compressCss) {
182             for(int i = 0; i < blocks.size(); i++) {
183                 blocks.set(i, compressCssStyles(blocks.get(i)));
184             }
185 //        }
186         
187         //put preserved blocks back
188         while(result.contains(tempStyleBlock)) {
189             result = result.replaceFirst(tempStyleBlock, Matcher.quoteReplacement(blocks.remove(0)));
190         }
191         
192         return result;
193     }
194     
195     private static String compressJsp(String source)  {
196         //check if block is not empty
197         Matcher jspMatcher = jspPattern.matcher(source);
198         if(jspMatcher.find()) {
199             String result = compressJspJs(jspMatcher.group(1));
200             return (new StringBuilder(source.substring(0, jspMatcher.start(1))).append(result).append(source.substring(jspMatcher.end(1)))).toString();
201         } else {
202             return source;
203         }
204     }    
205     private static String compressJavaScript(String source)  {
206         //check if block is not empty
207         Matcher scriptMatcher = scriptPattern.matcher(source);
208         if(scriptMatcher.find()) {
209             String result = compressJspJs(scriptMatcher.group(1));
210             return (new StringBuilder(source.substring(0, scriptMatcher.start(1))).append(result).append(source.substring(scriptMatcher.end(1)))).toString();
211         } else {
212             return source;
213         }
214     }
215         
216     private static String compressCssStyles(String source)  {
217         //check if block is not empty
218         Matcher styleMatcher = stylePattern.matcher(source);
219         if(styleMatcher.find()) {
220             // 去掉注释,换行
221             String result= multiCommentPattern.matcher(styleMatcher.group(1)).replaceAll("");
222             result = trimPattern.matcher(result).replaceAll("");
223             result = trimPattern2.matcher(result).replaceAll("");
224             return (new StringBuilder(source.substring(0, styleMatcher.start(1))).append(result).append(source.substring(styleMatcher.end(1)))).toString();
225         } else {
226             return source;
227         }
228     }
229     
230     private static String compressJspJs(String source){
231         String result = source;
232         // 因注释符合有可能出现在字符串中,所以要先把字符串中的特殊符好去掉
233         Matcher stringMatcher = stringPattern.matcher(result);
234         while(stringMatcher.find()){
235             String tmpStr = stringMatcher.group(0);
236             
237             if(tmpStr.indexOf("//"!= -1 || tmpStr.indexOf("/*"!= -1 || tmpStr.indexOf("*/"!= -1){
238                 String blockStr = tmpStr.replaceAll("//", tempSingleCommentBlock).replaceAll("/\\*", tempMulitCommentBlock1)
239                                 .replaceAll("\\*/", tempMulitCommentBlock2);
240                 result = result.replace(tmpStr, blockStr);
241             }
242         }
243         // 去掉注释
244         result = signleCommentPattern.matcher(result).replaceAll("");
245         result = multiCommentPattern.matcher(result).replaceAll("");
246         result = trimPattern2.matcher(result).replaceAll("");
247         result = trimPattern.matcher(result).replaceAll(" ");
248         // 恢复替换掉的字符串
249         result = result.replaceAll(tempSingleCommentBlock, "//").replaceAll(tempMulitCommentBlock1, "/*")
250                 .replaceAll(tempMulitCommentBlock2, "*/");
251         
252         return result;
253     }
254 }
255 

使用注意事项

 

      使用了上面方法后,再运行程序,是不是发现每个页面查看源代码的时候都变成1行啦,还不错吧,但是在使用的时候还是要注意一些问题:

           1. 嵌入js本来想调用yuicompressor来压缩,yuicompressor压缩JS前,会先编译js是否合法,因我们嵌入的js中可能很多会用到一些服务器端代码,比如 var now = <%=DateTime.now %> ,这样的代码会编译不通过,所以无法使用yuicompressor。

              最后只能自己写压缩JS代码,自己写的比较粗燥,所以有个问题还解决,就是如果开发人员在一句js代码后面没有加分号的话,压缩成1行就很有可能出问题。所以使用这个需要保证每条语句结束后都必须带分号。

 

           2. 因为是在程序启动的时候压缩所有jsp(aspx),所以如果是用户请求的时候动态产生的html就无法压缩。



    有需要请查看:高性能WEB开发系列


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

精彩推荐 好文要顶 水平一般 看不懂 还需努力

评论

# re: WEB高性能开发(10) - 疯狂的HTML压缩  回复  更多评论   

2010-05-17 09:40 by BeanSoft
顶下先!

# re: WEB高性能开发(10) - 疯狂的HTML压缩  回复  更多评论   

2010-05-17 09:53 by 丽可酷
真不错,谢谢

# re: WEB高性能开发(10) - 疯狂的HTML压缩  回复  更多评论   

2010-05-17 10:02 by BearRui(AK-47)
呵呵,谢谢2位的支持。

# re: WEB高性能开发(10) - 疯狂的HTML压缩  回复  更多评论   

2010-05-17 13:58 by 16楼
挺好就是注意事项挺多的!

# re: WEB高性能开发(10) - 疯狂的HTML压缩  回复  更多评论   

2010-05-17 14:14 by BearRui(AK-47)
@16楼
是啊,还有待完善啊,^_^

# re: WEB高性能开发(10) - 疯狂的HTML压缩  回复  更多评论   

2010-05-18 11:29 by 牙牙学语
谢谢分享,学习!
其实也可以用ant脚本在打包时对页面文件做些处理

# re: WEB高性能开发(10) - 疯狂的HTML压缩  回复  更多评论   

2010-05-18 12:05 by BearRui(AK-47)
@牙牙学语
是可以,我最开始想写maven插件,在部署的时候自动处理,但是写的比较麻烦,感觉还是这样写比较简单。

# re: WEB高性能开发(10) - 疯狂的HTML压缩  回复  更多评论   

2010-06-09 17:05 by panasia
今天来到这里学到不少东西。。也下了不少好东西。呵呵。。感谢博主。。这个东西对我现在这个项目来说有点杯具。。因为我发现我们的程序员在写代码的时候。。有的地方没有加分号。。。囧。。

# re: WEB高性能开发(10) - 疯狂的HTML压缩  回复  更多评论   

2010-06-09 17:08 by BearRui(AK-47)
@panasia
呵呵,也非常感谢你的支持,看到你的很多回复。

我这个html压缩做的确是有点简单,因为JS分析比较复杂,所以目前暂时只能要求开发人员注意编写JS的格式了。

# re: WEB高性能开发(10) - 疯狂的HTML压缩  回复  更多评论   

2010-06-10 18:47 by panasia
http://www.cnblogs.com/sohighthesky/archive/2010/05/14/uedsky-html-compressor.html
博主,我今天看到这篇文章。这个blog不知道是不是你的?我看了下。。好像是盗用了你的文章。。还被转到http://www.ued163.com/?p=814上面了

# re: WEB高性能开发(10) - 疯狂的HTML压缩  回复  更多评论   

2010-06-10 23:13 by BearRui(AK-47)
@panasia
呵呵,看日期好像他还在我之前发布的。应该只是巧合而已。

另:我在cnblogs的博客地址是:
http://www.cnblogs.com/BearsTaR/

# re: WEB高性能开发(10) - 疯狂的HTML压缩  回复  更多评论   

2010-06-24 13:37 by tiffany discount
尽管看不懂,但可以看得出博主很有才。

# re: WEB高性能开发(10) - 疯狂的HTML压缩  回复  更多评论   

2010-06-24 13:55 by BearRui(AK-47)
@tiffany discount
呵呵,谢谢。

# re: WEB高性能开发(10) - 疯狂的HTML压缩  回复  更多评论   

2010-11-27 17:16 by Dylan
写的不错

只有注册用户登录后才能发表评论。


网站导航: