Сосредоточение и / или выбор элемента ввода медленно в IE с большим количеством тегов ввода внутри домена - PullRequest
Новая
       0

Сосредоточение и / или выбор элемента ввода медленно в IE с большим количеством тегов ввода внутри домена

4 голосов
/ 29 ноября 2011

Моя компания предоставляет ERP-решение, которое зависит от использования IE из-за некоторых плохих решений, принятых много лет назад (с использованием поведения для динамического HTML), поэтому я никоим образом не могу использовать другой браузер.И сейчас он ограничен IE8.И около 40 000 установок находятся в полях ...

К проблеме:

Обычно страница в нашем приложении имеет около 150 - 200 входных тегов внутри dom.Использование их через JavaScript не проблема.

Но: теперь у нас есть страница (только для одного клиента) с огромной таблицей (около 1500 строк таблицы), где каждая строка имеет около десяти (редактируемых) полей вводавнутри некоторых столбцов, поэтому у нас есть около 15000 входных тегов внутри DOM.На этой единственной странице используется jQuery, который не используется для остальной части продукта.

Прежде всего: прокрутка таблицы (внутри элемента div) ужасно медленная в IE (съедает все ресурсы ЦП).

Во-вторых (и моя главная проблема сейчас): если я хочу изменить фокус и / или выделить текст внутри одного из входных тегов, IE замедляется до сканирования.

Если у меня есть дляНапример, в таблице всего 50 строк все работает нормально, но IE замедляет работу, добавляя больше строк и полей ввода.Если я помещаю только текстовую информацию в ячейки таблицы, у IE с этим нет проблем.

Так что это действительно поле ввода, которое вызывает замедление, но есть ли способ обойти это?

Я открыт для предложений - я пытался использовать редактируемые элементы div, но я не могу получить их, чтобы они на 100% эмулировали поле однострочного ввода (мне нужны события onblur, события щелчка и т. Д.).В настоящее время я также думаю о том, чтобы сделать эту единственную страницу продукта совместимой с Chrome и использовать плагин Chrome Frame для IE, чтобы отобразить страницу

FYI: все события, кроме события onblur, зарегистрированы в элементе таблицы.Элемент onblur регистрируется во всех полях ввода внутри строки, как только пользователь нажимает на поле ввода (и удаляется событие onblur для последней активной строки).

Спасибо всем за то, что поделились некоторыми мыслями ...

Обновление Я изменил код, чтобы в таблице не было полей ввода.Только после активации строки ячейки с редактируемым содержимым получают элемент ввода.Добавление / удаление этих входных ячеек происходит довольно быстро (20 - 40 мс), но проблема с выбором и фокусировкой на поле остается той же ... С таблицей из 190 строк IE выполнялось около 1600 - 2100 мс ».focus () "и" .select "для элемента ввода внутри таблицы.Я в своем уме - сейчас я рассматриваю вопрос о том, чтобы сделать эту единственную страницу совместимой с другими браузерами, кроме IE, и говорю нашему клиенту установить плагин Chrome Frame.Или другое решение состоит в том, чтобы запрограммировать расширенный клиент для этой цели - все это займет больше времени, чем то, за что платят ... Помните, что макет таблицы работает нормально, если в этой таблице не слишком много строк ...

Код:

