WEB高性能开发:HTML压缩
WEB高性能开发:HTML压缩
[日期:2011-01-09] | 来源: 作者: | [字体:大 中 小] |
上一篇随笔中网友 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代码:
1 import java.io.StringReader;
2 import java.io.StringWriter;
3 import java.util.*;
4 import java.util.regex.*;
5
6 /*******************************************
7 * 压缩jsp,html中的代码,去掉所有空白符、换行符
8 * @author bearrui(ak-47)
9 * @version 0.1
10 * @date 2010-5-13
11 *******************************************/
12 public class HtmlCompressor {
13 private static String tempPreBlock = "%%%HTMLCOMPRESS~PRE&&&";
14 private static String tempTextAreaBlock = "%%%HTMLCOMPRESS~TEXTAREA&&&";
15 private static String tempScriptBlock = "%%%HTMLCOMPRESS~SCRIPT&&&";
16 private static String tempStyleBlock = "%%%HTMLCOMPRESS~STYLE&&&";
17 private static String tempJspBlock = "%%%HTMLCOMPRESS~JSP&&&";
18
19 private static Pattern commentPattern = Pattern.compile("<!--\\s*[^\\[].*?-->", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
20 private static Pattern itsPattern = Pattern.compile(">\\s+?<", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
21 private static Pattern prePattern = Pattern.compile("<pre[^>]*?>.*?</pre>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
22 private static Pattern taPattern = Pattern.compile("<textarea[^>]*?>.*?</textarea>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
23 private static Pattern jspPattern = Pattern.compile("<%([^-@][\\w\\W]*?)%>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
24 // <script></script>
25 private static Pattern scriptPattern = Pattern.compile("(?:<script\\s*>|<script type=['\"]text/javascript['\"]\\s*>)(.*?)</script>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
26 private static Pattern stylePattern = Pattern.compile("<style[^>()]*?>(.+)</style>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
27
28 // 单行注释,
29 private static Pattern signleCommentPattern = Pattern.compile("//.*");
30 // 字符串匹配
31 private static Pattern stringPattern = Pattern.compile("(\"[^\"\\n]*?\"|'[^'\\n]*?')");
32 // trim去空格和换行符
33 private static Pattern trimPattern = Pattern.compile("\\n\\s*",Pattern.MULTILINE);
34 private static Pattern trimPattern2 = Pattern.compile("\\s*\\r",Pattern.MULTILINE);
35 // 多行注释
36 private static Pattern multiCommentPattern = Pattern.compile("/\\*.*?\\*/", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
37
38 private static String tempSingleCommentBlock = "%%%HTMLCOMPRESS~SINGLECOMMENT&&&"; // //占位符
39 private static String tempMulitCommentBlock1 = "%%%HTMLCOMPRESS~MULITCOMMENT1&&&"; // /*占位符
40 private static String tempMulitCommentBlock2 = "%%%HTMLCOMPRESS~MULITCOMMENT2&&&"; // */占位符
41
42
43 public static String compress(String html) throws Exception {
44 if(html == null || html.length() == 0) {
45 return html;
46 }
47
48 List<String> preBlocks = new ArrayList<String>();
49 List<String> taBlocks = new ArrayList<String>();
50 List<String> scriptBlocks = new ArrayList<String>();
51 List<String> styleBlocks = new ArrayList<String>();
52 List<String> jspBlocks = new ArrayList<String>();
53
54 String result = html;
55
56 //preserve inline java code
57 Matcher jspMatcher = jspPattern.matcher(result);
58 while(jspMatcher.find()) {
59 jspBlocks.add(jspMatcher.group(0));
60 }
61 result = jspMatcher.replaceAll(tempJspBlock);
62
63 //preserve PRE tags
64 Matcher preMatcher = prePattern.matcher(result);
65 while(preMatcher.find()) {
66 preBlocks.add(preMatcher.group(0));
67 }
68 result = preMatcher.replaceAll(tempPreBlock);
69
70 //preserve TEXTAREA tags
71 Matcher taMatcher = taPattern.matcher(result);
72 while(taMatcher.find()) {
73 taBlocks.add(taMatcher.group(0));
74 }
75 result = taMatcher.replaceAll(tempTextAreaBlock);
76
77 //preserve SCRIPT tags
78 Matcher scriptMatcher = scriptPattern.matcher(result);
79 while(scriptMatcher.find()) {
80 scriptBlocks.add(scriptMatcher.group(0));
81 }
82 result = scriptMatcher.replaceAll(tempScriptBlock);
83
84 // don't process inline css
85 Matcher styleMatcher = stylePattern.matcher(result);
86 while(styleMatcher.find()) {
87 styleBlocks.add(styleMatcher.group(0));
88 }
89 result = styleMatcher.replaceAll(tempStyleBlock);
90
91 //process pure html
92 result = processHtml(result);
93
94 //process preserved blocks
95 result = processPreBlocks(result, preBlocks);
96 result = processTextareaBlocks(result, taBlocks);
97 result = processScriptBlocks(result, scriptBlocks);
98 result = processStyleBlocks(result, styleBlocks);
99 result = processJspBlocks(result, jspBlocks);
100
101 preBlocks = taBlocks = scriptBlocks = styleBlocks = jspBlocks = null;
102
103 return result.trim();
104 }
105
106 private static String processHtml(String html) {
107 String result = html;
108
109 //remove comments
110 // if(removeComments) {
111 result = commentPattern.matcher(result).replaceAll("");
112 // }
113
114 //remove inter-tag spaces
115 // if(removeIntertagSpaces) {
116 result = itsPattern.matcher(result).replaceAll("><");
117 // }
118
119 //remove multi whitespace characters
120 // if(removeMultiSpaces) {
121 result = result.replaceAll("\\s{2,}"," ");
122 // }
123
124 return result;
125 }
126
127 private static String processJspBlocks(String html, List<String> blocks){
128 String result = html;
129 for(int i = 0; i < blocks.size(); i++) {
130 blocks.set(i, compressJsp(blocks.get(i)));
131 }
132 //put preserved blocks back
133 while(result.contains(tempJspBlock)) {
134 result = result.replaceFirst(tempJspBlock, Matcher.quoteReplacement(blocks.remove(0)));
135 }
136
137 return result;
138 }
139 private static String processPreBlocks(String html, List<String> blocks) throws Exception {
140 String result = html;
141
142 //put preserved blocks back
143 while(result.contains(tempPreBlock)) {
144 result = result.replaceFirst(tempPreBlock, Matcher.quoteReplacement(blocks.remove(0)));
145 }
146
147 return result;
148 }
149
150 private static String processTextareaBlocks(String html, List<String> blocks) throws Exception {
151 String result = html;
152
153 //put preserved blocks back
154 while(result.contains(tempTextAreaBlock)) {
155 result = result.replaceFirst(tempTextAreaBlock, Matcher.quoteReplacement(blocks.remove(0)));
156 }
157
158 return result;
159 }
160
161 private static String processScriptBlocks(String html, List<String> blocks) throws Exception {
162 String result = html;
163
164 // if(compressJavaScript) {
165 for(int i = 0; i < blocks.size(); i++) {
166 blocks.set(i, compressJavaScript(blocks.get(i)));
167 }
168 // }
169
170 //put preserved blocks back
171 while(result.contains(tempScriptBlock)) {
172 result = result.replaceFirst(tempScriptBlock, Matcher.quoteReplacement(blocks.remove(0)));
173 }
174
175 return result;
176 }
177
178 private static String processStyleBlocks(String html, List<String> blocks) throws Exception {
179 String result = html;
180
181 // if(compressCss) {
182 for(int i = 0; i < blocks.size(); i++) {
183 blocks.set(i, compressCssStyles(blocks.get(i)));
184 }
185 // }
186
187 //put preserved blocks back
188 while(result.contains(tempStyleBlock)) {
189 result = result.replaceFirst(tempStyleBlock, Matcher.quoteReplacement(blocks.remove(0)));
190 }
191
192 return result;
193 }
194
195 private static String compressJsp(String source) {
196 //check if block is not empty
197 Matcher jspMatcher = jspPattern.matcher(source);
198 if(jspMatcher.find()) {
199 String result = compressJspJs(jspMatcher.group(1));
200 return (new StringBuilder(source.substring(0, jspMatcher.start(1))).append(result).append(source.substring(jspMatcher.end(1)))).toString();
201 } else {
202 return source;
203 }
204 }
205 private static String compressJavaScript(String source) {
206 //check if block is not empty
207 Matcher scriptMatcher = scriptPattern.matcher(source);
208 if(scriptMatcher.find()) {
209 String result = compressJspJs(scriptMatcher.group(1));
210 return (new StringBuilder(source.substring(0, scriptMatcher.start(1))).append(result).append(source.substring(scriptMatcher.end(1)))).toString();
211 } else {
212 return source;
213 }
214 }
215
216 private static String compressCssStyles(String source) {
217 //check if block is not empty
218 Matcher styleMatcher = stylePattern.matcher(source);
219 if(styleMatcher.find()) {
220 // 去掉注释,换行
221 String result= multiCommentPattern.matcher(styleMatcher.group(1)).replaceAll("");
222 result = trimPattern.matcher(result).replaceAll("");
223 result = trimPattern2.matcher(result).replaceAll("");
224 return (new StringBuilder(source.substring(0, styleMatcher.start(1))).append(result).append(source.substring(styleMatcher.end(1)))).toString();
225 } else {
226 return source;
227 }
228 }
229
230 private static String compressJspJs(String source){
231 String result = source;
232 // 因注释符合有可能出现在字符串中,所以要先把字符串中的特殊符好去掉
233 Matcher stringMatcher = stringPattern.matcher(result);
234 while(stringMatcher.find()){
235 String tmpStr = stringMatcher.group(0);
236
237 if(tmpStr.indexOf("//") != -1 || tmpStr.indexOf("/*") != -1 || tmpStr.indexOf("*/") != -1){
238 String blockStr = tmpStr.replaceAll("//", tempSingleCommentBlock).replaceAll("/\\*", tempMulitCommentBlock1)
239 .replaceAll("\\*/", tempMulitCommentBlock2);
240 result = result.replace(tmpStr, blockStr);
241 }
242 }
243 // 去掉注释
244 result = signleCommentPattern.matcher(result).replaceAll("");
245 result = multiCommentPattern.matcher(result).replaceAll("");
246 result = trimPattern2.matcher(result).replaceAll("");
247 result = trimPattern.matcher(result).replaceAll(" ");
248 // 恢复替换掉的字符串
249 result = result.replaceAll(tempSingleCommentBlock, "//").replaceAll(tempMulitCommentBlock1, "/*")
250 .replaceAll(tempMulitCommentBlock2, "*/");
251
252 return result;
253 }
254 }
255
使用注意事项:
使用了上面方法后,再运行程序,是不是发现每个页面查看源代码的时候都变成1行啦,还不错吧,但是在使用的时候还是要注意一些问题:
1. 嵌入js本来想调用yuicompressor来压缩,yuicompressor压缩JS前,会先编译js是否合法,因我们嵌入的js中可能很多会用到一些服务器端代码,比如 var now = <%=DateTime.now %> ,这样的代码会编译不通过,所以无法使用yuicompressor。
最后只能自己写压缩JS代码,自己写的比较粗燥,所以有个问题还解决,就是如果开发人员在一句js代码后面没有加分号的话,压缩成1行就很有可能出问题。所以使用这个需要保证每条语句结束后都必须带分号。
2. 因为是在程序启动的时候压缩所有jsp(aspx),所以如果是用户请求的时候动态产生的html就无法压缩
WEB高性能开发:HTML压缩相关推荐
- Java Web 高性能开发,前端的高性能
Java Web 高性能开发,第 2 部分: 前端的高性能 Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.Web 的思想是 ...
- Java Web 高性能开发,第 1 部分: 前端的高性能
原文地址:http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/#ibm-pcon 魏 强, 研究生, 东北大学 简介: Web ...
- WEB高性能开发(10) - 疯狂的HTML压缩
前言: 上一篇随笔中网友 skyaspnet 问我如何压缩HTML,当时回答是推荐他使用gzip,后来想想,要是能把所有的html,jsp(aspx)在运行前都压缩成1行未免不是一件好事啊.一般我们启 ...
- web高性能开发系列随笔
在BlogJava里写了一些关于高性能WEB开发的随笔,因为都是跟前端技术相关(html,http,js,css等),所以也贴到博客园来,吸收下人气. 1. HTTP服务器. 2.性能测试工具推荐 3 ...
- Web前端开发最佳实践(3):前端代码和资源的压缩与合并
一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源 ...
- 超级棒的170+款web前端开发工具汇总,千万要收藏好!
作者:web前端开发 我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您 ...
- Google Web App开发指南
http://www.html5rocks.com/webappfieldguide/case-studies/case-study-intro/ 第一章:什么是Web Apps? 很多人向我问起学习 ...
- 《Web前端开发最佳实践》读书笔记
总的来说,这本书给我感觉帮助不大,比较适合新手,对新手养成好的习惯有些帮助.更深层次的东西比较少,而且由于书的发行周期,对于前端这种日新月异的技术来说,过时.与新技术新理念脱节,是没法避免的事情(20 ...
- 虚拟研讨会:移动Web应用开发技术最新动态
虚拟研讨会:移动Web应用开发技术最新动态 2011年03月02日 为了掌握移动Web应用开发的最新动态,InfoQ邀请一些该领域最流行的库.工具和框架的缔造者,组织了一场虚拟研讨会. Michael ...
最新文章
- Java:使用synchronized和Lock对象获取对象锁
- 一个老外如何丑化中国程序员
- php 删除文件夹及文件夹,php删除一个路径下的所有文件夹和文件的方法
- php 制作ppt,PPT制作三个基本要素是什么?
- 正则表达式之量词(重复出现)?、*、+
- android app自动锁屏,安卓手机锁屏后程序自动关闭,怎么设置手机app允许锁屏后台运行...
- Excel催化剂开源第4波-ClickOnce部署要点之导入数字证书及创建EXCEL信任文件夹
- Java入门 - 循环结构基础
- java pdf加水印 性能_java 实现 PDF 加水印功能
- 谷歌邮箱lmap服务器填什么_GMAIL邮箱IMAP设置
- UI设计:使用PS(Photoshop)绘制一款电商类App
- MST++: Multi-stage Spectral-wiseTransformer for Efficient Spectral Reconstruction
- 模仿“选择游戏角色的页面”
- 护眼灯国a和国aa的区别有哪些?2022如何选择真正能护眼的台灯
- D435i+vins-Fusion+ego-planner+yolo无人机避障实测
- Android 10 设置kernel log level
- 数据库怎么设计字典表
- [力扣刷题总结](双指针篇)
- 历时8个月,10w字!前端知识体系+大厂面试笔记(工程化篇)
- 自动控制 matlab仿真,基于MATLAB自动控制系统仿真.doc
热门文章
- 《惢客创业日记》2018.10.21(周日) 作为主播给喜马拉雅FM的三个建议(下)
- 测试开发工作者日记:2020.6.4-6.5
- linux安装Samba服务器及配置(windows及ios均可连接互传文件),帮你解决多设备共享文件的问题
- 心的躁动不安 是我对世界的一无所知
- 一颗躁动的心---下决心从SLAM开始,不钻研嵌入式底层了
- Dubbo 通信协议 dubbo 协议为什么不能传大包
- 《读者》的“卷首语” (三)
- 嵌入式核心板在麻醉系统中的应用
- 适合用于听写的新型语音识别技术 可将单词错误率低于5%
- 程序设计思维与实践 Week10限时模拟 东东的魔方