當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Web页面减肥，慎用VS的自动格式化功能！

發布時間：2023/12/31 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 Web页面减肥，慎用VS的自动格式化功能！小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近在做一個OA項目，其中有塊協同的功能，類似于BBS，具體需求是什么樣的我就不細講了，我們這里就認為是一個BBS吧。一個帖子會有多個回帖，在帖子的展示頁面上將帖子和所有回帖一起展示出來。當一個帖子的回復數達到上百時打開帖子就會特別慢，而且CPU和內存也會占用很高。打開頁面的HTML源文件，可以看到有些回復數很高的帖子的頁面大小也十分巨大，可能一個HTML頁面就有1M大小。對于企業內部用戶來說，1M其實也沒有什么，畢竟是在局域網中，幾秒鐘就可以下載完成打開了，但是對于外網用戶來說這就比較痛苦了。所以需要對這個頁面進行減肥，將頁面大小降下來。

首頁來分析一下這個帖子的展示頁面，上面是帖子的相關信息和帖子內容，都是一些Table元素和Label控件，下面是回復列表，每個回復里面可能會有附件，所以我們使用Repeater控件來做回復列表，一個回復中可能有多個附件，所以是在Repeater中嵌套綁定Repeater。使用Repeater而沒有使用DataGrid或者DataList就是為了防止產生垃圾代碼，所以其中產生垃圾代碼是比較少的。但是為什么頁面會那么大呢？分析HTML，可以看到生成的HTML還比較漂亮，層次縮進分明。

但是偏偏就是這個層次縮進分明造成了如此大的頁面。我取出其中的一個回復的HTML如下：

結構雖然很清晰，但是大家可以看出來，為了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?%> ?發表于：<%#?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中的代碼進行減肥，去掉這些沒有用的空格。這樣下來，我們的代碼被精簡為：

<asp:Repeater?ID="rptFeedbacks"?runat="server">?
<ItemTemplate>?
<tr><td?class="bbs_banner"?style="text-align:?right;?padding-right:?10px">#<%#?((IDataItemContainer)Container).DataItemIndex+1?%> ?發表于：<%#?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：

除了這一點以外，我們還可以進一步對該頁面進行減肥。比如禁用頁面的視圖狀態，禁用后頁面大小從350K進一步減小到278K，如果完全為了減肥的需要，我們可以將整個HTML中的空格去掉，不僅僅是去掉Repeater中的，這樣又可以減小10K左右。

另外，規范css也是一個減肥的好辦法，不要將css樣式寫在HTML元素中，HTML中只想要設置class，然后我們統一在頁面的Head或者css文件中寫css即可。

從一個1M大小的HTML文件，經過我們這樣減肥，能夠減小到250K左右，只有原來的四分之一，相當驚人的成功！這里最重要的就是在Repeater中的大量沒用的空格，這個是VS自動添加進去的，所以大家如果需要對頁面進行減肥的時候也需要注意。

總結

以上是生活随笔為你收集整理的Web页面减肥，慎用VS的自动格式化功能！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。