游民家园

leafyoung v.s. dotnet

过滤ASP.NET输出HTML中的无用空格

刚才“不小心”检查了一下ASP.NET生成的代码，惊讶地发现ASP.NET输出的代码居然如此地不紧凑，在标签之间有无数的空格和制表符(TAB)，特别是用了嵌套表格之后，那景象真是惨不忍睹啊，有图为证：


照理说在ASP.NET生成的代码中添加这么多无用的空格/tab可能是为了使生成的HTML代码更具可读性，但是由此带来的问题就是使输出的代码变大了，在带宽有限的今天简直就是一种犯罪，浪费用户的钱财，影响用户的体验嘛！而且ASP.NET属于服务器端编程，不可能会直接编辑最终生成的HTML代码，就算把所有的空格/Tab都去了，也不会带来任何不好的影响的吧！？

基于以上考虑，祭出Reflector，果然发现HtmlTextWriter中有Indent属性控制着缩进大小，而且幸运的是该属性还是public类型的，真是天助我也，花了几分钟时间，捣鼓出如下代码：
 1 public class FilterHtmlTextWriter : HtmlTextWriter
 2 {
 3     public FilterHtmlTextWriter(TextWriter writer, string tabString)
 4         : base(writer, tabString)
 5     {
 6     }
 7 
 8     public new int Indent
 9     {
10         get { return 0; }           // 始终返回0
11         set { base.Indent = 0; }    // 始终置0
12     }
13 }

然后重载页面的Render方法（如果所有页面有公共的基类的话就更好了），加入一行代码，如下：
 1 public partial class _Default : System.Web.UI.Page
 2 {
 3     protected override void Render(HtmlTextWriter writer)
 4     {
 5         // 替换writer为我们自定义的类
 6         writer = new FilterHtmlTextWriter(writer.InnerWriter, "");
 7         base.Render(writer);
 8     }
 9     // 
10 }

至此大功告成，让我们重新看看页面的输出，哇塞，讨厌的空格果然变少了@_@，如下图所示：

posted on 2007-02-05 16:56 游民一族 阅读(6941) 评论(34)  编辑 收藏 网摘

评论

#1楼 2007-02-05 17:04 Icebird      

不错，不过可以用编译条件控制，测试状态下的缩进还是有必要的，只有在正式发布状态下不需要缩进   回复  引用  查看    

#2楼 2007-02-05 17:15 Jeffrey Zhao      

有没有统计过能够减少多少体积？   回复  引用  查看    

#3楼[楼主] 2007-02-05 17:17 游民一族      

没有统计过，只是心血来潮，反正没坏处，是吧？！   回复  引用  查看    

#4楼 2007-02-05 17:17 neoragex2002      

把iis设置成gzip压缩即可，没必要用服务器端脚本控制   回复  引用  查看    

#5楼 2007-02-05 17:27 Jeffrey Zhao      

@neoragex2002
gzip是一种。
不过其实用lz的方法，性能会较高一些，理论上。   回复  引用  查看    

#6楼 2007-02-05 17:42 neoragex2002      

@Jeffrey Zhao
几个空格+tab还不是大头，看看里面的view state数据吧。实际上，gzip比override anything简单实用多了。   回复  引用  查看    

#7楼 2007-02-05 17:53 Jeffrey Zhao      

@neoragex2002
gzip的确简单。
不过ViewState的话，就是另一个要注意的问题了，而且gzip也不起作用，呵呵。   回复  引用  查看    

#8楼 2007-02-05 18:04 我不是一只鹿      

空格 是格式的需要

如果空格都不要 我修改起来一定会哭的··   回复  引用  查看    

#9楼[楼主] 2007-02-05 18:10 游民一族      

@我不是一只鹿
要的就是这个效果，哈哈~~~

看文章中标红的部分，对于开发人员来说应该不会任何影响的@_@   回复  引用  查看    

#10楼 2007-02-05 18:11 Dflying Chen      

呵呵，不用table布局，空格会少很多   回复  引用  查看    

#11楼[楼主] 2007-02-05 18:15 游民一族      

@Dflying Chen
是啊！我做了一个布局设计器，理论上要支持拆分成无限列或/和无限行，允许多重嵌套，用div几乎不可能实现，最终table是我唯一的选择，所以就出现了以上的状况了，呵呵@_@   回复  引用  查看    

#12楼 2007-02-05 18:19 neoragex2002      

