zoukankan      html  css  js  c++  java
  • ASP.NET AJAX(15)__构建高性能ASP.NET AJAX应用

    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
    • 压缩
    • 并行加载资源
    • ……
  • 相关阅读:
    合并两个有序数组
    删除排序数组中的重复项 II
    对称二叉树
    相同的树
    二叉树的最大深度
    从前序与中序遍历序列构造二叉树
    vue简单案例_动态添加删除用户数据
    对vue的初步学习(一)
    关于java for循环常见练习题
    关于java中循环的学习
  • 原文地址:https://www.cnblogs.com/xiaoyaojian/p/2225480.html
Copyright © 2011-2022 走看看