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自动添加进去的,所以大家如果需要对页面进行减肥的时候也需要注意。

目录
相关文章
|
1月前
|
JavaScript Java 微服务
现代化 Java Web 在线商城项目技术方案与实战开发流程及核心功能实现详解
本项目基于Spring Boot 3与Vue 3构建现代化在线商城系统,采用微服务架构,整合Spring Cloud、Redis、MySQL等技术,涵盖用户认证、商品管理、购物车功能,并支持Docker容器化部署与Kubernetes编排。提供完整CI/CD流程,助力高效开发与扩展。
312 63
|
1月前
|
运维 数据可视化 C++
2025 热门的 Web 化容器部署工具对比:Portainer VS Websoft9
2025年热门Web化容器部署工具对比:Portainer与Websoft9。Portainer以轻量可视化管理见长,适合技术团队运维;Websoft9则提供一站式应用部署与容器管理,内置丰富开源模板,降低中小企业部署门槛。两者各有优势,助力企业提升容器化效率。
190 1
2025 热门的 Web 化容器部署工具对比:Portainer VS Websoft9
|
4月前
|
开发者
(WEB CAD online )在线CAD实现圆孔标记功能
本文介绍了通过自定义实体 `McDbTestRoundHoleMark` 实现圆孔标记功能的方法。该功能支持多象限标记、可调节标记角度、多重标记及动态编辑,并自动计算包围盒以优化空间定位与选择操作。核心实现包括类结构定义、数据序列化、标记数据设置、夹点编辑及实体绘制等步骤。用户可通过插件初始化注册并创建圆孔标记,适用于工程图纸标注场景。在线Demo展示了实际效果,便于开发者参考与使用。
|
5月前
|
JSON 人工智能 前端开发
用markdown语法制作一个好看的网址导航页面(markdown-web-nav)
这是一篇关于创建网址导航页面的工具分享文章。作者介绍了从手动编写HTML代码到开发可视化工具 *markdown-web-nav* 的历程,旨在简化网址管理与导航页面生成的过程。该工具支持新增、编辑和删除网址数据,通过导入/导出JSON文件、实时预览Markdown效果以及一键复制等功能,让用户轻松制作美观的网站导航页面。文章还提供了详细的操作步骤及常见问题解答,如还原数据、获取网站图标链接等,适合不同技术水平的用户使用。
254 28
|
5月前
|
移动开发 前端开发 JavaScript
H5 页面与 Web 页面的制作方法
H5页面制作利用HTML5、CSS3和JavaScript技术,结合H5编辑器或框架(如Adobe Dreamweaver、Ionic),注重移动设备兼容性与响应式布局。Web页面制作则基于传统HTML、CSS和JavaScript,借助文本编辑器或IDE完成开发。两者区别在于技术版本、交互性和浏览器支持:H5更互动、现代,但可能不兼容旧浏览器;Web页面更静态、兼容性广。根据需求选择:高交互选H5,广泛兼容选Web。
777 6
|
11月前
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
156 4
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
193 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
10月前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
Python Web框架比较:Django vs Flask vs Pyramid
160 1
|
11月前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
Python Web框架比较:Django vs Flask vs Pyramid
188 4
|
11月前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
【10月更文挑战第6天】本文比较了Python中三个最受欢迎的Web框架:Django、Flask和Pyramid。Django功能全面,适合快速开发;Flask灵活轻量,易于上手;Pyramid介于两者之间,兼顾灵活性和可扩展性。文章分析了各框架的优缺点,帮助开发者根据项目需求和个人偏好做出合适的选择。
249 4