UpdatePanel Slowness en IE

Question

Estoy trabajando en una aplicación ASP.Net y estoy trabajando para agregarle algo de Ajax para acelerar ciertas áreas. La primera área en la que estoy concentrado es el área de asistencia para que los maestros denuncien la asistencia (y algunos otros datos) sobre los niños. Esto necesita ser rápido.

He creado una configuración de control doble donde el usuario hace clic en el icono y a través de Javascript y Jquery I aparece el segundo control. Luego uso un __doPostBack() para actualizar el control emergente para cargar todos los datos relevantes.

Aquí hay un pequeño fragmento de video para mostrar cómo funciona: http://www.screencast.com/users/cyberjared/folders/Jing/media/32ef7c22-fe82-4b60-a74a-9a37ab625f1f (: 21 e ignore el fondo de audio).

Es más lento de lo que me gustaría en 2-3 segundos en Firefox y Chrome para cada "aparición", pero es completamente inviable en IE, tardando fácilmente entre 7 y 8 segundos cada vez que aparece y se carga. Y eso ignora cualquier momento que sea necesario para guardar los datos después de que hayan sido cambiados.

Aquí está el código JavaScript que se encarga de la emergente:

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

En primer lugar, no entiendo por qué el __doPostBack() introduce un retraso en el IE. Si tomo eso y prm.add_endRequest, es MUY veloz ya que no está ocurriendo ninguna devolución.

En segundo lugar, necesito una forma de mostrar este control y actualizar los datos para que siga siendo interactivo. No estoy casado con un UpdatePanel, pero no he podido averiguar cómo hacerlo con un servicio web/método de página estática. Como puede ver, este control se carga muchas veces en la misma página, por lo que el tamaño de la página y la velocidad de descarga son un problema.

Agradecería cualquier idea?

Edit: Es lo mismo en IE 6 o 7. Estoy pensando que tiene que ver con el manejo de IE de UpdatePanel, porque el mismo código es mucho más rápido en FF y Chrome.

Answer 1

Si la velocidad/rendimiento es una preocupación importante para usted, me gustaría sugerir fuertemente contra UpdatePanels, ya que causan una devolución de datos de página completa que arrastra ViewState en el encabezado, entre otras cosas, y obliga a la página a pasar por el ciclo de vida completo cada vez (aunque el usuario no vea esto).

Debería poder (de manera relativamente fácil) usar PageMethods para realizar su tarea.

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

Para averiguar por qué está tomando tanto tiempo yo recomendaría usar Fiddler para espiar a su tráfico IE: http://www.fiddlertool.com/fiddler/

Se le busca en la respuesta de cada uno de los mensajes para ver qué tan grandes sean. Si los mensajes son> 5kb más o menos, UpdatePanel es demasiado guarro.

Suena como algo bastante simple que estás tratando de hacer, así que me está costando creer que el panel de actualización sea el culpable. Sin embargo, probarlo no debería ser demasiado difícil. La forma más fácil de probar esto sin un UpdatePanel sería usar un PageMethod. Esta página tiene un excelente tutorial: http://weblogs.asp.net/sohailsayed/archive/2008/02/23/calling-methods-in-a-codebehind-function-pagemethods-from-client-side-using-ajax-net.aspx

¿Podría publicar su código de UpdatePanel para obtener más información?

EDIT: Gracias!

¿Qué versión de IE está utilizando?

Answer 3

Aquí está el código para el control pop-up (sólo hay uno de estos en la página que es compartida por todos los controles se encuentran los íconos):

<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

Trabajar con las solicitudes de DOM y HTTP son inherentemente lenta , es el navegador. La mejor manera de acelerarlo es reducir el número de veces que hay una solicitud HTTP (AJAX o de otro tipo) y reducir el número de acciones DOM, buscar, editar, reemplazar, etc.

Answer 5

Notado en un proyecto anterior que IE se volvió terriblemente lento cuando teníamos montones (más de 150) de cuadros de texto en una página, después de consultar con el violinista pensamos que era el motor de renderizado el que estaba lento.

(por cierto, antes de que todos gritan, los más de 150 cuadros de texto era un requisito explícito del cliente, que básicamente recreado personalizado de Excel en la web)

Answer 6

me recomiendan hacer el seguimiento perforamnce con link text. Es una herramienta gratuita para el análisis de rendimiento AJAX en Internet Explorer

Answer 7

Es un problema conocido con IE solamente, consulte KB 2000262. Se puede encontrar una solución/solución here. Trabajé con ellos en el guión y es una pena que no puedan dar una solución real.