代码之家 › 专栏 › 技术社区 › Jared

IE中更新面板速度慢

updatepanel performance asp.net jquery c#

Jared · 技术社区 · 17 年前

我正在做一个ASP。Net应用程序,并努力向其中添加一些Ajax来加速某些领域。我关注的第一个领域是教师报告孩子出勤情况(和其他一些数据)的出勤区域。这需要很快。

我创建了一个双控件设置,用户点击图标,通过Javascript和Jquery弹出第二个控件。然后,我使用__doPostBack()刷新弹出控件以加载所有相关数据。

这里有一个小视频片段来展示它是如何工作的: http://www.screencast.com/users/cyberjared/folders/Jing/media/32ef7c22-fe82-4b60-a74a-9a37ab625f1f (:21,忽略音频背景)。

在Firefox和Chrome中,每次“弹出”都需要2-3秒,这比我想要的要慢,但在IE中完全不可行,每次弹出和加载都需要7-8秒。这忽略了更改数据后保存数据所需的任何时间。

这是处理弹出窗口的javascript:

function showAttendMenu(callingControl, guid) {
var myPnl = $get('" + this.MyPnl.ClientID + @"')
if(myPnl) {
    var displayIDFld = $get('" + this.AttendanceFld.ClientID + @"');
    var myStyle = myPnl.style;
    if(myStyle.display == 'block' && (guid== '' || guid == displayIDFld.value)) {
        myStyle.display = 'none';
    } else {
        // Get a reference to the PageRequestManager.
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        // Unblock the form when a partial postback ends.
        prm.add_endRequest(function() {
            $('#" + this.MyPnl.ClientID + @"').unblock({ fadeOut: 0});
        });

        var domEl = Sys.UI.DomElement;
        //Move it into position
        var loc = domEl.getLocation(callingControl);
        var width = domEl.getBounds(callingControl).width;
        domEl.setLocation(myPnl, loc.x + width, loc.y - 200);

        //Show it and block it until we finish loading the data
        myStyle.display = 'block';
        $('#" + this.MyPnl.ClientID + @"').block({ message: null, overlayCSS: { backgroundColor:'#fff', opacity: '0.7'} }); 

        //Load the data
        if(guid != '') { displayIDFld.value = guid; } 
        __doPostBack('" + UpdatePanel1.ClientID + @"','');
    }
}}

首先,我不明白为什么__doPostBack()在IE中引入了这样的延迟。如果我去掉它和prm.add_endRequest,它会非常快,因为不会发生回发。

其次,我需要一种方法来弹出此控件并刷新数据,使其仍然具有交互性。我没有与UpdatePanel结婚,但我还没有弄清楚如何使用Web服务/静态页面方法来实现这一点。如您所见,此控件在同一页面上加载了多次,因此页面大小和下载速度是一个问题。

有什么想法吗?

编辑:在IE 6或7中也是一样。我认为这与IE对UpdatePanel的处理有关,因为相同的代码在FF和Chrome中要快得多。

7 回复 | 直到 17 年前

Kon 17 年前

如果速度/性能对你来说是一个主要问题,我强烈建议不要使用UpdatePanels,因为它们会导致整个页面回发,在头部拖动ViewState等垃圾,并迫使页面每次都经历整个生命周期(即使用户没有看到这一点)。

您应该能够(相对容易地)使用PageMethods来完成任务。

// In your aspx.cs define the server-side method marked with the 
// WebMethod attribute and it must be public static.
[WebMethod]
public static string HelloWorld(string name)
{
  return "Hello World - by " + name;
}

// Call the method via javascript
PageMethods.HelloWorld("Jimmy", callbackMethod, failMethod);

rick schott 15 年前

这只是IE的一个已知问题,请参阅 KB 2000262 。可以找到解决方法/修复程序 here 。我和他们一起写剧本,很遗憾他们不能提出真正的解决方案。

AndreasKnudsen 17 年前

在之前的一个项目中注意到,当我们在一个页面上有堆(150多个)文本框时,IE变得非常慢,在与fiddler核实后,我们认为是渲染引擎慢了。

(顺便说一句,在大家大喊大叫之前,150多个文本框是客户明确的要求,我们基本上是在网上重新创建了定制的excel)

Jared 17 年前

这是弹出控件的代码(页面上只有一个控件与包含图标的所有控件共享):

