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

2021年1月10日   |   by tgcode

  前言:

  上一篇随笔中网友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代码:

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("%([^-@][wW]*?)%", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
// script/script
private static Pattern scriptPattern = Pattern.compile("(?:scripts*|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("ns*",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 ArrayListString();
List
String taBlocks = new ArrayListString();
List
String scriptBlocks = new ArrayListString();
List
String styleBlocks = new ArrayListString();
List
Stringtgcode jspBlocks = new ArrayListString();

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, ListString 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, ListString 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, ListString blocks) throws Exception {
tgcode 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, ListString 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, ListString 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))tgcode;
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就无法压缩。

相关推荐: 如何打好前端游击战

  一、前端游击战为哪般?   小鹿乱撞,心花怒放。终于有机会在梦寐以求的团队博客的评论以外位置留下自己的痕迹啦,撒花撒花!淡定淡定,官博是严肃的地方,要是随便侃大山侃小山,拙文估计会被“里德尔”砍成袁姗姗。   深吸一口气,闲话少说,放马入题。   首先有必…

Tags: , , , ,