WEB高效能開發(10) – 瘋狂的HTML壓縮

前言：    

     上一篇隨筆中網友 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)進行壓縮。

 

壓縮的注意事項：

     實現的方式主要是用Regex去尋找，替換。在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 codeMatcher jspMatcher = jspPattern.matcher(result);while(jspMatcher.find()) {jspBlocks.add(jspMatcher.group(0));}result = jspMatcher.replaceAll(tempJspBlock);//preserve PRE tagsMatcher preMatcher = prePattern.matcher(result);while(preMatcher.find()) {preBlocks.add(preMatcher.group(0));}result = preMatcher.replaceAll(tempPreBlock);//preserve TEXTAREA tagsMatcher taMatcher = taPattern.matcher(result);while(taMatcher.find()) {taBlocks.add(taMatcher.group(0));}result = taMatcher.replaceAll(tempTextAreaBlock);//preserve SCRIPT tagsMatcher 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 htmlresult = processHtml(result);//process preserved blocksresult = 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 backwhile(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 backwhile(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 backwhile(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 backwhile(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 backwhile(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 emptyMatcher 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 emptyMatcher 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 emptyMatcher 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就無法壓縮。

    有需要請查看：高效能WEB開發系列