<script type="text/javascript" src="<%=Response.ApplyAppPathModifier("~/js/jquery-1.2.6.js") %>"></script>
<script type="text/javascript" src="<%=Response.ApplyAppPathModifier("~/js/jquery.blockUI.js") %>"></script>
<asp:Panel CssClass="PopOutBox noPrint" ID="MyPnl" style="display: none; z-index:1000; width:230px; position: absolute;" runat="server">
    <cmp:Image MyImageType="SmallCancel" CssClass="fright" runat="server" ID="CloseImg" AlternateText="Close" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

        <ContentTemplate>
            <asp:HiddenField ID="AttendanceFld" runat="server"  />
            <asp:HiddenField ID="DatePickerFld" runat="server"  />
            <table width="100%">
                <tr>
                    <td valign="top">
                        <asp:RadioButtonList EnableViewState="false" ID="AttendRBL" runat="server" RepeatDirection="Vertical">
                            <asp:ListItem Selected="True" Text="On Time" Value="" />
                            <asp:ListItem Text="Late" Value="Late" />
                            <asp:ListItem Text="Absent" Value="Absent" />
                            <asp:ListItem Text="Cleaning Flunk" Value="Other" title="This is used for things like cubby flunks" />
                            <asp:ListItem Text="Major Cleaning Flunk" Value="Major" title="This is used for things like White Glove flunks" />
                        </asp:RadioButtonList>
                    </td>
                    <td valign="top" style="text-align: center; vertical-align: middle;">
                        <asp:CheckBox EnableViewState="false" ID="ExcusedCB" runat="server" />
                        <br />
                        <asp:Label ID="Label1" EnableViewState="false" AssociatedControlID="ExcusedCB" Text="Excused"
                            runat="server" />
                    </td>
                </tr>

                <tr>
                    <td colspan="2">
                        <asp:Label EnableViewState="false" ID="Label2" Text="Notes" runat="server" AssociatedControlID="DataTB" />
                        <cmp:HelpPopUp EnableViewState="false" runat="server" Text='Must include "Out Sick" to be counted as ill on reports and progress reports' />
                        <br />
                        <asp:TextBox ID="DataTB" EnableViewState="false" runat="server" Columns="30" /><br />
                        <div style="font-size: 10px; text-align:center;">
                            <a href="#" onclick="setAttendVal('<%=this.DataTB.ClientID%>','Out Sick');return false;">
                                (Ill)</a> <a href="#" onclick="setAttendVal('<%=this.DataTB.ClientID%>','In Ethics');return false;">
                                    (Ethics)</a> <a href="#" onclick="setAttendVal('<%=this.DataTB.ClientID %>','Warned');return false;">
                                        (Warned)</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <cmp:ImageButton ID="DeleteBtn" OnClientClick="showAttendMenu(this,'');" OnClick="DeleteAttendance" ButtonType="SmallDelete"
                            CssClass="fright" runat="server" />
                        <cmp:ImageButton ID="SaveBtn" OnClientClick="showAttendMenu(this,'');" OnClick="SaveAttendance" ButtonType="SmallSave" runat="server" />
                    </td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>

Justin Bozonier 17 年前

要了解为什么需要这么长时间,我建议使用Fiddler来监视你的IE流量: http://www.fiddlertool.com/fiddler/

您将查看每条消息的响应,以了解它们有多大。如果消息>5kb左右,那么UpdatePanel太胖了。

这听起来像是你试图做的一件相当简单的事情,所以我很难相信更新面板是罪魁祸首。不过,测试它应该不会太难。在没有UpdatePanel的情况下测试它的最简单方法是使用PageMethod。这个页面有一个很棒的教程: http://weblogs.asp.net/sohailsayed/archive/2008/02/23/calling-methods-in-a-codebehind-function-pagemethods-from-client-side-using-ajax-net.aspx

您能否也发布您的UpdatePanel代码,以便我们获得更多详细信息?

编辑:谢谢!

你使用的是哪个版本的IE?

Malfist 17 年前

使用DOM和HTTP请求本身就很慢,这是浏览器的问题。加速它的最佳方法是减少HTTP请求(AJAX或其他方式)的次数,并减少DOM操作、搜索、编辑、替换等的数量。

Alois Reitbauer 16 年前

我建议使用以下工具进行性能跟踪 link text 。它是Internet Explorer中AJAX性能分析的免费工具