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

简介:

最近在做一个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 >  
< 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中的定义:

 

< 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 >  
        
< 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页面上选择需要格式化的代码,然后右键选择“设置选定内容的格式”即可,如图:

image

这里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   %>& 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  class ="bbs_banner"  style ="text-align: right; padding-right: 10px" > #34 &nbsp;  发表于: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 >

除了这一点以外,我们还可以进一步对该页面进行减肥。比如禁用页面的视图状态,禁用后页面大小从350K进一步减小到278K,如果完全为了减肥的需要,我们可以将整个HTML中的空格去掉,不仅仅是去掉Repeater中的,这样又可以减小10K左右。

另外,规范css也是一个减肥的好办法,不要将css样式写在HTML元素中,HTML中只想要设置class,然后我们统一在页面的Head或者css文件中写css即可。

从一个1M大小的HTML文件,经过我们这样减肥,能够减小到250K左右,只有原来的四分之一,相当惊人的成功!这里最重要的就是在Repeater中的大量没用的空格,这个是VS自动添加进去的,所以大家如果需要对页面进行减肥的时候也需要注意。

本文转自深蓝居博客园博客,原文链接:http://www.cnblogs.com/studyzy/archive/2009/04/22/1441234.html,如需转载请自行联系原作者

相关文章
|
4月前
webstorm【实用教程】代码自动格式,格式化时清除空行,修改使用代码模板
webstorm【实用教程】代码自动格式,格式化时清除空行,修改使用代码模板
420 2
|
6月前
|
数据建模 Linux Android开发
Mstar 9632方案调试杂项临时笔记
Mstar 9632方案调试杂项临时笔记
260 0
|
数据安全/隐私保护
搞个脚本—自动赚猿分(脱壳篇)
搞个脚本—自动赚猿分(脱壳篇)
|
安全 jenkins 测试技术
Jenkins配置测试报告后无法正常显示或显示空白 的解决方法(问题集锦)
Jenkins配置测试报告后无法正常显示或显示空白 的解决方法(问题集锦)
461 0
|
前端开发 JavaScript 编译器
2023年了,来试试前端格式化工具
eslint 使用eslint的生态链来规范开发者对js/ts基本语法的规范。防止团队的成员乱写. 这里主要使用到的eslint的包有以下几个: 使用的以下语句来按照依赖: 接下来需要对eslint的
|
存储 JSON 前端开发
只需百来行代码,为你的Web页面增加本地文件操作能力,确定不试试吗?
笔者开源了一个`Web`思维导图[mind-map](https://github.com/wanglin2/mind-map),数据默认是存储在`localstorage`里,如果想保存到本地文件,需要使用导出功能,下次打开再使用导入功能,编辑完如果又想保存到文件,那么又需要从重新导出覆盖原来的文件,不得不说,可以但不优雅,所以最近增加了直接编辑本地文件的能力,体验了一下,还是不错的,并且就是调调`API`的事情,很简单,何乐而不为。
233 0
文本操作三剑客之grep,再也不担心分析日志了
文本操作三剑客之grep,再也不担心分析日志了
123 0
|
自然语言处理 Unix Linux
最快捷的Linux命令查询工具来了:「我该怎么做XX」,一句话自动返回操作指南
云栖号资讯:【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 无论你是Linux萌新用户还是老司机,使用命令行总会遇到不懂的问题。 遇到问题要么去论坛询问、谷歌搜索,要么查自带命令手册(RTFM),过程耗时,结果也不直观。
最快捷的Linux命令查询工具来了:「我该怎么做XX」,一句话自动返回操作指南
下一篇
无影云桌面