高性能WEB开发之疯狂的HTML压缩

开发 前端
在“JS、CSS的合并、压缩、缓存管理”一文中说到自己写过的1个自动合并、压缩JS,CSS,并添加版本号的组件。这次把压缩html的功能也加入到该组件中,流程很简单,就是在程序启动(contextInitialized or Application_Start)的时候扫描所有html,jsp(aspx)进行压缩。

上一篇随笔中网友 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换行符的时候,不能直接跟一下行动内容,需要有空格,考虑下面的代码:

  1. else  
  2. return; 

如果不带空格,则变成elsereturn。

4. jsp(aspx) 中很有可能会使用嵌入一些服务器代码,这个时候也需要单独处理,里面注释的处理方法跟js的一样。

源代码:

下面是java实现的源代码,也可以 猛击此处 下载该代码,相信大家都看的懂,也很容易改成net代码:

  1. show source 

使用注意事项:

使用了上面方法后,再运行程序,是不是发现每个页面查看源代码的时候都变成1行啦,还不错吧,但是在使用的时候还是要注意一些问题:

1. 嵌入js本来想调用yuicompressor来压缩,yuicompressor压缩JS前,会先编译js是否合法,因我们嵌入的js中可能很多会用到一些服务器端代码,比如 var now = ,这样的代码会编译不通过,所以无法使用yuicompressor。

最后只能自己写压缩JS代码,自己写的比较粗燥,所以有个问题还解决,就是如果开发人员在一句js代码后面没有加分号的话,压缩成1行就很有可能出问题。所以使用这个需要保证每条语句结束后都必须带分号。

2. 因为是在程序启动的时候压缩所有jsp(aspx),所以如果是用户请求的时候动态产生的html就无法压缩。

原文链接:http://www.cnblogs.com/BearsTaR/archive/2010/05/17/html_compressor.html

系列专题:高性能WEB开发应用指南

【编辑推荐】

  1. 高性能WEB开发之页面呈现、重绘、回流
  2. 高性能WEB开发之如何加载JavaScript
  3. 高性能WEB开发之减少请求、响应的数据量
  4. 让Web开发者事半功倍的8个网站
  5. 20个新鲜的Web应用 Web设计师不可错过
责任编辑:陈贻新 来源: BearRui
相关推荐

2011-04-22 09:54:37

CSSjavascript

2011-04-18 10:16:30

WEB高性能

2011-04-07 13:53:25

Web工具

2011-10-18 13:58:32

高性能web

2011-04-19 11:06:03

JavaScriptweb

2011-04-21 09:59:48

WEBjavascript

2011-04-07 13:39:24

WebHTTP

2011-06-14 09:27:43

高性能WEB开发

2013-09-10 16:16:19

移动网站性能优化移动web

2011-04-21 10:47:29

Webjavascript

2011-04-25 10:11:57

高性能web开发

2011-04-28 09:40:26

flush高性能Web开发

2009-07-30 10:28:56

Web高性能开发

2016-08-23 14:37:21

2013-06-19 09:20:53

Web开发Web性能优化高性能

2016-11-28 09:19:27

2013-08-16 14:43:14

高性能移动Web移动Web站点移动Web

2013-09-10 17:13:57

移动网站性能优化移动web

2014-03-19 14:34:06

JQuery高性能

2019-03-14 15:38:19

ReactJavascript前端
点赞
收藏

51CTO技术栈公众号