UpdatePanel IE中的緩慢

我正在研究一個ASP.Net應用程序，並正在努力爲其添加一些Ajax以加速某些區域。我關注的第一個領域是教師報告出席（和其他數據）關於孩子們的出席區。這需要很快。UpdatePanel IE中的緩慢

我創建了一個雙控制設置，用戶點擊圖標並通過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中相同的代碼更快。

來源

2008-11-05 Jared

如果速度/性能是你主要關心的問題，我會強烈建議針對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);

來源

2008-11-11 17:48:53 Kon

切換到使用jquery和PageMethod，它現在在所有瀏覽器中閃電般快速，所以它是UpdatePanel和IE – Jared 2008-11-24 17:27:58

在某些情況下使用webmethods比更新面板eghu-視圖狀態有重量，我們並不需要一次又一次地在標題中發送viewstate。 – 2011-12-06 10:55:58

要找出爲什麼要花這麼久，我會建議使用招來窺探你的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？

來源

2008-11-05 23:37:48

下面是彈出控件的代碼（只有其中一個有可以被所有包含圖標的控制的共享頁面上）：

<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>

來源

2008-11-05 23:48:17 Jared

與DOM和HTTP請求的工作本質上是較慢，它是瀏覽器。加速它的最好方法是減少發生HTTP請求（AJAX或其他）的次數，並減少DOM操作的數量，搜索，編輯，替換等。

來源

2008-11-10 06:07:15 Malfist