Пример строки таблицы: 

  <tr id="POS_5096" class="ROWSELECTED" poscount="0" ordnernr=
  "ROOT" timestamp="00000000003091FB">
    <td>
      <input class="CHECKONE" type="checkbox" name="wn_folder_dnd">
    </td>
    <td name="FOLDERPATH" dttype="string" dbvalue="002">
      <a href=
      "../Sales/AuftragPosRec.aspx?auftrag=200146&amp;accessID=5096"
      target="_blank">002</a>
    </td>
    <td>
      <input class="CHECKONE" title="Textposition" disabled type="checkbox"
      name="TEXTPOS" dttype="i2" dbvalue="0">
    </td>
    <td>
      <img name="taketextpos" src="../Style/MenuIcons/down.gif">
    </td>
    <td>
      <input class="CHECKONE" title="Durch Mehrung / Minderung verändert"
      disabled type="checkbox" name="WN_MMCHANGED" dttype="i2" dbvalue="0">
    </td>
    <td sizcache="0" sizset="0">
      <input style="TEXT-ALIGN: right; WIDTH: 140px" value=
      "dfgdfgdfgdfnbndfs" name="NAME" dttype="string" dbvalue=
      "dfgdfgdfgdfnbndfs" jquery16409152079553898877="55">
    </td>
    <td>
      <img name="takename" src="../Style/MenuIcons/down.gif">
    </td>
    <td name="NAMEINTERN" dttype="string" dbvalue="PDW-1500 PDW-1500">
      <a href="../Masterdata/ArtikelInfoRec.aspx?artikel=114080" target=
      "_blank">PDW-1500 PDW-1500</a>
    </td>
    <td title="04020asasa" name="ARTIKELGRUPPE" dttype="string" dbvalue=
    "04020">
      04020
    </td>
    <td sizcache="0" sizset="1">
      <input style="TEXT-ALIGN: right; WIDTH: 35px" title="04" value="04"
      name="RABATTGRUPPE" dttype="string" dbvalue="04"
      jquery16409152079553898877="56">
    </td>
    <td>
      <img name="pickrabattgruppe" src="../Style/fieldicons/picklist.gif">
    </td>
    <td>
      <img name="takerabattgruppe" src="../Style/MenuIcons/down.gif">
    </td>
    <td name="HERSTELLER" dbvalue="103736.001">
      <img title="Sony Europe Limited (B)" name="popupadresse()" src=
      "../Style/field-icons/goto-this-dataset.png">
    </td>
    <td name="LIEFERANT" dbvalue="">
      <img title="" name="popupadresse()" src=
      "../Style/field-icons/goto-this-dataset.png">
    </td>
    <td>
      <img name="pickwn_lieferant" src="../Style/fieldicons/picklist.gif">
    </td>
    <td sizcache="0" sizset="2">
      <input style="TEXT-ALIGN: right; WIDTH: 50px" value="2,00" name=
      "MENGE" dttype="number" dtscale="2" dbvalue="2.00"
      jquery16409152079553898877="57">
    </td>
    <td>
      <div style=
      "BORDER-BOTTOM: #809db7 1px solid; BORDER-LEFT: #809db7 1px solid; WIDTH: 10px; BORDER-TOP: #809db7 1px solid; BORDER-RIGHT: #809db7 1px solid"
      name="WN_AUFWAND_BEISTELL" dbvalue="" clickevent="pickbeistell">
         
      </div>
    </td>
    <td sizcache="0" sizset="3">
      <input style="TEXT-ALIGN: right; WIDTH: 55px" name="PREISME" dttype=
      "string" dbvalue="Stück" disabledvalue="Stück"
      jquery16409152079553898877="58">
    </td>
    <td>
      <img name="pickpreisme" src="../Style/fieldicons/picklist.gif">
    </td>
    <td>
      <img name="takepreisme" src="../Style/MenuIcons/down.gif">
    </td>
    <td style="TEXT-ALIGN: right" name="WN_UVP" dttype="number" dtscale="2"
    dbvalue="0.00">
      0,00
    </td>
    <td sizcache="0" sizset="4">
      <input style="TEXT-ALIGN: right; WIDTH: 105px" value="0,00" name=
      "WN_EKPREIS" dttype="number" dtscale="2" dbvalue="0.00"
      jquery16409152079553898877="59">
    </td>
    <td>
      <img name="takewn_ekpreis" src="../Style/MenuIcons/down.gif">
    </td>
    <td sizcache="0" sizset="5">
      <input style="TEXT-ALIGN: right; WIDTH: 30px" name="WN_EKWAEHRUNG"
      dttype="string" dbvalue="USD" disabledvalue="USD"
      jquery16409152079553898877="60">
    </td>
    <td>
      <img name="pickwn_ekwaehrung" src="../Style/fieldicons/picklist.gif">
    </td>
    <td>
      <img name="takewn_ekwaehrung" src="../Style/MenuIcons/down.gif">
    </td>
    <td sizcache="0" sizset="6">
      <input style="TEXT-ALIGN: right; WIDTH: 45px" value="1,00" name=
      "WN_EK_SONDERRABATT" dttype="number" dtscale="2" dbvalue="1.00"
      jquery16409152079553898877="61">
    </td>
    <td>
      <img name="takewn_ek_sonderrabatt" src="../Style/MenuIcons/down.gif">
    </td>
    <td sizcache="0" sizset="7">
      <input style="TEXT-ALIGN: right; WIDTH: 45px" value="0,00" name=
      "WN_EK_SONDERRABATT2" dttype="number" dtscale="2" dbvalue="0.00"
      jquery16409152079553898877="62">
    </td>
    <td>
      <img name="takewn_ek_sonderrabatt2" src=
      "../Style/MenuIcons/down.gif">
    </td>
    <td style="TEXT-ALIGN: right" name="WN_EKPREIS_FINAL" dttype="number"
    dtscale="2" dbvalue="0.00">
      0,00
    </td>
    <td style="TEXT-ALIGN: right" name="WN_AUFSCHLAG" dttype="number"
    dtscale="2" dbvalue="10.00">
      10,00
    </td>
    <td style="TEXT-ALIGN: right" name="MARGE" dttype="number" dtscale="2"
    dbvalue="100.00">
      100,00
    </td>
    <td style="TEXT-ALIGN: right" name="WN_AUFSCHLAGREAL" dttype="number"
    dtscale="2" dbvalue="0.00">
      0,00
    </td>
    <td sizcache="0" sizset="8">
      <input class="CHECKONE" type="checkbox" name="WN_EKFIX" dttype="i2"
      dbvalue="0" clickevent="dataChange">
    </td>
    <td>
      <img name="takewn_ekfix" src="../Style/MenuIcons/down.gif">
    </td>
    <td sizcache="0" sizset="9">
      <input style="TEXT-ALIGN: right; WIDTH: 105px" value="0,00" name=
      "NETTO" dttype="number" dtscale="2" dbvalue="0.00"
      jquery16409152079553898877="63">
    </td>
    <td sizcache="0" sizset="10">
      <input style="TEXT-ALIGN: right; WIDTH: 35px" value="0,00" name=
      "RABATT" dttype="number" dtscale="2" dbvalue="0.00"
      jquery16409152079553898877="64">
    </td>
    <td>
      <img name="takerabatt" src="../Style/MenuIcons/down.gif">
    </td>
    <td sizcache="0" sizset="11">
      <input style="TEXT-ALIGN: right; WIDTH: 35px" value="0,00" name=
      "RABATT2" dttype="number" dtscale="2" dbvalue="0.00"
      jquery16409152079553898877="65">
    </td>
    <td>
      <img name="takerabatt2" src="../Style/MenuIcons/down.gif">
    </td>
    <td sizcache="0" sizset="12">
      <input style="TEXT-ALIGN: right; WIDTH: 35px" value="0,00" name=
      "RABATT3" dttype="number" dtscale="2" dbvalue="0.00"
      jquery16409152079553898877="66">
    </td>
    <td>
      <img name="takerabatt3" src="../Style/MenuIcons/down.gif">
    </td>
    <td sizcache="0" sizset="13">
      <input style="TEXT-ALIGN: right; WIDTH: 35px" value="0,00" name=
      "WN_MARKUP" dttype="number" dtscale="2" dbvalue="0.00"
      jquery16409152079553898877="67">
    </td>
    <td>
      <img name="takewn_markup" src="../Style/MenuIcons/down.gif">
    </td>
    <td style="TEXT-ALIGN: right" name="WN_MARKUPPREIS" dttype="number"
    dtscale="2" dbvalue="0.00">
      0,00
    </td>
    <td style="TEXT-ALIGN: right" name="WN_GESAMTRABATT" dttype="number"
    dtscale="2" dbvalue="0.00">
      0,00
    </td>
    <td style="TEXT-ALIGN: right" name="STKERLOES" dttype="number" dtscale=
    "2" dbvalue="0.00">
      0,00
    </td>
    <td style="TEXT-ALIGN: right" name="DECKUNG" dttype="number" dtscale=
    "2" dbvalue="0.00">
      0,00
    </td>
    <td style="TEXT-ALIGN: right" name="ERLOES" dttype="number" dtscale="2"
    dbvalue="0.00">
      0,00
    </td>
    <td sizcache="0" sizset="14">
      <input style="TEXT-ALIGN: right; WIDTH: 35px" value="0,00" name=
      "MRABATT" dttype="number" dtscale="2" dbvalue="0.00"
      jquery16409152079553898877="68">
    </td>
    <td>
      <img name="takemrabatt" src="../Style/MenuIcons/down.gif">
    </td>
    <td sizcache="0" sizset="15">
      <input style="TEXT-ALIGN: right; WIDTH: 35px" value="0,00" name=
      "RABATT4" dttype="number" dtscale="2" dbvalue="0.00"
      jquery16409152079553898877="69">
    </td>
    <td>
      <img name="takerabatt4" src="../Style/MenuIcons/down.gif">
    </td>
    <td name="USERPOS" dttype="string" dbvalue="21">
      <a href=
      "../Sales/AuftragPosRec.aspx?auftrag=200146&amp;accessID=5096"
      target="_blank">21</a>
    </td>
    <td style="DISPLAY: none" name="TEXT"></td>
    <td style="DISPLAY: none" name="SORTIERUNG">
      a
    </td>
    <td style="DISPLAY: none" name="HERSTELLERNAME">
      Sony Europe Limited (B)
    </td>
    <td style="DISPLAY: none" name="LIEFERANTNAME"></td>
    <td style="DISPLAY: none" name="POSITION">
      21
    </td>
    <td style="DISPLAY: none" name="ARTIKEL">
      114080
    </td>
    <td name="WN_ORDNERNAME"></td>
    <td style="DISPLAY: none" name="WN_LIEFERANT"></td>
    <td style="DISPLAY: none" name="WN_MARKE"></td>
  </tr>

1 Ответ

0 голосов
/ 29 ноября 2011

Не видя сценария в дополнение к HTML, могу предложить только две вещи:

1) Профиль, профиль, профиль.Либо используйте лучший браузер (Chrome / Safari + Devtools или Firefox + Firebug могут помочь), либо попробуйте использовать некоторые из инструментов MS dev (у меня нет опыта их использования для профилирования, но, насколько я помню, отладчик скриптов MS может это сделать) или DynaTrace , что, на мой взгляд, очень хорошо для работы с IE.Найдите то, что медленно, и исправьте это.

2) Избавьтесь от всех полей ввода и преобразуйте ячейки в поля ввода по щелчку.В jQuery используйте делегат для этого.Что-то вроде: 

$('table').delegate('td', 'click', function() {
    // Switch back and forth between input and text here.
});

Это должно в значительной степени устранить любое замедление работы скрипта.Я скептически отношусь к заявлениям в комментариях, утверждающим, что jQuery должен «искать» размытый элемент - насколько я понимаю, он должен быть доступен в объекте события.Я не понимаю, почему jQuery должен искать его, но, возможно, я что-то упустил.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...