首页 > 编程语言> > javascript – jQuery slideToggle()性能不佳和/或冻结IE8

javascript – jQuery slideToggle()性能不佳和/或冻结IE8

2019-06-21 10:19:56 作者：互联网

我在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" onm ouseover="page.cursor('pointer')" onm ouseout="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 onm ouseover="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

解决方法:

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

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

我建议的第二件事,摆脱你的单选按钮周围的表,你的布局绝对不需要,一些div将完成这个技巧.如果由于某种原因,你必须有一个表,至少要正确地写出来(在每个表上声明宽度为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,你应该能够每次都对它进行分析,直到你接近你想要的结果.

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

标签：jquery,javascript,internet-explorer-8,performance,slidetoggle
来源： https://codeday.me/bug/20190621/1254194.html