UpdatePanel Slowness trong IE

Question

Tôi đang làm việc trên một ứng dụng ASP.Net và làm việc để thêm một số Ajax vào nó để tăng tốc độ các khu vực nhất định. Khu vực đầu tiên mà tôi đang tập trung là khu vực tham dự để giáo viên báo cáo sự tham gia (và một số dữ liệu khác) về trẻ em. Điều này cần phải được nhanh chóng.

Tôi đã tạo thiết lập kiểm soát kép nơi người dùng nhấp vào biểu tượng và thông qua Javascript và Jquery tôi bật lên điều khiển thứ hai. Sau đó, tôi sử dụng __doPostBack() để làm mới điều khiển bật lên để tải tất cả dữ liệu có liên quan.

Dưới đây là một đoạn video nhỏ để hiển thị cách hoạt động: http://www.screencast.com/users/cyberjared/folders/Jing/media/32ef7c22-fe82-4b60-a74a-9a37ab625f1f (: 21 và bỏ qua nền âm thanh).

Tốc độ chậm hơn so với 2-3 giây trong Firefox và Chrome cho mỗi lần "bật lên", nhưng hoàn toàn không hoạt động trong IE, mất 7-8 giây mỗi lần bật lên và tải. Và điều đó sẽ bỏ qua bất kỳ lúc nào cần thiết để lưu dữ liệu sau khi dữ liệu được thay đổi.

Đây là javascript để xử lý các cửa sổ pop-up:

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 + @"',''); 
    } 
}} 

Trước tiên, tôi không hiểu tại sao các __doPostBack() giới thiệu như một sự chậm trễ trong IE. Nếu tôi thực hiện điều đó và prm.add_endRequest, nó rất nhanh khi không có postback nào xảy ra.

Thứ hai, tôi cần một cách để bật lên kiểm soát này và làm mới dữ liệu để dữ liệu vẫn tương tác. Tôi không kết hôn với một UpdatePanel, nhưng tôi đã không thể tìm ra cách để làm điều đó với một dịch vụ Web/phương pháp trang tĩnh. Như bạn có thể thấy điều khiển này được tải nhiều lần trên cùng một trang để kích thước trang và tốc độ tải xuống là một vấn đề.

Tôi đánh giá cao bất kỳ ý tưởng nào?

Chỉnh sửa: Cũng giống như trong IE 6 hoặc 7. Tôi nghĩ rằng nó phải liên quan đến việc xử lý của UpdatePanel của IE, vì cùng một mã nhanh hơn nhiều trong FF và Chrome.

Answer 1

Nếu tốc độ/hiệu suất là một mối quan tâm lớn cho bạn, tôi sẽ đề nghị mạnh mẽ chống lại UpdatePanels, vì chúng gây ra một postback toàn trang kéo ViewState trong header, trong số các crap khác, và buộc trang phải trải qua toàn bộ vòng đời (mặc dù người dùng không thấy điều này).

Bạn sẽ có thể (tương đối dễ dàng) sử dụng PageMethods để hoàn thành nhiệm vụ của mình.

// 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); 

Answer 2

Để tìm hiểu lý do tại sao nó được dùng để lâu tôi sẽ khuyên bạn sử dụng Fiddler để do thám giao thông IE của bạn: http://www.fiddlertool.com/fiddler/

Bạn sẽ được nhìn vào phản ứng của mỗi người trong số các thông điệp để xem làm thế nào lớn họ đang có. Nếu các tin nhắn là> 5kb hoặc như vậy thì UpdatePanel đang quá nhợt nhạt.

Nghe có vẻ như một điều khá đơn giản mà bạn đang cố gắng làm như vậy Tôi đang gặp khó khăn khi tin rằng bảng cập nhật sẽ đổ lỗi. Thử nghiệm nó không phải là quá khó khăn mặc dù. Cách dễ nhất để kiểm tra điều này mà không cần UpdatePanel là sử dụng PageMethod. Trang này có hướng dẫn tuyệt vời về nó: http://weblogs.asp.net/sohailsayed/archive/2008/02/23/calling-methods-in-a-codebehind-function-pagemethods-from-client-side-using-ajax-net.aspx

Bạn cũng có thể đăng mã UpdatePanel để chúng tôi có thể biết thêm chi tiết không?

EDIT: Cảm ơn!

Bạn đang sử dụng phiên bản IE nào?

Answer 3

Dưới đây là đoạn code cho điều khiển cửa sổ pop up (chỉ có một trong số này trên các trang đó được chia sẻ bởi tất cả các điều khiển chứa các biểu tượng):

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

Answer 4

Làm việc với các yêu cầu DOM và HTTP là vốn đã chậm , đó là trình duyệt. Cách tốt nhất để tăng tốc là giảm số lần có yêu cầu HTTP (AJAX hoặc cách khác) và giảm số lượng hành động DOM, tìm kiếm, chỉnh sửa, thay thế, v.v.

Answer 5

Nhận thấy trong một dự án trước rằng IE trở nên chậm chạp khi chúng tôi có heaps (150+) hộp văn bản trên một trang, sau khi kiểm tra với fiddler, chúng tôi đã biết đó là công cụ hiển thị chậm.

(btw, trước khi tất cả các bạn hét, những 150 textbox là một yêu cầu khách hàng rõ ràng, chúng tôi về cơ bản tái tạo tùy chỉnh excel trên web)

Answer 6

Tôi khuyên bạn nên làm theo dõi perforamnce với link text. Đây là công cụ miễn phí để phân tích hiệu suất AJAX trong Internet Explorer

Answer 7

Vấn đề đã biết của nó chỉ với IE, xem KB 2000262. Có thể tìm thấy giải pháp sửa lỗi/sửa lỗi here. Tôi đã làm việc với họ trên kịch bản và một sự xấu hổ họ không thể đưa ra một sửa chữa thực sự.