WEB高性能开发之疯狂的HTML压缩

一般我们启动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代码：
复制代码代码如下:
import java.io.StringReader;
import java.io.StringWriter;
import java.util.*;
import java.util.regex.*;
/*******************************************
* 压缩jsp,html中的代码，去掉所有空白符、换行符
* @author bearrui（ak-47）
* @version 0.1
* @date 2010-5-13
*******************************************/
public class HtmlCompressor {
private static String tempPreBlock = "%%%HTMLCOMPRESS~PRE&&&";
private static String tempTextAreaBlock = "%%%HTMLCOMPRESS~TEXTAREA&&&";
private static String tempScriptBlock = "%%%HTMLCOMPRESS~SCRIPT&&&";
private static String tempStyleBlock = "%%%HTMLCOMPRESS~STYLE&&&";
private static String tempJspBlock = "%%%HTMLCOMPRESS~JSP&&&";
private static Pattern commentPattern = Pattern.compile（"<！--\s*[^\[].*？-->", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE）;
private static Pattern itsPattern = Pattern.compile（">\s+？<", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE）;
private static Pattern prePattern = Pattern.compile（"<pre[^>]*？>.*？</pre>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE）;
private static Pattern taPattern = Pattern.compile（"<textarea[^>]*？>.*？</textarea>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE）;
private static Pattern jspPattern = Pattern.compile（"<%（[^-@][\w\W]*？）%>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE）;
// <script></script>
private static Pattern scriptPattern = Pattern.compile（"（？:<script\s*>|<script type=[""]text/javascript[""]\s*>）（.*？）</script>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE）;
private static Pattern stylePattern = Pattern.compile（"<style[^>（）]*？>（.+）</style>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE）;
// 单行注释，
private static Pattern signleCommentPattern = Pattern.compile（"//.*"）;
// 字符串匹配
private static Pattern stringPattern = Pattern.compile（"（"[^"\n]*？"|"[^"\n]*？"）"）;
// trim去空格和换行符
private static Pattern trimPattern = Pattern.compile（"\n\s*",Pattern.MULTILINE）;
private static Pattern trimPattern2 = Pattern.compile（"\s*\r",Pattern.MULTILINE）;
// 多行注释
private static Pattern multiCommentPattern = Pattern.compile（"/\*.*？\*/", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE）;
private static String tempSingleCommentBlock = "%%%HTMLCOMPRESS~SINGLECOMMENT&&&"; // //占位符
private static String tempMulitCommentBlock1 = "%%%HTMLCOMPRESS~MULITCOMMENT1&&&"; // /*占位符
private static String tempMulitCommentBlock2 = "%%%HTMLCOMPRESS~MULITCOMMENT2&&&"; // */占位符

public static String compress（String html） throws Exception {
if（html == null || html.length（） == 0） {
return html;
}
List<String> preBlocks = new ArrayList<String>（）;
List<String> taBlocks = new ArrayList<String>（）;
List<String> scriptBlocks = new ArrayList<String>（）;
List<String> styleBlocks = new ArrayList<String>（）;
List<String> jspBlocks = new ArrayList<String>（）;
String result = html;
//preserve inline java code
Matcher jspMatcher = jspPattern.matcher（result）;
while（jspMatcher.find（）） {
jspBlocks.add（jspMatcher.group（0））;
}
result = jspMatcher.replaceAll（tempJspBlock）;
//preserve PRE tags
Matcher preMatcher = prePattern.matcher（result）;
while（preMatcher.find（）） {
preBlocks.add（preMatcher.group（0））;
}
result = preMatcher.replaceAll（tempPreBlock）;
//preserve TEXTAREA tags
Matcher taMatcher = taPattern.matcher（result）;
while（taMatcher.find（）） {
taBlocks.add（taMatcher.group（0））;
}
result = taMatcher.replaceAll（tempTextAreaBlock）;
//preserve SCRIPT tags
Matcher scriptMatcher = scriptPattern.matcher（result）;
while（scriptMatcher.find（）） {
scriptBlocks.add（scriptMatcher.group（0））;
}
result = scriptMatcher.replaceAll（tempScriptBlock）;
// don"t process inline css
Matcher styleMatcher = stylePattern.matcher（result）;
while（styleMatcher.find（）） {
styleBlocks.add（styleMatcher.group（0））;
}
result = styleMatcher.replaceAll（tempStyleBlock）;
//process pure html
result = processHtml（result）;
//process preserved blocks
result = processPreBlocks（result, preBlocks）;
result = processTextareaBlocks（result, taBlocks）;
result = processScriptBlocks（result, scriptBlocks）;
result = processStyleBlocks（result, styleBlocks）;
result = processJspBlocks（result, jspBlocks）;
preBlocks = taBlocks = scriptBlocks = styleBlocks = jspBlocks = null;
return result.trim（）;
}
private static String processHtml（String html） {
String result = html;
//remove comments
// if（removeComments） {
result = commentPattern.matcher（result）.replaceAll（""）;
// }
//remove inter-tag spaces
// if（removeIntertagSpaces） {
result = itsPattern.matcher（result）.replaceAll（"><"）;
// }
//remove multi whitespace characters
// if（removeMultiSpaces） {
result = result.replaceAll（"\s{2,}"," "）;
// }
return result;
}
private static String processJspBlocks（String html, List<String> blocks）{
String result = html;
for（int i = 0; i < blocks.size（）; i++） {
blocks.set（i, compressJsp（blocks.get（i）））;
}
//put preserved blocks back
while（result.contains（tempJspBlock）） {
result = result.replaceFirst（tempJspBlock, Matcher.quoteReplacement（blocks.remove（0）））;
}
return result;
}
private static String processPreBlocks（String html, List<String> blocks） throws Exception {
String result = html;
//put preserved blocks back
while（result.contains（tempPreBlock）） {
result = result.replaceFirst（tempPreBlock, Matcher.quoteReplacement（blocks.remove（0）））;
}
return result;
}
private static String processTextareaBlocks（String html, List<String> blocks） throws Exception {
String result = html;
//put preserved blocks back
while（result.contains（tempTextAreaBlock）） {
result = result.replaceFirst（tempTextAreaBlock, Matcher.quoteReplacement（blocks.remove（0）））;
}
return result;
}
private static String processScriptBlocks（String html, List<String> blocks） throws Exception {
String result = html;
// if（compressJavaScript） {
for（int i = 0; i < blocks.size（）; i++） {
blocks.set（i, compressJavaScript（blocks.get（i）））;
}
// }
//put preserved blocks back
while（result.contains（tempScriptBlock）） {
result = result.replaceFirst（tempScriptBlock, Matcher.quoteReplacement（blocks.remove（0）））;
}
return result;
}
private static String processStyleBlocks（String html, List<String> blocks） throws Exception {
String result = html;
// if（compressCss） {
for（int i = 0; i < blocks.size（）; i++） {
blocks.set（i, compressCssStyles（blocks.get（i）））;
}
// }
//put preserved blocks back
while（result.contains（tempStyleBlock）） {
result = result.replaceFirst（tempStyleBlock, Matcher.quoteReplacement（blocks.remove（0）））;
}
return result;
}
private static String compressJsp（String source） {
//check if block is not empty
Matcher jspMatcher = jspPattern.matcher（source）;
if（jspMatcher.find（）） {
String result = compressJspJs（jspMatcher.group（1））;
return （new StringBuilder（source.substring（0, jspMatcher.start（1）））.append（result）.append（source.substring（jspMatcher.end（1））））.toString（）;
} else {
return source;
}
}
private static String compressJavaScript（String source） {
//check if block is not empty
Matcher scriptMatcher = scriptPattern.matcher（source）;
if（scriptMatcher.find（）） {
String result = compressJspJs（scriptMatcher.group（1））;
return （new StringBuilder（source.substring（0, scriptMatcher.start（1）））.append（result）.append（source.substring（scriptMatcher.end（1））））.toString（）;
} else {
return source;
}
}
private static String compressCssStyles（String source） {
//check if block is not empty
Matcher styleMatcher = stylePattern.matcher（source）;
if（styleMatcher.find（）） {
// 去掉注释，换行
String result= multiCommentPattern.matcher（styleMatcher.group（1））.replaceAll（""）;
result = trimPattern.matcher（result）.replaceAll（""）;
result = trimPattern2.matcher（result）.replaceAll（""）;
return （new StringBuilder（source.substring（0, styleMatcher.start（1）））.append（result）.append（source.substring（styleMatcher.end（1））））.toString（）;
} else {
return source;
}
}
private static String compressJspJs（String source）{
String result = source;
// 因注释符合有可能出现在字符串中，所以要先把字符串中的特殊符好去掉
Matcher stringMatcher = stringPattern.matcher（result）;
while（stringMatcher.find（））{
String tmpStr = stringMatcher.group（0）;
if（tmpStr.indexOf（"//"）！= -1 || tmpStr.indexOf（"/*"）！= -1 || tmpStr.indexOf（"*/"）！= -1）{
String blockStr = tmpStr.replaceAll（"//", tempSingleCommentBlock）.replaceAll（"/\*", tempMulitCommentBlock1）
.replaceAll（"\*/", tempMulitCommentBlock2）;
result = result.replace（tmpStr, blockStr）;
}
}
// 去掉注释
result = signleCommentPattern.matcher（result）.replaceAll（""）;
result = multiCommentPattern.matcher（result）.replaceAll（""）;
result = trimPattern2.matcher（result）.replaceAll（""）;
result = trimPattern.matcher（result）.replaceAll（" "）;
// 恢复替换掉的字符串
result = result.replaceAll（tempSingleCommentBlock, "//"）.replaceAll（tempMulitCommentBlock1, "/*"）
.replaceAll（tempMulitCommentBlock2, "*/"）;
return result;
}
}

使用注意事项：

使用了上面方法后，再运行程序，是不是发现每个页面查看源代码的时候都变成1行啦，还不错吧，但是在使用的时候还是要注意一些问题：
1. 嵌入js本来想调用yuicompressor来压缩，yuicompressor压缩JS前，会先编译js是否合法，因我们嵌入的js中可能很多会用到一些服务器端代码，比如 var now = <%=DateTime.now %> ，这样的代码会编译不通过，所以无法使用yuicompressor。
最后只能自己写压缩JS代码，自己写的比较粗燥，所以有个问题还解决，就是如果开发人员在一句js代码后面没有加分号的话，压缩成1行就很有可能出问题。所以使用这个需要保证每条语句结束后都必须带分号。

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