javascript - 在 dom 中有大量输入标签的 IE 上，聚焦和/或选择输入元素速度较慢

Question

我公司提供的 ERP 解决方案依赖于使用 IE，因为几年前做出了一些错误的决定(使用动态 html 的行为)，所以我无法使用其他浏览器。现在它仅限于 IE8。大约有 40.000 台设备在现场......

问题:

通常，我们应用程序中的一个页面在 dom 中有大约 150 - 200 个输入标签。通过 JavaScript 使用它们没有问题。

但是:现在我们有一个页面(仅针对单个客户)和一个巨大的表格(大约 1500 行表格)，其中每行在某些列中有大约十个(可编辑的)输入字段，所以我们有大约 15000 个输入标签在dom里面。此单个页面使用 jQuery，该产品未用于产品的其余部分。

首先:滚动表格(在 div 内)在 IE 上非常慢(占用所有 CPU)。

第二个(也是我现在最关心的问题):如果我想更改焦点和/或选择其中一个输入标签内的文本，IE 会慢得像爬行一样。

例如，如果我有一个只有 50 行的表格，一切正常，但 IE 会减慢添加更多行和输入字段的速度。如果我只将文本信息放在表格单元格中，IE 没有问题。

所以确实是输入字段导致了速度下降，但是有什么办法可以解决这个问题吗？

我愿意接受建议 - 我尝试过使用可编辑的 div，但我无法让它们 100% 模拟单行输入字段(我需要 onblur 事件、点击事件等)。目前也在考虑把产品的这个单页兼容Chrome，使用Chrome Frame plugin for IE来显示页面

仅供引用:除 onblur 事件之外的所有事件都在 table 元素上注册。一旦用户点击一个输入字段，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>

Answer 1

除了 HTML 之外没有看到脚本，我只能建议两件事:

1)个人资料，个人资料，个人资料。要么使用更好的浏览器(Chrome/Safari+Devtools 或 Firefox+Firebug 可以提供帮助)，要么尝试使用 MS 的一些开发工具(我没有使用这些工具进行分析的经验，但我记得 MS 的脚本调试器可以做到这一点) 或 DynaTrace ，我发现它非常适合与 IE 一起使用。找到慢的地方，然后修复它。

2) 去除所有的输入框，并在点击时将单元格转换为输入框。在 jQuery 中，为此使用委托(delegate)。类似的东西:

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

这应该几乎可以消除脚本的任何减速。我对评论中声称 jQuery 必须“搜索”模糊元素的说法持怀疑态度——据我所知，这应该在事件对象上可用。我不明白为什么 jQuery 必须搜索它 - 但也许我遗漏了什么。