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

发布时间：2020-12-14 23:55:36 所属栏目：资源来源：网络整理

导读：最近在做一个OA项目，其中有块协同的功能，类似于BBS，具体需求是什么样的我就不细讲了，我们这里就认为是一个BBS吧。一个帖子会有多个回帖，在帖子的展示页面上将帖子和所有回帖一起展示出来。当一个帖子的回复数达到上百时打开帖子就会特别慢，而且CPU和内

最近在做一个OA项目，其中有块协同的功能，类似于BBS，具体需求是什么样的我就不细讲了，我们这里就认为是一个BBS吧。一个帖子会有多个回帖，在帖子的展示页面上将帖子和所有回帖一起展示出来。当一个帖子的回复数达到上百时打开帖子就会特别慢，而且CPU和内存也会占用很高。打开页面的HTML源文件，可以看到有些回复数很高的帖子的页面大小也十分巨大，可能一个HTML页面就有1M大小。对于企业内部用户来说，1M其实也没有什么，毕竟是在局域网中，几秒钟就可以下载完成打开了，但是对于外网用户来说这就比较痛苦了。所以需要对这个页面进行减肥，将页面大小降下来。

首页来分析一下这个帖子的展示页面，上面是帖子的相关信息和帖子内容，都是一些Table元素和Label控件，下面是回复列表，每个回复里面可能会有附件，所以我们使用Repeater控件来做回复列表，一个回复中可能有多个附件，所以是在Repeater中嵌套绑定Repeater。使用Repeater而没有使用DataGrid或者DataList就是为了防止产生垃圾代码，所以其中产生垃圾代码是比较少的。但是为什么页面会那么大呢？分析HTML，可以看到生成的HTML还比较漂亮，层次缩进分明。

但是偏偏就是这个层次缩进分明造成了如此大的页面。我取出其中的一个回复的HTML如下：

结构虽然很清晰，但是大家可以看出来，为了HTML的层次，生成的代码前面添加了无数的空格。这些空格是怎么来的，我们看看Repeater中的定义：

&<<

这里可以看到，就是VS为了格式好看，在前面添加了很多的空格，格式化的操作就是在aspx页面上选择需要格式化的代码，然后右键选择“设置选定内容的格式”即可，如图：

这里VS是帮我们添加了一大串的空格，这些空格在Repeater中也会当作需要被重复输出的内容而不断重复输出。在Repeater中的数据量不是很大的时候还不明显，但是在Repeater中绑定上百个元素时，这些空格将会占据大量的空间。

解决办法也很简单，将Repeater中的代码进行减肥，去掉这些没有用的空格。这样下来，我们的代码被精简为：