WEB高性能开发之疯狂的HTML压缩
2023-06-13 09:14:23 时间
一般我们启动gzip都比较少对html启动gzip，因为现在的html都是动态的，不会使用浏览器缓存，而启用gzip的话每次请求都需要压缩，会比较消耗服务器资源，对js,css启动gzip比较好是因为js,css都会使用缓存。我个人觉得的压缩html的最大好处就是一本万利，只要写好了一次，以后所有程序都可以使用，不会增加任何额外的开发工作。
在“JS、CSS的合并、压缩、缓存管理”一文中说到自己写过的1个自动合并、压缩JS,CSS,并添加版本号的组件。这次把压缩html的功能也加入到该组件中，流程很简单，就是在程序启动(contextInitializedorApplication_Start)的时候扫描所有html,jsp(aspx)进行压缩。
压缩的注意事项：
实现的方式主要是用正则表达式去查找，替换。在html压缩的时候，主要要注意下面几点：
1.pre,textarea标签里面的内容格式需要保留，不能压缩。
2.去掉html注释的时候，有些注释是不能去掉的，比如：<!--[ifIE6]>.....<![endif]-->
3.压缩嵌入式js中的注释要注意，因为可能注释符号会出现在字符串中，比如：varurl="http://www.cnblogs.com";//前面的//不是注释
去掉JS换行符的时候，不能直接跟一下行动内容，需要有空格，考虑下面的代码：
else
return;
如果不带空格，则变成elsereturn。
4.jsp(aspx)中很有可能会使用<%%>嵌入一些服务器代码，这个时候也需要单独处理，里面注释的处理方法跟js的一样。
源代码：
下面是java实现的源代码，也可以猛击此处下载该代码，相信大家都看的懂，也很容易改成net代码：
复制代码代码如下:
在“JS、CSS的合并、压缩、缓存管理”一文中说到自己写过的1个自动合并、压缩JS,CSS,并添加版本号的组件。这次把压缩html的功能也加入到该组件中，流程很简单，就是在程序启动(contextInitializedorApplication_Start)的时候扫描所有html,jsp(aspx)进行压缩。
压缩的注意事项：
实现的方式主要是用正则表达式去查找，替换。在html压缩的时候，主要要注意下面几点：
1.pre,textarea标签里面的内容格式需要保留，不能压缩。
2.去掉html注释的时候，有些注释是不能去掉的，比如：<!--[ifIE6]>.....<![endif]-->
3.压缩嵌入式js中的注释要注意，因为可能注释符号会出现在字符串中，比如：varurl="http://www.cnblogs.com";//前面的//不是注释
去掉JS换行符的时候，不能直接跟一下行动内容，需要有空格，考虑下面的代码：
else
return;
如果不带空格，则变成elsereturn。
4.jsp(aspx)中很有可能会使用<%%>嵌入一些服务器代码，这个时候也需要单独处理，里面注释的处理方法跟js的一样。
源代码：
下面是java实现的源代码，也可以猛击此处下载该代码，相信大家都看的懂，也很容易改成net代码：
importjava.io.StringReader;
importjava.io.StringWriter;
importjava.util.*;
importjava.util.regex.*;
/*******************************************
*压缩jsp,html中的代码，去掉所有空白符、换行符
*@authorbearrui(ak-47)
*@version0.1
*@date2010-5-13
*******************************************/
publicclassHtmlCompressor{
privatestaticStringtempPreBlock="%%%HTMLCOMPRESS~PRE&&&";
privatestaticStringtempTextAreaBlock="%%%HTMLCOMPRESS~TEXTAREA&&&";
privatestaticStringtempScriptBlock="%%%HTMLCOMPRESS~SCRIPT&&&";
privatestaticStringtempStyleBlock="%%%HTMLCOMPRESS~STYLE&&&";
privatestaticStringtempJspBlock="%%%HTMLCOMPRESS~JSP&&&";
privatestaticPatterncommentPattern=Pattern.compile("<!--\\s*[^\\[].*?-->",Pattern.DOTALL|Pattern.CASE_INSENSITIVE|Pattern.MULTILINE);
privatestaticPatternitsPattern=Pattern.compile(">\\s+?<",Pattern.DOTALL|Pattern.CASE_INSENSITIVE|Pattern.MULTILINE);
privatestaticPatternprePattern=Pattern.compile("<pre[^>]*?>.*?</pre>",Pattern.DOTALL|Pattern.CASE_INSENSITIVE|Pattern.MULTILINE);
privatestaticPatterntaPattern=Pattern.compile("<textarea[^>]*?>.*?</textarea>",Pattern.DOTALL|Pattern.CASE_INSENSITIVE|Pattern.MULTILINE);
privatestaticPatternjspPattern=Pattern.compile("<%([^-@][\\w\\W]*?)%>",Pattern.DOTALL|Pattern.CASE_INSENSITIVE|Pattern.MULTILINE);
//<script></script>
privatestaticPatternscriptPattern=Pattern.compile("(?:<script\\s*>|<scripttype=["\"]text/javascript["\"]\\s*>)(.*?)</script>",Pattern.DOTALL|Pattern.CASE_INSENSITIVE|Pattern.MULTILINE);
privatestaticPatternstylePattern=Pattern.compile("<style[^>()]*?>(.+)</style>",Pattern.DOTALL|Pattern.CASE_INSENSITIVE|Pattern.MULTILINE);
//单行注释，
privatestaticPatternsignleCommentPattern=Pattern.compile("//.*");
//字符串匹配
privatestaticPatternstringPattern=Pattern.compile("(\"[^\"\\n]*?\"|"[^"\\n]*?")");
//trim去空格和换行符
privatestaticPatterntrimPattern=Pattern.compile("\\n\\s*",Pattern.MULTILINE);
privatestaticPatterntrimPattern2=Pattern.compile("\\s*\\r",Pattern.MULTILINE);
//多行注释
privatestaticPatternmultiCommentPattern=Pattern.compile("/\\*.*?\\*/",Pattern.DOTALL|Pattern.CASE_INSENSITIVE|Pattern.MULTILINE);
privatestaticStringtempSingleCommentBlock="%%%HTMLCOMPRESS~SINGLECOMMENT&&&";////占位符
privatestaticStringtempMulitCommentBlock1="%%%HTMLCOMPRESS~MULITCOMMENT1&&&";///*占位符
privatestaticStringtempMulitCommentBlock2="%%%HTMLCOMPRESS~MULITCOMMENT2&&&";//*/占位符
publicstaticStringcompress(Stringhtml)throwsException{
if(html==null||html.length()==0){
returnhtml;
}
List<String>preBlocks=newArrayList<String>();
List<String>taBlocks=newArrayList<String>();
List<String>scriptBlocks=newArrayList<String>();
List<String>styleBlocks=newArrayList<String>();
List<String>jspBlocks=newArrayList<String>();
Stringresult=html;
//preserveinlinejavacode
MatcherjspMatcher=jspPattern.matcher(result);
while(jspMatcher.find()){
jspBlocks.add(jspMatcher.group(0));
}
result=jspMatcher.replaceAll(tempJspBlock);
//preservePREtags
MatcherpreMatcher=prePattern.matcher(result);
while(preMatcher.find()){
preBlocks.add(preMatcher.group(0));
}
result=preMatcher.replaceAll(tempPreBlock);
//preserveTEXTAREAtags
MatchertaMatcher=taPattern.matcher(result);
while(taMatcher.find()){
taBlocks.add(taMatcher.group(0));
}
result=taMatcher.replaceAll(tempTextAreaBlock);
//preserveSCRIPTtags
MatcherscriptMatcher=scriptPattern.matcher(result);
while(scriptMatcher.find()){
scriptBlocks.add(scriptMatcher.group(0));
}
result=scriptMatcher.replaceAll(tempScriptBlock);
//don"tprocessinlinecss
MatcherstyleMatcher=stylePattern.matcher(result);
while(styleMatcher.find()){
styleBlocks.add(styleMatcher.group(0));
}
result=styleMatcher.replaceAll(tempStyleBlock);
//processpurehtml
result=processHtml(result);
//processpreservedblocks
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;
returnresult.trim();
}
privatestaticStringprocessHtml(Stringhtml){
Stringresult=html;
//removecomments
//if(removeComments){
result=commentPattern.matcher(result).replaceAll("");
//}
//removeinter-tagspaces
//if(removeIntertagSpaces){
result=itsPattern.matcher(result).replaceAll("><");
//}
//removemultiwhitespacecharacters
//if(removeMultiSpaces){
result=result.replaceAll("\\s{2,}","");
//}
returnresult;
}
privatestaticStringprocessJspBlocks(Stringhtml,List<String>blocks){
Stringresult=html;
for(inti=0;i<blocks.size();i++){
blocks.set(i,compressJsp(blocks.get(i)));
}
//putpreservedblocksback
while(result.contains(tempJspBlock)){
result=result.replaceFirst(tempJspBlock,Matcher.quoteReplacement(blocks.remove(0)));
}
returnresult;
}
privatestaticStringprocessPreBlocks(Stringhtml,List<String>blocks)throwsException{
Stringresult=html;
//putpreservedblocksback
while(result.contains(tempPreBlock)){
result=result.replaceFirst(tempPreBlock,Matcher.quoteReplacement(blocks.remove(0)));
}
returnresult;
}
privatestaticStringprocessTextareaBlocks(Stringhtml,List<String>blocks)throwsException{
Stringresult=html;
//putpreservedblocksback
while(result.contains(tempTextAreaBlock)){
result=result.replaceFirst(tempTextAreaBlock,Matcher.quoteReplacement(blocks.remove(0)));
}
returnresult;
}
privatestaticStringprocessScriptBlocks(Stringhtml,List<String>blocks)throwsException{
Stringresult=html;
//if(compressJavaScript){
for(inti=0;i<blocks.size();i++){
blocks.set(i,compressJavaScript(blocks.get(i)));
}
//}
//putpreservedblocksback
while(result.contains(tempScriptBlock)){
result=result.replaceFirst(tempScriptBlock,Matcher.quoteReplacement(blocks.remove(0)));
}
returnresult;
}
privatestaticStringprocessStyleBlocks(Stringhtml,List<String>blocks)throwsException{
Stringresult=html;
//if(compressCss){
for(inti=0;i<blocks.size();i++){
blocks.set(i,compressCssStyles(blocks.get(i)));
}
//}
//putpreservedblocksback
while(result.contains(tempStyleBlock)){
result=result.replaceFirst(tempStyleBlock,Matcher.quoteReplacement(blocks.remove(0)));
}
returnresult;
}
privatestaticStringcompressJsp(Stringsource){
//checkifblockisnotempty
MatcherjspMatcher=jspPattern.matcher(source);
if(jspMatcher.find()){
Stringresult=compressJspJs(jspMatcher.group(1));
return(newStringBuilder(source.substring(0,jspMatcher.start(1))).append(result).append(source.substring(jspMatcher.end(1)))).toString();
}else{
returnsource;
}
}
privatestaticStringcompressJavaScript(Stringsource){
//checkifblockisnotempty
MatcherscriptMatcher=scriptPattern.matcher(source);
if(scriptMatcher.find()){
Stringresult=compressJspJs(scriptMatcher.group(1));
return(newStringBuilder(source.substring(0,scriptMatcher.start(1))).append(result).append(source.substring(scriptMatcher.end(1)))).toString();
}else{
returnsource;
}
}
privatestaticStringcompressCssStyles(Stringsource){
//checkifblockisnotempty
MatcherstyleMatcher=stylePattern.matcher(source);
if(styleMatcher.find()){
//去掉注释，换行
Stringresult=multiCommentPattern.matcher(styleMatcher.group(1)).replaceAll("");
result=trimPattern.matcher(result).replaceAll("");
result=trimPattern2.matcher(result).replaceAll("");
return(newStringBuilder(source.substring(0,styleMatcher.start(1))).append(result).append(source.substring(styleMatcher.end(1)))).toString();
}else{
returnsource;
}
}
privatestaticStringcompressJspJs(Stringsource){
Stringresult=source;
//因注释符合有可能出现在字符串中，所以要先把字符串中的特殊符好去掉
MatcherstringMatcher=stringPattern.matcher(result);
while(stringMatcher.find()){
StringtmpStr=stringMatcher.group(0);
if(tmpStr.indexOf("//")!=-1||tmpStr.indexOf("/*")!=-1||tmpStr.indexOf("*/")!=-1){
StringblockStr=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,"*/");
returnresult;
}
}
使用注意事项：
使用了上面方法后，再运行程序，是不是发现每个页面查看源代码的时候都变成1行啦，还不错吧，但是在使用的时候还是要注意一些问题：
1.嵌入js本来想调用yuicompressor来压缩，yuicompressor压缩JS前，会先编译js是否合法，因我们嵌入的js中可能很多会用到一些服务器端代码，比如varnow=<%=DateTime.now%>，这样的代码会编译不通过，所以无法使用yuicompressor。
最后只能自己写压缩JS代码，自己写的比较粗燥，所以有个问题还解决，就是如果开发人员在一句js代码后面没有加分号的话，压缩成1行就很有可能出问题。所以使用这个需要保证每条语句结束后都必须带分号。
2.因为是在程序启动的时候压缩所有jsp(aspx)，所以如果是用户请求的时候动态产生的html就无法压缩。
相关文章
- 学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业
- Spring Boot + Web Socket 打造实时监控异常，写得太好了！
- 解决WinHTTP Web Proxy Auto-Discovery Service无法启动问题
- html导航栏自动调间距,HTML CSS导航栏间距[通俗易懂]
- html语言添加下划线,HTML页面中怎么文本添加下划线？[通俗易懂]
- Delphi XE5通过WebService开发Web服务端和手机客户端
- js把HTML转成对象,将js对象转换为html「建议收藏」
- web调用打印机自动打印_网页打印如何设置默认打印机
- 用html设计一个动漫网站_HTML一个介绍的页面代码
- web前端学习/工作笔记（十二）
- 2023 年值得关注的 6 个 Rust web开发框架
- 图扑 Web SCADA 智慧钢厂能源监控 HMI
- 常见web中间件漏洞总结 | Tomcat Nginx JBoss
- 在java web中引用html文件乱码的解决方案
- Web端测试详解编程语言
- MySQL56：支持Web开发的强大数据库（mysql56是什么）
- Linux搭建快捷高效的WEB服务器（linux下web服务器）
- 应用Linux服务器：打开Web应用的大门（linux服务器web）
- HTML <html> 标签
- ASP和MongoDB：优秀的Web开发组合（aspmongodb）
- 使用MySQL和HTML打造高效的数据驱动网站（mysql与html）
- 查找Web目录：利用MSSQL高效实现（mssql查找web目录）
- Web项目下使用Redis加速优化（web项目 redis）
- Web无法连接Redis服务器（web连不上redis）
- 从Web端查看Redis的实时状态（web查看redis）
- web与redis异曲同工的异同（web和redis区别）
- WEB页子窗口(showModalDialog和showModelessDialog)使用说明