最近在做一個oa項目，其中有塊協同的功能，類似于bbs，具體需求是什麼樣的我就不細講了，我們這裡就認為是一個bbs吧。一個文章會有多個回帖，在文章的展示頁面上将文章和所有回帖一起展示出來。當一個文章的回複數達到上百時打開文章就會特别慢，而且cpu和記憶體也會占用很高。打開頁面的html源檔案，可以看到有些回複數很高的文章的頁面大小也十分巨大，可能一個html頁面就有1m大小。對于企業内部使用者來說，1m其實也沒有什麼，畢竟是在區域網路中，幾秒鐘就可以下載下傳完成打開了，但是對于外網使用者來說這就比較痛苦了。是以需要對這個頁面進行減肥，将頁面大小降下來。
首頁來分析一下這個文章的展示頁面，上面是文章的相關資訊和文章内容，都是一些table元素和label控件，下面是回複清單，每個回複裡面可能會有附件，是以我們使用repeater控件來做回複清單，一個回複中可能有多個附件，是以是在repeater中嵌套綁定repeater。使用repeater而沒有使用datagrid或者datalist就是為了防止産生垃圾代碼，是以其中産生垃圾代碼是比較少的。但是為什麼頁面會那麼大呢？分析html，可以看到生成的html還比較漂亮，層次縮進分明。
但是偏偏就是這個層次縮進分明造成了如此大的頁面。我取出其中的一個回複的html如下：
<tr>
<td class="bbs_banner" style="text-align: right; padding-right: 10px">
#19&nbsp; 發表于：2009-4-20 13:03:04
</td>
</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 class="font14">
已處理<br />
</tr>
</table>
</tr>
結構雖然很清晰，但是大家可以看出來，為了html的層次，生成的代碼前面添加了無數的空格。這些空格是怎麼來的，我們看看repeater中的定義：
<asp:repeater id="rptfeedbacks" runat="server">
<itemtemplate>
<tr>
<td class="bbs_banner" style="text-align: right; padding-right: 10px">
#<%# ((idataitemcontainer)container).dataitemindex+1 %>&nbsp; 發表于：<%# eval("feedbackdate")%>
</td>
</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 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>
</tr>
</table>
</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") %>'>
<a href='<%#eval("fbattachmenturl") %>'><%#eval("fbattachmentname")%></a>
</itemtemplate>
</asp:repeater>
</td></tr></table></td></tr></itemtemplate>
這樣下來，雖然代碼看起來好像是醜了一些，但是去掉了無用的空格後頁面大小明顯減小，原來1m的一個文章，現在減肥後就隻有350k了，這個空格所占的空間是相當驚人的。以下是減肥後的一條回複的html：
<tr><td class="bbs_banner" style="text-align: right; padding-right: 10px">#34&nbsp; 發表于：2009-4-20 13:04:56</td></tr>
<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 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自動添加進去的，是以大家如果需要對頁面進行減肥的時候也需要注意。