IE中的UpdatePanel缓慢

Question

我正在开发一个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中相同的代码要快得多.

Answer 1

如果速度/性能是您的主要关注点,我强烈建议不要使用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);