开发者社区> 技术小甜> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

前言:    

     上一篇随笔中网友 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行啦,还不错吧,但是在使用的时候还是要注意一些问题:

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

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

 

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










本文转自BearRui(AK-47)博客园博客,原文链接:    http://www.cnblogs.com/BearsTaR/archive/2010/05/17/html_compressor.html,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《21天学通HTML+CSS+JavaScript Web开发(第7版)》——2.7 小结
本章阐述了如何为高效地创建网页做好准备。您学习了如何使用Google Chrome内置的开发者工具来帮助创建网页,以及如何寻找可用于创建网页的文本编辑器。您学习了如何制定网站要达成的目标以及如何寻找网站托管服务。您还学习了使用HTML创建网站前如何使用线框图来创建网站地图。
1198 0
web开发性能优化---扩展性能篇
1、实现代码分离 一个成熟的软件开发团队一般都不会完全手写代码,这里讲的代码分离只要是开发中用到的小技巧,通过底层框架+手工代码方式结合实现快速开发和快速扩展; Code文件夹内文件不允许修改,文件夹主要存放系统自动生成代码;同一DAL层下运行两个类名相同,采用partial合并类,但是两个类不允许有同名同参数方法; 利用partial关键字合并两个同名类小技巧,code存放代码底层工具自动生成代码类,根目录存放手工添加自定义方法类。
702 0
web开发性能优化---用户体验篇
如何从技术角度如何增强用户体验,都是很多平台都在做的事情,根据个人实际经验碰到几种体验做下总结。 1、减少页面刷新白屏 适当使用ajax技术,改善刷新白屏现象;2、信息提醒,邮件、站内信、短信在购物流程、售后流程适当增加信息温馨提醒环节;3、定期回访及互动记录好会员每次来电来访、购买情况分析等数据做到定期客户关怀;增加生日免单、会员日等互动环节,增强互动性;3、智能分析推荐分析会员购买偏好,智能推荐相关相关产品;根据会员喜欢定期推送促销信息;4、多平台联合登录可以通过QQ、开心网、支付宝等常用平台账号联合登录。
752 0
web开发性能优化---数据库篇
1、 查询出的数据量过大(可以采用多次查询,其他的方法降低数据量),尽量采取分页查询数据 2、锁或者死锁(这也是查询慢最常见的问题,是程序设计的缺陷)  3、返回了不必要的行和列   用OR的字句可以分解成多个查询,并且通过UNION链接多个查询。
658 0
web开发性能优化---分布式篇
1、分布式架构-独立站点开发 模块化结构化开发,实现多资源分站点,数据分库,为后期实现分布式部署做准备,主要分为以下几部分: web站点: 1.web前端站点  2.图片、文件资源站点 3.管理端站点4.数据接口站点 数据库: 1.业务数据库 2.访问信息数据库、日志 前期访问量和数据量较小可采取单台或小数目台数服务器部署,后期大数据量采取多web站点多数据服务器方式进行部署。
906 0
web开发性能优化---代码优化篇
1、合理使用缓存使用 提高性能最好最快的办法当然是通过缓存来改善,对于任何一个web开发者都应该善用缓存。Asp.net下的缓存机制十分强大,用好缓存机制可以让我们极大的改善web应用的性能。
814 0
web开发性能优化---UI界面篇
1、尽量采用div+css布局 DIV+CSS相比较与表格布局的优势: a.代码精简 使用DIV+CSS布局,页面代码精简,这一点对XHTML有所了解的都知道。
1142 0
【今日推荐】移动 Web 开发的10个最佳 JavaScript 框架
  选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务。开发人员可以使用框架实现的功能高效地达到他们的开发目标。这些预实现的组件采用优秀的设计模式和最佳实践,促进应用程序以标准化的方式开发。
1702 0
移动 Web 开发的10个优秀 JavaScript 框架
选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务。开发人员可以使用框架实现的功能高效地达到他们的开发目标。这些预实现的组件采用优秀的设计模式和最佳实践,促进应用程序以标准化的方式开发。最重要的是,它让开人员在开发过程中得心应手。
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Web应用系统性能优化
立即下载
WEB浏览器中即将发生的安全变化
立即下载
Web服务架构变迁与性能优化
立即下载