Web页面减肥，慎用VS的自动格式化功能！
最近在做一個OA項目，其中有塊協(xié)同的功能，類似于BBS，具體需求是什么樣的我就不細講了，我們這里就認為是一個BBS吧。一個帖子會有多個回帖，在帖子的展示頁面上將帖子和所有回帖一起展示出來。當一個帖子的回復(fù)數(shù)達到上百時打開帖子就會特別慢，而且CPU和內(nèi)存也會占用很高。打開頁面的HTML源文件，可以看到有些回復(fù)數(shù)很高的帖子的頁面大小也十分巨大，可能一個HTML頁面就有1M大小。對于企業(yè)內(nèi)部用戶來說，1M其實也沒有什么，畢竟是在局域網(wǎng)中，幾秒鐘就可以下載完成打開了，但是對于外網(wǎng)用戶來說這就比較痛苦了。所以需要對這個頁面進行減肥，將頁面大小降下來。
首頁來分析一下這個帖子的展示頁面，上面是帖子的相關(guān)信息和帖子內(nèi)容，都是一些Table元素和Label控件，下面是回復(fù)列表，每個回復(fù)里面可能會有附件，所以我們使用Repeater控件來做回復(fù)列表，一個回復(fù)中可能有多個附件，所以是在Repeater中嵌套綁定Repeater。使用Repeater而沒有使用DataGrid或者DataList就是為了防止產(chǎn)生垃圾代碼，所以其中產(chǎn)生垃圾代碼是比較少的。但是為什么頁面會那么大呢？分析HTML，可以看到生成的HTML還比較漂亮，層次縮進分明。
但是偏偏就是這個層次縮進分明造成了如此大的頁面。我取出其中的一個回復(fù)的HTML如下：
?
<tr>?????<td?class="bbs_banner"?style="text-align:?right;?padding-right:?10px">?
????????#19 ?發(fā)表于：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>
結(jié)構(gòu)雖然很清晰，但是大家可以看出來，為了HTML的層次，生成的代碼前面添加了無數(shù)的空格。這些空格是怎么來的，我們看看Repeater中的定義：
?
<asp:Repeater?ID="rptFeedbacks"?runat="server">?????<ItemTemplate>?
????????<tr>?
????????????<td?class="bbs_banner"?style="text-align:?right;?padding-right:?10px">?
????????????????#<%#?((IDataItemContainer)Container).DataItemIndex+1?%> ?發(fā)表于：<%#?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頁面上選擇需要格式化的代碼，然后右鍵選擇“設(shè)置選定內(nèi)容的格式”即可，如圖：
這里VS是幫我們添加了一大串的空格，這些空格在Repeater中也會當作需要被重復(fù)輸出的內(nèi)容而不斷重復(fù)輸出。在Repeater中的數(shù)據(jù)量不是很大的時候還不明顯，但是在Repeater中綁定上百個元素時，這些空格將會占據(jù)大量的空間。
解決辦法也很簡單，將Repeater中的代碼進行減肥，去掉這些沒有用的空格。這樣下來，我們的代碼被精簡為：
?
<asp:Repeater?ID="rptFeedbacks"?runat="server">?<ItemTemplate>?
<tr><td?class="bbs_banner"?style="text-align:?right;?padding-right:?10px">#<%#?((IDataItemContainer)Container).DataItemIndex+1?%> ?發(fā)表于：<%#?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的一個帖子，現(xiàn)在減肥后就只有350K了，這個空格所占的空間是相當驚人的。以下是減肥后的一條回復(fù)的HTML：
?
?
<tr><td?class="bbs_banner"?style="text-align:?right;?padding-right:?10px">#34 ?發(fā)表于：2009-4-20?13:04:56</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='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>
除了這一點以外，我們還可以進一步對該頁面進行減肥。比如禁用頁面的視圖狀態(tài)，禁用后頁面大小從350K進一步減小到278K，如果完全為了減肥的需要，我們可以將整個HTML中的空格去掉，不僅僅是去掉Repeater中的，這樣又可以減小10K左右。
另外，規(guī)范css也是一個減肥的好辦法，不要將css樣式寫在HTML元素中，HTML中只想要設(shè)置class，然后我們統(tǒng)一在頁面的Head或者css文件中寫css即可。
從一個1M大小的HTML文件，經(jīng)過我們這樣減肥，能夠減小到250K左右，只有原來的四分之一，相當驚人的成功！這里最重要的就是在Repeater中的大量沒用的空格，這個是VS自動添加進去的，所以大家如果需要對頁面進行減肥的時候也需要注意。
總結(jié)
以上是生活随笔為你收集整理的Web页面减肥，慎用VS的自动格式化功能！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用Ethereal的过滤器解释
- 下一篇： 随便歇歇