ASP.NET AJAX(15)__构建高性能ASP.NET AJAX应用UpdatePanel的性能问题使用UpdatePanel的注意事项脚本加载避免脚本阻塞页面显示AjaxControlTool

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
压缩
并行加载资源
……