前言：
上一篇隨筆中網(wǎng)友 問(wèn)我如何壓縮HTML，當(dāng)時(shí)回答是推薦他使用gzip，后來(lái)想想，要是能把所有的html，jsp(aspx)在運(yùn)行前都?jí)嚎s成1行未免不是一件好事啊。一般我們啟動(dòng)gzip都比較少對(duì)html啟動(dòng)gzip，因?yàn)楝F(xiàn)在的html都是動(dòng)態(tài)的，不會(huì)使用瀏覽器緩存，而啟用gzip的話每次請(qǐng)求都需要壓縮，會(huì)比較消耗服務(wù)器資源，對(duì)js,css啟動(dòng)gzip比較好是因?yàn)閖s,css都會(huì)使用緩存。我個(gè)人覺(jué)得的壓縮html的最大好處就是一本萬(wàn)利，只要寫(xiě)好了一次，以后所有程序都可以使用，不會(huì)增加任何額外的開(kāi)發(fā)工作。
在“JS、CSS的合并、壓縮、緩存管理”一文中說(shuō)到自己寫(xiě)過(guò)的1個(gè)自動(dòng)合并、壓縮JS,CSS,并添加版本號(hào)的組件。這次把壓縮html的功能也加入到該組件中，流程很簡(jiǎn)單，就是在程序啟動(dòng)(contextInitialized or Application_Start)的時(shí)候掃描所有html,jsp(aspx)進(jìn)行壓縮。
壓縮的注意事項(xiàng)：
實(shí)現(xiàn)的方式主要是用正則表達(dá)式去查找，替換。在html壓縮的時(shí)候，主要要注意下面幾點(diǎn)：
1. pre,textarea 標(biāo)簽里面的內(nèi)容格式需要保留，不能壓縮。
2. 去掉html注釋的時(shí)候，有些注釋是不能去掉的，比如：<!--[if IE 6]> ..... <![endif]-->
3. 壓縮嵌入式j(luò)s中的注釋要注意，因?yàn)榭赡茏⑨尫?hào)會(huì)出現(xiàn)在字符串中，比如： var url = "http://www.cnblogs.com"; // 前面的//不是注釋
去掉JS換行符的時(shí)候，不能直接跟一下行動(dòng)內(nèi)容，需要有空格，考慮下面的代碼：
else
return;
如果不帶空格，則變成elsereturn。
4. jsp(aspx) 中很有可能會(huì)使用<% %>嵌入一些服務(wù)器代碼，這個(gè)時(shí)候也需要單獨(dú)處理，里面注釋的處理方法跟js的一樣。
源代碼：
下面是java實(shí)現(xiàn)的源代碼，也可以 猛擊此處 下載該代碼，相信大家都看的懂，也很容易改成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 // 因注釋符合有可能出現(xiàn)在字符串中，所以要先把字符串中的特殊符好去掉
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 // 恢復(fù)替換掉的字符串
249 result = result.replaceAll(tempSingleCommentBlock, "//").replaceAll(tempMulitCommentBlock1, "/*")
250 .replaceAll(tempMulitCommentBlock2, "*/");
251
252 return result;
253 }
254 }
255
使用注意事項(xiàng)：
使用了上面方法后，再運(yùn)行程序，是不是發(fā)現(xiàn)每個(gè)頁(yè)面查看源代碼的時(shí)候都變成1行啦，還不錯(cuò)吧，但是在使用的時(shí)候還是要注意一些問(wèn)題：
1. 嵌入js本來(lái)想調(diào)用yuicompressor來(lái)壓縮，yuicompressor壓縮JS前，會(huì)先編譯js是否合法，因我們嵌入的js中可能很多會(huì)用到一些服務(wù)器端代碼，比如 var now = <%=DateTime.now %> ，這樣的代碼會(huì)編譯不通過(guò)，所以無(wú)法使用yuicompressor。
最后只能自己寫(xiě)壓縮JS代碼，自己寫(xiě)的比較粗燥，所以有個(gè)問(wèn)題還解決，就是如果開(kāi)發(fā)人員在一句js代碼后面沒(méi)有加分號(hào)的話，壓縮成1行就很有可能出問(wèn)題。所以使用這個(gè)需要保證每條語(yǔ)句結(jié)束后都必須帶分號(hào)。
2. 因?yàn)槭窃诔绦騿?dòng)的時(shí)候壓縮所有jsp(aspx)，所以如果是用戶請(qǐng)求的時(shí)候動(dòng)態(tài)產(chǎn)生的html就無(wú)法壓縮。
有需要請(qǐng)查看：
高性能WEB開(kāi)發(fā)系列