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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
jQuery ajax应用总结
Jun 02 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
Vue数字输入框组件使用方法详解
Feb 10 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
PHP 开发工具
2006/12/06 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
Firefox div高度自适应
2009/04/28 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
python Django模板的使用方法
2016/01/14 Python
快速了解Python中的装饰器
2018/01/11 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
Linux的文件类型
2012/03/07 面试题
项目合作意向书范本
2014/04/01 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle