WEB高性能開發(fā)之瘋狂的HTML壓縮
2024-09-06 12:45:43
供稿：網(wǎng)友
一般我們啟動gzip都比較少對html啟動gzip，因為現(xiàn)在的html都是動態(tài)的，不會使用瀏覽器緩存，而啟用gzip的話每次請求都需要壓縮，會比較消耗服務器資源，對js,css啟動gzip比較好是因為js,css都會使用緩存。我個人覺得的壓縮html的最大好處就是一本萬利，只要寫好了一次，以后所有程序都可以使用，不會增加任何額外的開發(fā)工作。
在“JS、CSS的合并、壓縮、緩存管理”一文中說到自己寫過的1個自動合并、壓縮JS,CSS,并添加版本號的組件。這次把壓縮html的功能也加入到該組件中，流程很簡單，就是在程序啟動(contextInitialized or Application_Start)的時候掃描所有html,jsp(aspx)進行壓縮。
壓縮的注意事項：
實現(xiàn)的方式主要是用正則表達式去查找，替換。在html壓縮的時候，主要要注意下面幾點：
1. pre,textarea 標簽里面的內(nèi)容格式需要保留，不能壓縮。
2. 去掉html注釋的時候，有些注釋是不能去掉的，比如：<!--[if IE 6]> ..... <![endif]-->
3. 壓縮嵌入式js中的注釋要注意，因為可能注釋符號會出現(xiàn)在字符串中，比如： var url = "http://www.cnblogs.com"; // 前面的//不是注釋
去掉JS換行符的時候，不能直接跟一下行動內(nèi)容，需要有空格，考慮下面的代碼：
else
return;
如果不帶空格，則變成elsereturn。
4. jsp(aspx) 中很有可能會使用<% %>嵌入一些服務器代碼，這個時候也需要單獨處理，里面注釋的處理方法跟js的一樣。
源代碼：
下面是java實現(xiàn)的源代碼，也可以 猛擊此處 下載該代碼，相信大家都看的懂，也很容易改成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);
