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

相关文章

来自专栏python学习之旅

Python django框架笔记(三):django工作方式简单说明和创建用户界面

1747
来自专栏极乐技术社区

微信小程序开发详解《三》APP生命周期

1:微信小程序APP的生命周期方法: 在微信小程序工程中的app.js中增加如图所示方法 ? 编译运行,查看日志如图所示:微信小程序启动时,调用生命周期方法为:...

20610
来自专栏网络

突破封闭 Web 系统的技巧之正面冲锋

在互联网安全服务公司乙方工作的人或者进行 SRC 众测等相关渗透测试时,经常碰到客户只给一个 "xxx信息管理系统"、"xxx平台"之类的一个 Web 登录界面...

22810
来自专栏猛牛哥的博客

iptables回流方法

3684
来自专栏QQ音乐技术团队的专栏

分析 Android V2 新签名打包机制

本文实现了一种在 apk 的签名块中写入信息,读取信息,删除信息还原 apk 等功能,验证了在签名块中写入信息可以通过 v2 检验的例子。

1.8K0
来自专栏友弟技术工作室

redis用法分析redis基本介绍PHP操作redis服务器python使用redis总结

redis基本介绍 redis也是一个内存非关系型数据库,它拥有memcache在数据存储上的全部优点,而且在memcache的基础上增加了数据持久性功能,re...

35112
来自专栏吉浦迅科技

DAY63:阅读Execution Environment

我们正带领大家开始阅读英文的《CUDA C Programming Guide》,今天是第63天,我们正在讲解CUDA C语法,希望在接下来的37天里,您可以学...

643
来自专栏猿人谷

使用asp调用.net xml web services

(是不是实际上可以用这个办法调用任何xml web services呢?高人答一下) 最近在做一个web services,由我来写文档。为了方便广大asp用户...

1997
来自专栏java沉淀

Maven、Webx、Velocity学习总结

1223
来自专栏linux驱动个人学习

动态链接

要解决空间浪费和更新困难这两个问题最简单的办法就是把程序的模块相互分割开来,形成独立的文件,而不再将它们静态地链接在一起。简单地讲,就是不对那些组成程序的目标文...

872

扫码关注云+社区