UpdatePanel的性能问题
在UpdatePanle使用的时候,它每次的更新都是将整个页面回送的,而且也会加上一些他更新的标记,所以往往它传递的数据量比传统的PostBack都要多,这其实是违背AJAX减少数据量传输的特点的
使用UpdatePanel的注意事项
在使用UpdatePanel的时候,要只传输必要的内容,使用相对小而细的UpdatePanel,而不是使用大而全的UpdatePanel,在每次PostBack后只需要更新必要的UpdatePanel(将UpdatePanel的UpdateMode设置为Conditional,在需要更新的UpdatePanel的时候,调用Update方法),或者使用Incrementtal Content Pattern,这个我在前面一篇专讲UpdatePanel的一篇中写过,然后在获取数据的时候,只获取必要的数据
一个关于UpdatePanel性能的示例
创建一个aspx页面
前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdatePanel.aspx.cs" Inherits="Demo30_UpdatePanel" EnableViewState="false" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="up1" runat="server"> <ContentTemplate> <%= DateTime.Now-this.m_start %> </ContentTemplate> </asp:UpdatePanel> <hr /> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <%# Container.DataItem %> </ItemTemplate> <SeparatorTemplate> <br /> </SeparatorTemplate> <FooterTemplate> <hr /> </FooterTemplate> </asp:Repeater> <asp:Button ID="Button1" runat="server" Text="Refresh" onclick="Button1_Click" /> </ContentTemplate> </asp:UpdatePanel> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Repeater ID="Repeater2" runat="server"> <ItemTemplate> <%# Container.DataItem %> </ItemTemplate> <SeparatorTemplate> <br /> </SeparatorTemplate> <FooterTemplate> <hr /> </FooterTemplate> </asp:Repeater> <asp:Button ID="Button2" runat="server" Text="Refresh" onclick="Button2_Click" /> </ContentTemplate> </asp:UpdatePanel> </form> </body> </html>
后台代码
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Threading; public partial class Demo14_UpdatePanel : System.Web.UI.Page { protected DateTime m_start; private Random m_random = new Random(DateTime.Now.Millisecond); protected void Page_Load(object sender, EventArgs e) { this.m_start = DateTime.Now; if (!IsPostBack) { this.Repeater1.DataSource = this.GetData(); this.Repeater1.DataBind(); this.Repeater2.DataSource = this.GetData(); this.Repeater2.DataBind(); } } private IEnumerable<int> GetData() { Thread.Sleep(1000); for (int i = 0; i < 5; i++) { yield return this.m_random.Next(100); } } protected void Button1_Click(object sender, EventArgs e) { this.Repeater1.DataSource = this.GetData(); this.Repeater1.DataBind(); } protected void Button2_Click(object sender, EventArgs e) { this.Repeater2.DataSource = this.GetData(); this.Repeater2.DataBind(); } }
我们打开网页,会发现页面第一次加载,使用了两秒多的事件,因为他调用了两次的GetData方法,我们设置了页面的UpdatePanel的UpdateMode为Conditional,所以,在我们每次点击按钮的时候,只会更新包含它的Update,这样我们点击按钮,就只会调用一次GetData方法,而且我们把UpdateMode设置为Always(默认),从每次发回给客户端的数据量来看,也会大了很多
脚本加载
- 在发布时一定要把ScriptMode设置为Release,因为Debug模式下加载的脚本,很多是有格式和注释的代码,体积会比在Release模式下加载的脚本大很多,因为Release模式下的脚本都是没有注释和格式,并且经过混淆的
- 如果不使用UpdatePanel,则一定要把EnablePartialRendering设置为false,这样将不回引入支持UpdatePanel的MicrosoftAJAXWebForms.js文件(不小呢)
避免脚本阻塞页面显示
- 当浏览器遇到<script>这个标记的时候,将会停止下载资源和显示内容
- 为了提高性能,将不会立即使用的脚本放置在页面代码末尾
- 将LoadScriptsBeforeUI设置为false(设置时候,注意代码时候会在加载的时候,是否会被用户调用)
AjaxControlToolkit性能提高
- AjaxControlToolkit的控件会引入大量的脚本
- 在产品环境中一定要使用Release模式的脚本,可以在它的压缩包中找到,或者使用将源代码里的脚本使用内置的JavascriptCommentStripper进行压缩,因为他的Debugger下的脚本体积非常的大
- 使用ToolkitScriptManager进行脚本合并,减少客户端与服务器端连接次数,提高性能
其他
几乎所有能够提高Web应用程序性能的做法都可以提高AJAX应用程序性能
- 合理利用缓存
- 优化数据库
- 合并小图片以较少round-trip
- Keep-Alive
- 压缩
- 并行加载资源
- ……