Web页面减肥,慎用VS的自动格式化功能!
最近在做一个OA项目,其中有块协同的功能,类似于BBS,具体需求是什么样的我就不细讲了,我们这里就认为是一个BBS吧。一个帖子会有多个回帖,在帖子的展示页面上将帖子和所有回帖一起展示出来。当一个帖子的回复数达到上百时打开帖子就会特别慢,而且CPU和内存也会占用很高。打开页面的HTML源文件,可以看到有些回复数很高的帖子的页面大小也十分巨大,可能一个HTML页面就有1M大小。对于企业内部用户来说,1M其实也没有什么,毕竟是在局域网中,几秒钟就可以下载完成打开了,但是对于外网用户来说这就比较痛苦了。所以需要对这个页面进行减肥,将页面大小降下来。
首页来分析一下这个帖子的展示页面,上面是帖子的相关信息和帖子内容,都是一些Table元素和Label控件,下面是回复列表,每个回复里面可能会有附件,所以我们使用Repeater控件来做回复列表,一个回复中可能有多个附件,所以是在Repeater中嵌套绑定Repeater。使用Repeater而没有使用DataGrid或者DataList就是为了防止产生垃圾代码,所以其中产生垃圾代码是比较少的。但是为什么页面会那么大呢?分析HTML,可以看到生成的HTML还比较漂亮,层次缩进分明。
但是偏偏就是这个层次缩进分明造成了如此大的页面。我取出其中的一个回复的HTML如下:
<td class="bbs_banner" style="text-align: right; padding-right: 10px">
#19 发表于: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中的定义:
<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中的代码进行减肥,去掉这些没有用的空格。这样下来,我们的代码被精简为:
<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:
<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自动添加进去的,所以大家如果需要对页面进行减肥的时候也需要注意。
Web页面减肥,慎用VS的自动格式化功能!相关推荐
- vscode中如何修改vetur配置_vscode 配置vue+vetur+eslint+prettier自动格式化功能
该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和 ...
- web 页面长时间未操作自动退出方法(自动退出登录)
web 页面自动超时自动退出方法 思路: 使用 mouseover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出: 具体时间代码如下(js): var ...
- php 设置输出字体,利用PHP的输出信息控制功能实现Web页面简繁字体的自动转换...
! " #$% & ' "! () * $% +,,-./ 实践与经验 现代计算机︵总第二 " 七期︶ 引 言 目前,许多网站同时需要简体和繁体字版面的012 页 ...
- .NET1.1中预编译ASP.NET页面实现原理浅析[1]自动预编译机制浅析
.NET1.1中预编译ASP.NET页面实现原理浅析[1]自动预编译机制浅析 .NET1.1中预编译ASP.NET页面实现原理浅析[1]自动预编译机制浅析 作者:&;nbsp来自:网络 htt ...
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送
在做一个微信的微网站中的一个 便民服务电话功能的应用 ,用到 移动web页面 中列出的 电话号码 ,点击需要实现调用通讯录, 网页一键拨号的拨打电话功能 . 如果需要在移动浏览器中实现拨打电话,发送e ...
- eclipse常用设置之自动格式化
Eclipse 保存文件时自动格式化代码 很多同学不知道Eclipse有个很有用的功能,就是自动格式源代码的功能,一般大家都是直接Ctrl+Shift+F手动格式化,多浪费时间. 其实Eclipse里 ...
- python代码自动格式化_代码的自动格式化
代码格式化是一个在软件开发过程中值得一提的话题. 所谓代码格式化就是说,程序员在书写代码的过程中或者完成代码开发后对代码书写格式排版的调整,使得已经完成的代码变的更美观整洁也更具有可读性,也能增加完成 ...
- iOS实现经典登录页面,手机号自动格式化
iOS实现经典登录页面,手机号自动格式化 核心 #define RGB(r,g,b) [UIColor colorWithRed:(r)/255.0f green:(g)/255.0f blue:(b ...
最新文章
- VNF 的性能测试设计要点
- 状态图和活动图的区别
- opencv 人脸检测
- 专业对不对口重要吗_应届生求职,专业对口到底重不重要?
- HttpInterceptor 拦截器 - 网络请求超时与重试的简单实现
- 使用Excel4J获取Excel文件中的数据
- @async 报错_async异步操作函数
- 2018湘潭大学程序设计竞赛【E】
- 学会这几点,你会成为一名月薪过万的Java程序员
- Tensorflow中axis的理解
- 按月统计的sql语句
- YOLOv5剪枝 | 模型剪枝理论篇
- iOS设备截图和Windows电脑互传,解决提交bug无图不能说明问题
- ZDNS联合发起创建的“粤港大数据图像和通信应用联合实验室”成功获批
- 【STM32】HAL库——定时器溢出中断
- web前端动画_西游记
- CH340N串口模块原理图
- 数字集群对讲系统服务器,图解数字集群对讲机通讯系统
- 亚马逊采摘挑战赛APC:6D姿态估计的多视图自我监督深度学习6D Pose Estimation in the Amazon Picking Challenge—2017(笔记)
- latex法文字母及特殊字母如何显示
热门文章
- 链表反转的两种实现方法
- ABAP 在被访问的程序中获取访问程序的全局变量
- HRBUST 1909——理工门外的树——————【离线处理,差分前缀和】
- resharper警告 :linq replace with single call to FirstOrDefault
- 修改NLS_DATE_FORMAT的四种方式
- (五)数据结构之“链表”
- promise 是什么?有哪些状态和参数?如何使用?
- oracle跨库插入数据,Oracle跨数据库查询并插入实现原理及代码
- java基础格式_Java基础之代码的基本格式
- 激活层是每一层都有吗_89小户型复式这样装,每一层都设计得很棒,完工后秒变小区样板间,邻居前来取经...