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


Posted in Javascript onJune 19, 2010

一般我们启动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就无法压缩。

Javascript 相关文章推荐
动态加载js文件 document.createElement
Oct 14 Javascript
js 加载并解析XML字符串的代码
Dec 13 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 #Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 #Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 #Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 #Javascript
javascript,jquery闭包概念分析
Jun 19 #Javascript
基于jquery的滚动新闻列表
Jun 19 #Javascript
基于Jquery的温度计动画效果
Jun 18 #Javascript
You might like
多人战的战术与战略
2020/03/04 星际争霸
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
简单了解django orm中介模型
2019/07/30 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
印度服装购物网站:Limeroad
2018/09/26 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
什么是封装
2013/03/26 面试题
工程力学专业毕业生求职信
2013/10/06 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
股东授权委托书范本
2014/09/13 职场文书
2015年清明节活动总结
2015/02/09 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
创业计划书之熟食店
2019/10/16 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL