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 条评论
登录 后参与评论

相关文章

来自专栏撸码那些事

ASP.NET三剑客 HttpApplication HttpModule HttpHandler 解析

我们都知道,ASP.Net运行时环境中处理请求是通过一系列对象来完成的,包含HttpApplication,HttpModule, HttpHandler。之所...

4069
来自专栏.NET后端开发

ADO.NET入门教程(四) 品味Connection对象

摘要 前几篇文章,我都没有详细讲解Data Provider核心对象,因为我希望在讲解这些对象之前,让大家对一些基础的概念有很好的认识。在上一篇文章《你必须知道...

3366
来自专栏GreenLeaves

模块和处理程序之通过HttpModule和HttpHandler拦截入站HTTP请求执行指定托管代码模块

1、简介 大多数情况下,作为一个asp.net web开发对整个web应用程序的控制是十分有限的,我们的控制往往只能做到对应用程序(高层面)的基本控制。但是,很...

18510
来自专栏Google Dart

Dart服务器端 shelf包 原

handler是处理shelf.Request并返回shelf.Response的任何函数。它可以处理请求本身 - 例如,在文件系统上查找请求的URI的静态文件...

621
来自专栏大内老A

我的WCF之旅(2):Endpoint Overview

WCF实际上是构建了一个框架,这个框架实现了在互联系统中各个Application之间如何通信。使得Developers和Architect在构建分布式系统中,...

1727
来自专栏葡萄城控件技术团队

.Net WinForm 控件键盘消息处理剖析

在WinForm控件上我们可以看到很多关于键盘消息处理的方法,比如OnKeyDown, OnKeyPress, ProcessCmdKey, ProcessDi...

18210
来自专栏熊二哥

快速入门系列--CLR--01基本概念

在.NET平台用C#这么久,自然会发现其版本很多,相应的概念也会很多,常常都是萌萌哒。而在实际工作中经常会遇到需要配置dll版本号,公钥token等场景,因而对...

1656
来自专栏大内老A

了解ASP.NET MVC几种ActionResult的本质:HttpStatusCodeResult & RedirectResult/RedirectToRouteResult

在本系列的最后一篇,我们来讨论最后三个ActionResult:HttpStatusCodeResult、RedirectResult和RedirectToRo...

19210
来自专栏非著名程序员

Android:全面解析熟悉而陌生 的 Application 类使用

前言 Applicaiton类在 Android开发中非常常见,可是你真的了解Applicaiton类吗? 本文将全面解析Applicaiton类,包括特点、方...

1825
来自专栏androidBlog

butterknife 源码分析

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

601

扫描关注云+社区