Javascript 在IE上聚焦和/或选择输入元素的速度较慢，dom中有大量的输入标记
我的公司提供的ERP解决方案依赖于使用IE，因为几年前的一些错误决策（使用动态html的行为），所以我无法使用其他浏览器。现在它仅限于IE8。大约有40000个装置在野外安装 关于这个问题： 通常，我们应用程序中的一个页面在dom中有大约150-200个输入标记。通过JavaScript使用它们没有问题 但是：现在我们有了一个页面（仅针对单个客户），其中有一个巨大的表（大约1500个表行），其中每行在某些列中有大约10个（可编辑的）输入字段，因此dom中有大约15000个输入标记。这个单独的页面使用jQuery，它不用于产品的其余部分 首先：在IE上滚动表格（在一个div中）非常慢（占用所有CPU） 第二（也是我现在最关心的问题）：如果我想改变焦点和/或选择某个输入标记内的文本，也就是说速度会减慢到爬行 例如，如果我有一个只有50行的表，那么一切都可以正常工作，但是IE会减慢更多行的速度，并且正在添加输入字段。如果我只把文本信息放在表格单元格中，即没有问题 因此，确实是输入字段导致了减速，但是有什么办法可以解决这个问题吗 我乐于接受建议——我尝试过使用可编辑的div，但我无法让它们100%模拟单线输入字段（我需要onblur事件、click事件等等）。 目前，我也在考虑让这个产品的单一页面与Chrome兼容，并使用IE的Chrome框架插件来显示页面 仅供参考：除onblur事件外，所有事件都在table元素上注册。一旦用户单击一个输入字段，onblur元素就会在一行中的所有输入字段上注册（最后一个活动行的onblur事件将被删除） 谢谢大家分享一些想法 更新 我已经更改了代码，因此表中没有输入字段。只有在一行被激活后，具有可编辑内容的单元格才会获得一个输入元素。 这些输入单元的添加/删除相当快（20-40毫秒），但选择和聚焦一个字段的问题仍然是一样的。。。 对于一个有190行的表，IE在表内的输入元素上执行“.focus（）”和“.select”大约需要1600-2100毫秒。 我在我的智慧结束-现在我认为使这个单一的网页兼容其他浏览器比IE，并告诉我们的客户安装Chrome框架插件。或者另一个解决方案是为此目的编写一个富客户机-所有这些都需要比支付更多的时间。。。 请记住，只要表格中没有太多行，表格布局就可以正常工作 代码： 表格行的示例：Javascript 在IE上聚焦和/或选择输入元素的速度较慢，dom中有大量的输入标记,javascript,jquery,performance,forms,internet-explorer,Javascript,Jquery,Performance,Forms,Internet Explorer,我的公司提供的ERP解决方案依赖于使用IE，因为几年前的一些错误决策（使用动态html的行为），所以我无法使用其他浏览器。现在它仅限于IE8。大约有40000个装置在野外安装 关于这个问题： 通常，我们应用程序中的一个页面在dom中有大约150-200个输入标记。通过JavaScript使用它们没有问题 但是：现在我们有了一个页面（仅针对单个客户），其中有一个巨大的表（大约1500个表行），其中每行在某些列中有大约10个（可编辑的）输入字段，因此dom中有大约15000个输入标记。这个单独的页面
<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&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&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>
04020
0,00
0,00
10,00
100,00
0,00
0,00
0,00
0,00
0,00
0,00
A.
索尼欧洲有限公司（B）
21
114080
$('table').delegate('td', 'click', function() {
// Switch back and forth between input and text here.
});
这将消除脚本中几乎所有的减速。我对评论中声称jQuery必须“搜索”模糊的元素的说法表示怀疑——据我所知，这应该在事件对象上可用。我不明白为什么jQuery必须搜索它——但也许我遗漏了什么。是否将jQuery每个循环绑定到所有输入？如果是这样，那么使用javascript for循环会更好，性能比jquery的eachI快91%。同意Jamie的说法，还可以尝试将事件绑定到每个TR标记而不是表。jQuery必须搜索每一行，以找到接收事件操作的字段。在这种情况下，将一个处理程序绑定到每个TR标记上多次，而不是绑定到表上一次，可能是值得的。通常这不是真的。。。John的评论也是正确的，在jQuery中使用$（'table'）实际上比$（'table tr'）更快。find（'tr'）比$（'table tr'）更快，因为CSS选择器向后移动：）我不在表上使用任何jQuery“大规模处理”。事实上，仅仅是表格本身的呈现（=滚动）很慢，而输入标记内文本的聚焦/选择也很慢。我已经使用MS自己的建议来加快表格渲染（表格布局：修复，并设置