前言:

上一篇随笔中网友 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("<%([^-@][\\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 codeMatcher jspMatcher = jspPattern.matcher(result);while(jspMatcher.find()) {jspBlocks.add(jspMatcher.group(0));}result = jspMatcher.replaceAll(tempJspBlock);//preserve PRE tagsMatcher preMatcher = prePattern.matcher(result);while(preMatcher.find()) {preBlocks.add(preMatcher.group(0));}result = preMatcher.replaceAll(tempPreBlock);//preserve TEXTAREA tagsMatcher taMatcher = taPattern.matcher(result);while(taMatcher.find()) {taBlocks.add(taMatcher.group(0));}result = taMatcher.replaceAll(tempTextAreaBlock);//preserve SCRIPT tagsMatcher 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 htmlresult = processHtml(result);//process preserved blocksresult = 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 backwhile(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 backwhile(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 backwhile(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 backwhile(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 backwhile(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 emptyMatcher 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 emptyMatcher 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 emptyMatcher 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就无法压缩。

有需要请查看:高性能WEB开发系列

转载于:https://www.cnblogs.com/BearsTaR/archive/2010/05/17/html_compressor.html

WEB高性能开发(10) - 疯狂的HTML压缩相关推荐

  1. WEB高性能开发:HTML压缩

    WEB高性能开发:HTML压缩 [日期:2011-01-09] 来源:     作者: [字体:大 中 小] 上一篇随笔中网友 skyaspnet 问我如何压缩HTML,当时回答是推荐他使用gzip, ...

  2. Java Web 高性能开发,前端的高性能

    Java Web 高性能开发,第 2 部分: 前端的高性能 Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.Web 的思想是 ...

  3. web高性能开发系列随笔

    在BlogJava里写了一些关于高性能WEB开发的随笔,因为都是跟前端技术相关(html,http,js,css等),所以也贴到博客园来,吸收下人气. 1. HTTP服务器. 2.性能测试工具推荐 3 ...

  4. Java Web 高性能开发,第 1 部分: 前端的高性能

    原文地址:http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/#ibm-pcon 魏 强, 研究生, 东北大学 简介: Web ...

  5. web前端开发10大战略性技术蓝图

    2010年的你,如果能学会Android开发,现在的你,薪资不会低于年薪50万-- 2015年的你,如果能熟练使用react,现在的你,薪资不会低于月薪30K-- 看到这两个数据,也许有人会反驳:技术 ...

  6. Java Web整合开发(10) -- 资源国际化

    {0} 转载于:https://www.cnblogs.com/thlzhf/p/3941770.html

  7. 蓝桥杯 Web 应用开发模拟赛首次公开!参赛选手速进!

    第十三届蓝桥杯大赛报名通道正式开启,你行动起来了吗? 很多细心的小伙伴一定看到了,这届蓝桥杯大赛中新增了 Web 应用开发组.这是 Web 应用开发首次出现在杯赛中,所以没有历年真题可以供参赛选手刷题 ...

  8. Web前端开发最佳实践(3):前端代码和资源的压缩与合并

    一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源 ...

  9. 10大高性能开发宝石,我要消灭一半程序员!

    程序员经常要面临的一个问题就是:如何提高程序性能? 这篇文章,我们循序渐进,从内存.磁盘I/O.网络I/O.CPU.缓存.架构.算法等多层次递进,串联起高性能开发十大必须掌握的核心技术. - I/O优 ...

最新文章

  1. VMware出现“该虚拟机似乎正在使用中 请获取所有权”
  2. Windows Azure AppFabric概述
  3. 收集到的非常好的第三方控件
  4. 图表示学习(Graph Representation Learning)笔记
  5. python设计模式19-观察者模式
  6. Unity3D 优化相关
  7. 精心整理,kafka常见面试题,看这篇文章就够了(共17题,含详细解答)
  8. 6.5(对三个数进行排序)
  9. R|ggplot2(七)|自定义主题
  10. UEFI模式下安装ubuntu以及重装ubuntu教程
  11. JavaScript 3D球形标签云代码
  12. 浅谈领导力理解和体会
  13. 共享自习室创业项目分析
  14. 国际高智商组织门萨的智商测试题-谋杀你的脑细胞
  15. Android添加蓝牙音响功能
  16. clientX,clientY,screenX,screenY,offsetX,offsetY 区别测试
  17. springboot项目启动报错 url‘ attribute is not specified and no embedded datasource could be configured
  18. Python复杂网络分析库networkx 看这一篇就够了
  19. web前端期末大作业 HTML+CSS+JavaScript---介绍自己的家乡-宁夏js菜单下拉
  20. Python,批量删除txt文本指定行

热门文章

  1. 鸿蒙系统支持最低处理器,这四款华为手机可升级到鸿蒙系统,老机型居多,最低只需千元!...
  2. C++实现在正方体8个顶点上放数字使得三组相对的面上的4个顶点的和都相等
  3. 调整数组顺序使奇数位于偶数前面【不保持相对位置】
  4. 自动化学习的正确姿势
  5. 【转】Apache配置中ProxyPassReverse指令的含义
  6. 个人网站搭建---godaddy域名+freewebhostingarea免费空间
  7. HTML5 视频转换软件 Freemake Video Converter
  8. 积累这么多年的面试题与经验分享,免费下载
  9. matplotlib画图中文显示
  10. 将Windows下的InfluxDB、Grafana做成Windows服务