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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大内老A

ASP.NET Core应用的错误处理[4]:StatusCodePagesMiddleware中间件如何针对响应码呈现错误页面

StatusCodePagesMiddleware中间件与ExceptionHandlerMiddleware中间件比较类似,它们都是在后续请求处理过程中“出错...

51050
来自专栏跟着阿笨一起玩NET

ASP.NET用HttpListener实现文件断点续传

本文转载:http://www.cnblogs.com/TianFang/archive/2007/01/03/610739.html

13610
来自专栏领域驱动设计DDD实战进阶

微服务实战(七):落地微服务架构到直销系统(实现命令与命令处理器)

我们先来看看CQRS架构,你对下图的架构还有印象吗?每个组件的功能都还清楚吗?如果有疑问,请查考文章《微服务实战(五):落地微服务架构到直销系统(构建高性能大并...

20930
来自专栏calvin

.net core 源码解析-web app是如何启动并接收处理请求

最近.net core 1.1也发布了,蹒跚学步的小孩又长高了一些,园子里大家也都非常积极的在学习,闲来无事,扒拔源码,涨涨见识。

16110
来自专栏大内老A

如何实现对上下文(Context)数据的统一管理 [提供源代码下载]

在应用开发中,我们经常需要设置一些上下文(Context)信息,这些上下文信息一般基于当前的会话(Session),比如当前登录用户的个人信息;或者基于当前方法...

52160
来自专栏魏琼东

分享一个分布式消息总线,基于.NET Socket Tcp的发布-订阅框架,附代码下载

一、分布式消息总线      在很多MIS项目之中都有这样的需求,需要一个及时、高效的的通知机制,即比如当使用者A完成了任务X,就需要立即告知使用者B任务X已经...

42170
来自专栏魏琼东

分享一个分布式消息总线,基于.NET Socket Tcp的发布-订阅框架,附代码下载

     在很多MIS项目之中都有这样的需求,需要一个及时、高效的的通知机制,即比如当使用者A完成了任务X,就需要立即告知使用者B任务X已经完成,在通常的情况下...

46100
来自专栏逸鹏说道

Python3 与 C# 并发编程之~ 上篇

其实逆天现在Coding已经是80%变成Python了,20%才是Net,也不确定是否一直在Net界干下去,所以只能尽可能的在说新知识的同时,尽量把脑子里面Ne...

13740
来自专栏王磊的博客

Asp.net中Js、Css文件压缩辅助类

类名:WebCompressUtility.cs 代码如下: /// <summary> /// Js、Css文件压缩辅助类 /// Stone_W /// 2...

36770
来自专栏大内老A

WCF技术剖析之四:基于IIS的WCF服务寄宿(Hosting)实现揭秘

通过《再谈IIS与ASP.NET管道》的介绍,相信读者已经对IIS和ASP.NET的请求处理管道有了一个大致的了解,在此基础上去理解基于IIS服务寄宿的实现机制...

22790

扫码关注云+社区

领取腾讯云代金券