Question

我在IE8中使用.slideToggle jQuery函数表现不佳。它要么波动，要么完全冻结浏览器。在firefox chrome opera等中运行得很好。

我认为它可能与我的DOCTYPE属性有关？我不确定。但是，我尝试了很多本网站及其他网站提到的解决方案，但到目前为止还没有一个解决方案，包括确保没有任何滑动元素设置为position：relative。

这是脚本和html。基本上，当用户单击上部div中包含的单选按钮上的按钮时，上部div会折叠，而下部div会打开更多按钮。它们最初被隐藏，因此检查.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>

编辑以下是请求呈现的HTML：

<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

    第2步：选择日期     范围：                               LABEL1                LABEL2                LABEL3                Label4

Answer 1

好的，我通过探查器运行你的页面，它实际上看起来并不那么糟糕。 Javascript执行在合理范围内（245ms）。您的问题是回流（大约需要1073毫秒）才能在您的滑动动画中完全重排您的页面。见截图。

DynaTrace log

您可以采取一些措施来改善这一点。首先，从btnList_Type_Div元素中删除边距以及填充。 JQuery Animation框架编写得很糟糕。当你调用滑动功能时，它实际上同时运行5个不同的动画，2个用于边距，2个用于填充，1个用于元素的宽度或高度。在你的元素上有边距（即使它们没有在你的情况下得到动画）对于动画也不是很好。这应该会显着提高你的回流率（在我的测试中它从1073ms下降到217ms）。

我建议的第二件事，摆脱你的收音机按钮周围的表，你的布局绝对不需要，一些divs就可以了。如果由于某种原因，你必须有一个表，至少要正确地写出来（在每个表上声明宽度为cols，设置table-layout：固定样式等）。表格对回流来说非常广泛，因为它们每次都必须重新计算每个单元格的宽度/高度。

我可以建议的最后一件事（如果其他一切都失败了），将你的div嵌入另一个，然后设置position：absolute就可以了。这将使其脱离上下文，这意味着当您更改div上的设置时，页面上的任何其他内容都不需要重排。

编辑：

哦，还有一件事，即使你将DTD设置为XHTML Transitional，而Transitional比Strict更宽容，你仍然应该尝试遵循XHTML格式，比如关闭br和输入标签，在标签名称上正确设置案例所有这些都会对性能产生很大的影响。

编辑2：

由于您没有发布整个页面源代码，包括所有javascripts和css文件，我无法正确分析它。更重要的是，我的电脑可能比你的电脑更强大，并且可能仍然无法在动画的表现中产生波动。我建议你尝试自己剖析页面。为此，您需要安装DynaTrace Ajax。运行它，开始对IE进行分析，它将打开您机器上安装的IE的默认版本。导航到您的页面，此时我建议设置一个标记，以便更容易找到，然后单击您的单选按钮（并执行您想要配置的任何其他操作）。关闭浏览器，在DynaTrace中，您应该在右侧看到一个新会话，展开它并导航到PurePaths视图。找到您设置的标记（默认情况下应该是标记1），然后查看它以查看单击事件和渲染活动。一旦你发现它看起来比它应该花费更长的时间（持续时间），你可以点击它并展开所有子动作，直到找到导致问题的原因。现在通过调整HTML，你应该能够每次都对它进行分析，直到你接近你想要的结果。

P.S。如果在div上设置position：absolute，则必须将其包装到另一个div中，其位置为：relative，以及height。设置绝对定位会使你的div脱离上下文，而父div的高度为0px，除非你自己手动设置。

jQuery slideToggle（）性能不佳和/或冻结IE8

1 个答案: