jQuery slideToggle () плохая производительность и / или зависает IE8 - PullRequest
Новая
       17

jQuery slideToggle () плохая производительность и / или зависает IE8

4 голосов
/ 27 июня 2011

Я испытываю очень низкую производительность при использовании функции .slideToggle jQuery в IE8. Он либо прерывистый, либо полностью зависает в браузере. Прекрасно работает в Firefox Chrome Opera и т. Д.

Я думаю, это может быть связано с моим атрибутом DOCTYPE? Я не уверен. Тем не менее, я пробовал много решений, упомянутых на этом и других сайтах, но ни одно из них не сработало до сих пор, включая проверку того, что ни один из скользящих элементов не установлен в положение: относительное.

Вот сценарий и HTML. В основном, когда пользователь нажимает кнопку в списке радиоканалов, содержащемся в верхнем элементе, верхний элемент разделяется, а нижний элемент открывается с большим количеством кнопок. Они изначально скрыты, следовательно, проверка по .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 Метка3 Label4

1 Ответ

5 голосов
/ 01 июля 2011

Хорошо, я проверил вашу страницу через профилировщик, и на самом деле все выглядит не так плохо.Выполнение Javascript находится в пределах разумного (245 мс).Ваша проблема - перекомпоновка (занимает около 1073 мс), чтобы полностью перекомпоновать вашу страницу в рамках скользящей анимации.Смотрите скриншот.

DynaTrace log

Есть несколько вещей, которые можно сделать, чтобы улучшить это.Прежде всего, удалите поля из вашего элемента btnList_Type_Div, а также отступы.JQuery Animation Framework написан довольно плохо.Когда вы вызываете функцию слайда, она на самом деле запускает 5 разных анимаций одновременно, 2 для полей, 2 для отступа и один для ширины или высоты вашего элемента.Наличие полей на вашем элементе (даже если они не анимируются в вашем случае) не очень хорошо для анимации.Это должно значительно улучшить ваши рефлоки (в моем тесте оно уменьшилось с 1073 мс до 217 мс).

Второе, что я хотел бы предложить, - избавиться от таблицы вокруг переключателей, это абсолютно не требуется для вашей раскладки,несколько divs сделают трюк просто отлично.Если по какой-то причине у вас должна быть таблица, по крайней мере, запишите ее правильно (объявите столбцы с шириной на каждой, установите макет таблицы: фиксированный стиль на ней и т. Д.).Таблицы достаточно просторны для перекомпоновки, так как они должны каждый раз пересчитывать ширину / высоту каждой ячейки.

Последнее, что я могу предложить (если все остальное не сработает), вложите свой div в другой, а затем установитепозиция: абсолютно на нем.Это вырвет его из контекста, что означает, что больше ничего на странице не нужно переформатировать при изменении настроек вашего div.

Редактировать:

О, и еще одна вещь, хотявы устанавливаете DTD на XHTML Transitional, и Transitional более простителен, чем Strict, вы все равно должны пытаться следовать формату XHTML, например закрывать br и входные теги, правильно устанавливать регистр в именах тегов и т. д. Все это может сильно повлиять на производительность, так какхорошо.

Редактировать 2:

Поскольку вы не опубликовали весь исходный код страницы, включая все javascripts и css файлы, я не могу правильно профилировать его.Более того, мой компьютер мог бы быть более мощным, чем ваш, и, возможно, по-прежнему не мог работать в режиме анимации.Я предлагаю вам попробовать профилировать страницу самостоятельно.Для этого вам нужно будет установить DynaTrace Ajax .Запустите его, запустите профилирование для IE, откроется версия IE по умолчанию, установленная на вашем компьютере.Перейдите на свою страницу, на этом этапе я предлагаю установить отметку, чтобы ее было легче найти, затем нажмите кнопку-переключатель (и выполните любые другие действия, которые вы хотите профилировать).Закройте браузер, и в DynaTrace вы увидите новый сеанс справа, разверните его и перейдите в представление PurePaths.Найдите установленную вами отметку (по умолчанию она должна быть отметкой 1), а затем посмотрите на нее, чтобы узнать о событиях кликов и действиях по визуализации.Как только вы нашли что-то, что выглядит так, как будто это занимает больше времени, чем должно (продолжительности), вы можете щелкнуть по нему и развернуть все дочерние действия, пока не найдете причину проблемы.Теперь, настроив HTML, вы сможете профилировать его каждый раз, пока вы не приблизитесь к результату, который вы ищете.

PS Если вы установили position: absolute на вашем div, вы должны обернуть его вдругой div, с положением: относительно него, а также по высоте.Установка абсолютного позиционирования выведет ваш div из контекста, а родительский div будет иметь высоту 0px, если вы не установите его вручную.

...