CODEWITHSUNDEEP
javascriptjqueryperformanceinternet-explorer-8slidetoggle
Sean Thoman
Sean Thoman

Reputation: 7489

jQuery slideToggle() poor performance and/or freezes IE8

I am experiencing very poor performance with the .slideToggle jQuery function in IE8. Its either choppy or it completely freezes the browser. Works great in firefox chrome opera etc.

I think it might be related to my DOCTYPE attribute? I am not sure. However, I have tried many solutions mentioned around the this site and others but none of them have worked so far, that includes making sure none of the sliding elements are set to position: relative.

Here is the script and html. Basically when the user clicks a button on a radio list contained in an upper div that upper div collapses and the lower div opens up with more buttons. They are hidden initially hence the check against .css('display'): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 function btnList_Type_Click() {

    $('#btnList_Type_Div').slideToggle(200, null);

    if ($("#btnPanelTwo").css('display') == 'none') {

        $('#btnPanelTwo').slideToggle(200, null);
    }

    if ($("#btnList_Date_Div").css('display') == 'none') {

        $('#btnList_Date_Div').slideToggle(200, null); 
    } 
}


     <div id="btnPanelTwo" class="lightPanel" onmouseover="page.cursor('pointer')" onmouseout="page.cursor('default')"  
     style="height: 36px; width:320px; margin-left:20px; margin-top:0px; display:none;">
    <span style="font-size: 13pt; left: 14px; top:10px;">Step 2: &nbsp&nbsp Choose Date Range:</span>
    </div>
    <div id="btnList_Date_Div" style="margin-left:60px; width:320px; height:325px; display:none;">
    <asp:RadioButtonList 
         ID="btnList_Date" runat="server" style="margin-left: 35px; margin-top:12px;" 
         Width="226px" AutoPostBack="False" Font-Size="11pt"              
     </asp:RadioButtonList>
      <asp:TextBox ID="txt_StartRange" class="textbox" runat="server" style="margin-left: 46px; margin-top:10px;" 
         Height="22px" Width="98px"></asp:TextBox>
        &nbsp;<asp:TextBox ID="txt_EndRange" class="textbox" runat="server" style="margin-left: 5px; margin-top:10px;"
         Height="22px" Width="98px"></asp:TextBox> <br />
       <asp:Button runat="server" ID="btn_Submit" class="button" 
                        Style="float:right; margin-top:40px; margin-right:56px;" Text="Submit" OnClick="btn_Submit_Click" />
                                 <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txt_StartRange" >
                                    </asp:CalendarExtender>
                                 <asp:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="txt_EndRange" >
                                   </asp:CalendarExtender>
       </div>
       </div>

EDIT Here is the rendered HTML as requested:

<DIV style="WIDTH: 320px; HEIGHT: 36px; MARGIN-LEFT: 20px" id=btnPanel 
class=lightPanel onmouseover="page.cursor('pointer')" 
onmouseout="page.cursor('default')"><SPAN 
style="FONT-SIZE: 13pt; TOP: 10px; LEFT: 14px" id=btnPanel_Text>Step 1: 
&nbsp;&nbsp; Select a Type of Report:</SPAN> </DIV>
<DIV style="WIDTH: 320px; MARGIN-LEFT: 60px" id=btnList_Type_Div>
<TABLE style="MARGIN-TOP: 12px; MARGIN-LEFT: 35px; FONT-SIZE: 11pt" 
id=ContentPlaceHolder1_btnList_Type>
<TBODY>
<TR>
  <TD><INPUT id=ContentPlaceHolder1_btnList_Type_0 
  onclick=btnList_Type_Click(); value=1 type=radio 
  name=ctl00$ContentPlaceHolder1$btnList_Type><LABEL 
  for=ContentPlaceHolder1_btnList_Type_0>Label0</LABEL></TD></TR>
  <TR>
  <TD><INPUT id=ContentPlaceHolder1_btnList_Type_1 
   onclick=btnList_Type_Click(); value=2 type=radio 
  name=ctl00$ContentPlaceHolder1$btnList_Type><LABEL 
   for=ContentPlaceHolder1_btnList_Type_1>Label1</LABEL></TD></TR>
<TR>
 <TD><INPUT id=ContentPlaceHolder1_btnList_Type_2 
  onclick=btnList_Type_Click(); value=3 type=radio 
  name=ctl00$ContentPlaceHolder1$btnList_Type><LABEL 
  for=ContentPlaceHolder1_btnList_Type_2>Label2</LABEL></TD></TR>
<TR>
 <TD><INPUT id=ContentPlaceHolder1_btnList_Type_3 
  onclick=btnList_Type_Click(); value=4 type=radio 
  name=ctl00$ContentPlaceHolder1$btnList_Type><LABEL 
  for=ContentPlaceHolder1_btnList_Type_3>Label3</LABEL></TD></TR>

Label4

Step 2:    Choose Date Range: Label1 Label2 Label3 Label4  

Upvotes: 4

Views: 2990

Answers (1)

Ilya Volodin
Ilya Volodin

Reputation: 11256

Ok, I ran your page through profiler, and it actually doesn't look that bad. Javascript execution is within the range of reasonable (245ms). Your problem is reflows (takes around 1073ms) to reflow your page fully within your sliding animations. See screenshot.

DynaTrace log

There are a few things you can do to improve this. First of all, remove margin from your btnList_Type_Div element, as well as padding. JQuery Animation framework is written quite poorly. When you call slide function, it actually runs 5 different animations at the same time, 2 for margins, 2 for padding and one for width or height of your element. Having margins on your element (even though they are not getting animated in your case) is not great for animation. This should improve your reflows quite significantly (in my test it went down from 1073ms down to 217ms).

Second thing I would suggest, get rid of table around your radio buttons, it's absolutely not required for your layout, a few divs will do the trick just fine. If, for some reason, you have to have a table, at least write it out correctly (declare cols with width on each one, set table-layout: fixed style on it, etc.). Tables are quite expansive to reflow, since they have to recalculate the width/height of every cell every time.

Last thing I can suggest (if everything else fails), nest your div inside another one, and then set position: absolute on it. This will take it out of context, which means that nothing else on the page needs to reflow when you change the settings on your div.

Edit:

Oh and one more thing, even though you set your DTD to XHTML Transitional, and Transitional is more forgiving then Strict, you should still try to follow XHTML format, like closing br and input tags, setting the case correctly on tag names, etc. All of this can affect performance greatly as well.

Edit 2:

Since you didn't post the whole source of the page, including all javascripts and css files, I can't really profile it correctly. More than that, my computer might be more powerful than yours, and might still not be able choppiness in the performance of the animation. I suggest you try to profile the page yourself. For that, you will need to install DynaTrace Ajax. Run it, start profiling for IE, it will open default version of IE installed on your machine. Navigate to your page, at that point I suggest setting a mark, just so it would be easier to find, then click on your radio button (and perform whatever other actions you want to profile). Close your browser, and in DynaTrace, you should see a new session on the right, expand it and navigate into PurePaths view. Find the mark you set (should be Mark 1 by default) and then look around it for click events and rendering activities. Once you found something that looks like it's taking longer than it should (duration), you can click on it and expand all child actions until you find what is causing an issue. Now by tweaking HTML, you should be able to profile it each time, till you get close to the result you are looking for.

P.S. If you set position:absolute on your div, you have to wrap it into another div, with position:relative on it, as well as height. Setting absolute positioning will take your div out of context, and parent div will have a height of 0px, unless you set it manually yourself.

Upvotes: 5

Related Questions