@Jeffrey Zhao
viewstate默认编码是base64，当然可以压缩了。对于静态页面，用gzip可以cache；对于动态页面，服务器端压缩和gzip压缩一个样，甚至效果更好，结合crc/md5校验的话也可以cache，何必override anything?   回复  引用  查看    

#13楼 2007-02-05 18:32 Dflying Chen      

@游民一族
如果你的＂布局设计器＂是自动生成这些table代码的，那么生成div和absolute positioning岂不是更容易？怎么会不能实现呢？   回复  引用  查看    

#14楼 2007-02-05 18:56 Jeffrey Zhao      

@Dflying Chen
推荐绝对定位的DIV吗？那么表格什么情况下使用呢？   回复  引用  查看    

#15楼 2007-02-05 19:41 Cat Chen      

@Jeffrey Zhao
所有元素都应该根据语义用，如果存放数据的表格，就用<table />。如果不是数据表，就用其它。如果是语义类似的元素（例如菜单项）组成的一维数组，可以用<ul />。如果吴法归纳入什么语义，只是不同的一个块，那就<div />吧。   回复  引用  查看    

#16楼 2007-02-05 20:04 Jeffrey Zhao      

@Cat Chen
这没错，所以我觉得lz用表格还是合理的，否则需要DIV的绝对定位，这样不是矫枉过正了？   回复  引用  查看    

#17楼 2007-02-05 20:18 ZergTant      

为了节省体积也可以把回车/换行去了，也能省下不少呢
写写楼主文章了   回复  引用  查看    

#18楼 2007-02-05 20:31 sunriseyuen[未注册用户]

性能提高了多少？是不是有这个必要？   回复  引用    

#19楼 2007-02-05 21:49 度谷[未注册用户]

学习了   回复  引用    

#20楼 2007-02-05 22:33 GoGoSonny      

要换全换掉的好~全济一堆～呵呵～   回复  引用  查看    

#21楼 2007-02-06 00:56 萧寒      

空格:去了好!
布局:简单就好,支持table   回复  引用  查看    

#22楼 2007-02-06 01:29 Jeffrey Zhao      

@萧寒
其实尽量还是符合标准的好。
Table的话对于页面显示也不是个好的Practice。   回复  引用  查看    

#23楼[楼主] 2007-02-06 08:36 游民一族      

@Dflying Chen
我也想用Div的，不过用div布局3列好像已经是极限了，假如窗口一缩放，而且宽度是100%的话，那么布局就乱做一团！如果是4列的话（虽然这种情况比较少见），恕我才疏学浅，我不会的说~~~   回复  引用  查看    

#24楼 2007-02-06 11:44 Cat Chen      

@游民一族
你可以去看看CSS Mastery，其实要做多少列都可以做到的，不过不是n列对等，而是每次分成左右两列，其中一列再分成n-1列，如此嵌套下去。但对于人的视觉来说，主列显示文章的话三列就是极限；而如果现实商品列表之类的，例如用DataList分列那样，再多一些也还是可以的。   回复  引用  查看    

#25楼[楼主] 2007-02-06 12:05 游民一族      

@Cat Chen
好的，谢谢你的推荐，我会去看看的！   回复  引用  查看    

#26楼 2007-02-06 13:28 huobazi[未注册用户]

把换行符也搞掉，不更小了。嘿嘿   回复  引用    

#27楼 2007-02-08 22:41 小 强      

.net 1.1中不行啊。。。   回复  引用  查看    

#28楼 2007-06-06 11:50 zeng[未注册用户]

我按照你的方法 怎么就不行呢 ??   回复  引用    

#29楼 2007-06-17 22:51 qq个性网名[未注册用户]

不错，学习了！   回复  引用    

#30楼 2007-08-04 00:13 zzzzz[未注册用户]

好像只对GridView有用，Repeater DataList 没用   回复  引用    

#31楼 2007-10-17 08:41 厦门网站建设[未注册用户]

谢谢.
不错   回复  引用    

#32楼 2007-11-13 23:07 coollzh1[未注册用户]

确实可以去掉很多，我当时没有想到楼主的方法，就用StringBuilder构造数据，数据量那个小呀.....!   回复  引用    

#33楼 2008-06-30 20:37 你的方法不起作用？ [未注册用户]

你的方法不起作用？ 难道.net 2.0 的就不行 ？ 设了很多次都不行   回复  引用    

#34楼 2009-02-21 12:32 青瓦斋      

Repeater不行啊，怎么搞好？   回复  引用  查看    




发表评论

昵称： [登录] [注册]

主页：

邮箱：(仅博主可见)

评论内容：

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 640882




相关文章:

相关链接: