最近在做一个OA项目，其中有块协同的功能，类似于BBS，具体需求是什么样的我就不细讲了，我们这里就认为是一个BBS吧。一个帖子会有多个回帖，在帖子的展示页面上将帖子和所有回帖一起展示出来。当一个帖子的回复数达到上百时打开帖子就会特别慢，而且CPU和内存也会占用很高。打开页面的HTML源文件，可以看到有些回复数很高的帖子的页面大小也十分巨大，可能一个HTML页面就有1M大小。对于企业内部用户来说，1M其实也没有什么，毕竟是在局域网中，几秒钟就可以下载完成打开了，但是对于外网用户来说这就比较痛苦了。所以需要对这个页面进行减肥，将页面大小降下来。
首页来分析一下这个帖子的展示页面，上面是帖子的相关信息和帖子内容，都是一些Table元素和Label控件，下面是回复列表，每个回复里面可能会有附件，所以我们使用Repeater控件来做回复列表，一个回复中可能有多个附件，所以是在Repeater中嵌套绑定Repeater。使用Repeater而没有使用DataGrid或者DataList就是为了防止产生垃圾代码，所以其中产生垃圾代码是比较少的。但是为什么页面会那么大呢？分析HTML，可以看到生成的HTML还比较漂亮，层次缩进分明。
但是偏偏就是这个层次缩进分明造成了如此大的页面。我取出其中的一个回复的HTML如下：
< td class ="bbs_banner" style ="text-align: right; padding-right: 10px" >
#19 发表于：2009-4-20 13:03:04
</ td >
</ tr >
< tr >
< td >
< table width ="100%" border ="0" cellspacing ="8" cellpadding ="0" >
< tr >
< td width ="140" valign ="top" >
< div style ="text-align: center" class ="userName" id ='wusihong' >
< img src ='images/pic_head.jpg' width ="52"
height ="51" >< br />
< div class ="font12" style ="padding-top: 5px" >
吴偲宏
</ div >
</ div >
</ td >
< td width ="1" bgcolor ="#add1ff" >
</ td >
< td class ="font14" >
已处理 < br />
</ td >
</ tr >
</ table >
</ td >
</ tr >
结构虽然很清晰，但是大家可以看出来，为了HTML的层次，生成的代码前面添加了无数的空格。这些空格是怎么来的，我们看看Repeater中的定义：
< ItemTemplate >
< tr >
< td class = " bbs_banner " style = " text-align: right; padding-right: 10px " >
# <% # ((IDataItemContainer)Container).DataItemIndex + 1 %>& nbsp; 发表于： <% # Eval( " FeedbackDate " ) %>
</ td >
</ tr >
< tr >
< td >
< table width = " 100% " border = " 0 " cellspacing = " 8 " cellpadding = " 0 " >
< tr >
< td width = " 140 " valign = " top " >
< div style = " text-align: center " class = " userName " id = ' <%#Eval("FeedbackUserLoginName") %> ' >
< img src = ' <%# GetUserHeadUrl(Eval("FeedbackUserLoginName").ToString()) %> ' width = " 52 "
height = " 51 " >< br />
< div class = " font12 " style = " padding-top: 5px " >
<% # Eval( " FeedbackUserName " ) %>
</ div >
</ div >
</ td >
< td width = " 1 " bgcolor = " #add1ff " >
</ td >
< td class = " font14 " >
<% # Eval( " FeedbackBody " ) %>< br />
< asp:Repeater ID = " rptFeedbackAttachment " runat = " server " DataSource = ' <%# Eval("FeedbackAttachment") %> ' >
< ItemTemplate >
< a href = ' <%#Eval("fbAttachmentUrl") %> ' >
<% #Eval( " fbAttachmentName " ) %></ a >
</ ItemTemplate >
</ asp:Repeater >
</ td >
</ tr >
</ table >
</ td >
</ tr >
</ ItemTemplate >
</ asp:Repeater >
这里可以看到，就是VS为了格式好看，在前面添加了很多的空格，格式化的操作就是在aspx页面上选择需要格式化的代码，然后右键选择“设置选定内容的格式”即可，如图：
这里VS是帮我们添加了一大串的空格，这些空格在Repeater中也会当作需要被重复输出的内容而不断重复输出。在Repeater中的数据量不是很大的时候还不明显，但是在Repeater中绑定上百个元素时，这些空格将会占据大量的空间。
解决办法也很简单，将Repeater中的代码进行减肥，去掉这些没有用的空格。这样下来，我们的代码被精简为：
< ItemTemplate >
< tr >< td class = " bbs_banner " style = " text-align: right; padding-right: 10px " > # <% # ((IDataItemContainer)Container).DataItemIndex + 1 %>& nbsp; 发表于： <% # Eval( " FeedbackDate " ) %></ td ></ tr >
< tr >< td >< table width = " 100% " border = " 0 " cellspacing = " 8 " cellpadding = " 0 " >
< tr >< td width = " 140 " valign = " top " >< div style = " text-align: center " class = " userName " id = ' <%#Eval("FeedbackUserLoginName") %> ' >
< img src = ' <%# GetUserHeadUrl(Eval("FeedbackUserLoginName").ToString()) %> ' width = " 52 " height = " 51 " >< br />
< div class = " font12 " style = " padding-top: 5px " ><% # Eval( " FeedbackUserName " ) %></ div ></ div ></ td >
< td width = " 1 " bgcolor = " #add1ff " ></ td >
< td class = " font14 " ><% # Eval( " FeedbackBody " ) %>< br />
< asp:Repeater ID = " rptFeedbackAttachment " runat = " server " DataSource = ' <%# Eval("FeedbackAttachment") %> ' >
< ItemTemplate >
< a href = ' <%#Eval("fbAttachmentUrl") %> ' ><% #Eval( " fbAttachmentName " ) %></ a >
</ ItemTemplate >
</ asp:Repeater >
</ td ></ tr ></ table ></ td ></ tr ></ ItemTemplate >
</ asp:Repeater >
这样下来，虽然代码看起来好像是丑了一些，但是去掉了无用的空格后页面大小明显减小，原来1M的一个帖子，现在减肥后就只有350K了，这个空格所占的空间是相当惊人的。以下是减肥后的一条回复的HTML：
< tr >< td >< table width ="100%" border ="0" cellspacing ="8" cellpadding ="0" >
< tr >< td width ="140" valign ="top" >< div style ="text-align: center" class ="userName" id ='shiyingchun' >
< img src ='images/pic_head.jpg' width ="52" height ="51" >< br />
< div class ="font12" style ="padding-top: 5px" > AAA </ div ></ div ></ td >
< td width ="1" bgcolor ="#add1ff" ></ td >
< td class ="font14" > 已处理 < br /> </ td ></ tr ></ table ></ td ></ tr >
除了这一点以外，我们还可以进一步对该页面进行减肥。比如禁用页面的视图状态，禁用后页面大小从350K进一步减小到278K，如果完全为了减肥的需要，我们可以将整个HTML中的空格去掉，不仅仅是去掉Repeater中的，这样又可以减小10K左右。
另外，规范css也是一个减肥的好办法，不要将css样式写在HTML元素中，HTML中只想要设置class，然后我们统一在页面的Head或者css文件中写css即可。
从一个1M大小的HTML文件，经过我们这样减肥，能够减小到250K左右，只有原来的四分之一，相当惊人的成功！这里最重要的就是在Repeater中的大量没用的空格，这个是VS自动添加进去的，所以大家如果需要对页面进行减肥的时候也需要注意。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
