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 相关文章推荐
javascript ajax的5种状态介绍
Aug 18 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
jQuery实现评论模块
Aug 19 jQuery
vue+Element-ui实现分页效果
Nov 15 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
NT IIS下用ODBC连接数据库
2006/10/09 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
Python bisect模块原理及常见实例
2020/06/17 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
幼儿园见习总结
2015/06/23 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
Python基础之常用库常用方法整理
2021/04/30 Python
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL