UpdatePanel Slowness in IE

Question

I'm working on an ASP.Net application and working to add some Ajax to it to speed up certain areas. The first area that I am concentrating is the attendance area for the teachers to report attendance (and some other data) about the kids. This needs to be fast.

I've created a dual-control set up where the user clicks on the icon and via Javascript and Jquery I pop up the second control. Then I use a __doPostBack() to refresh the pop up control to load all of the relevant data.

Here's a little video snippet to show how it works: http://www.screencast.com/users/cyberjared/folders/Jing/media/32ef7c22-fe82-4b60-a74a-9a37ab625f1f (:21 and ignore the audio background).

It's slower than I would like at 2-3 seconds in Firefox and Chrome for each "popping up", but it's entirely unworkable in IE, taking easily 7-8 seconds for each time it pops up and loads. And that disregards any time that is needed to save the data after it's been changed.

Here's the javascript that handles the 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 + @"','');
 }
}}

First, I don't understand why the __doPostBack() introduces such a delay in IE. If I take that and the prm.add_endRequest out, it's VERY speedy as no postback is happening.

Second, I need a way to pop up this control and refresh the data so that it is still interactive. I'm not married to an UpdatePanel, but I haven't been able to figure out how to do it with a Web Service/static page method. As you can see this control is loaded many times on the same page so page size and download speed is an issue.

I'd appreciate any ideas?

Edit: It's the same in IE 6 or 7. I'm thinking it has to do with IE's handling of the UpdatePanel, because the same code is much faster in FF and Chrome.

Answer 1

To find out why it's taking so long I would recommend using Fiddler to spy on your IE traffic: http://www.fiddlertool.com/fiddler/

You'll be looking at the response of each of the messages to see how large they are. If the messages are >5kb or so then the UpdatePanel is being way too piggy.

It sounds like a fairly simple thing you're trying to do so I'm having a hard time believing the update panel is to blame. Testing it shouldn't be too difficult though. The easiest way to test this without an UpdatePanel would be to use a PageMethod. This page has a great tutorial on it: http://weblogs.asp.net/sohailsayed/archive/2008/02/23/calling-methods-in-a-codebehind-function-pagemethods-from-client-side-using-ajax-net.aspx

Could you also post your UpdatePanel code so we could get more details?

EDIT: Thanks!

What version of IE are you using?

Answer 2

Here's the code for the pop up control (there's only one of these on the page that's shared by all of the controls containing the icons):

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

Working with the DOM and HTTP Requests are inherently slow, it's the browser. The best way to speed it up is to reduce the number of times there is an HTTP request (AJAX or otherwise), and reduce the number of DOM actions, search, edit, replace, etc.

Answer 4

Noticed in a previous project that IE became terribly slow when we had heaps (150+) textboxes on a page, after checking with fiddler we figured it was the rendering engine that was slow.

(btw, before you all shout, the 150+ textboxes was an explicit customer requirement, we basically recreated customized excel on the web)

Answer 5

If speed/performance is a major concern for you, I would strongly suggest against UpdatePanels, as they cause a full page postback that drags the ViewState in the header, among other crap, and forces the page to go through the whole life cycle every time (even though the user doesn't see this).

You should be able to (relatively easily) use PageMethods to accomplish your task.

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

Hello,

I recommend to do perforamnce tracing with link text. It is a free tool for AJAX performance analysis in Internet Explorer

Answer 7

Its a known issue with IE only, see KB 2000262. A workaround/fix can be found here. I worked with them on the script and its a shame they cannot put out a real fix.