All geek questions in one place

Focusing and / or selecting an input element is slower on IE with more input tags inside dom

My company provides an ERP solution that depends on using IE due to some incorrect decisions years ago (using behavior for dynamic html), so I can not use another browser in any way. And now it is limited to IE8. And about 40,000 installations are in the fields ...

To the problem:

Usually the page in our application contains about 150 - 200 input tags inside the dom. Using them using JavaScript is not a problem.

But: now we have a page (for only one client) with a huge table (about 1,500 rows in the table), where each row has about ten (editable) input fields inside some columns, so we have about 15,000 input tags inside the house. This single page uses jQuery, which is not used for the rest of the product.

First of all: scrolling a table (inside a div) is terribly slow on IE (sucks the whole processor).

Second (and my main problem now): if I want to change focus and / or select text inside one of the input tags, IE slows down to a crawl.

If I have a table with only 50 rows, everything works fine, but IE slows down the increase in the number of rows and input fields. If I only put textual information in the cells of the table, IE has no problems with it.

So, is this really an input field that causes a slowdown, but is there something like that?

I am open to suggestions - I tried to use editable divs, but I cannot force them to 100% emulate a single line input field (I need onblur events, click events, etc.). I am also currently thinking of making this single product page compatible with Chrome and using the Chrome Frame plugin for IE to display the page

FYI: all events, but the onblur event are logged in the table element. The onblur element is registered in all input fields within the line as soon as the user clicks on the input field (and the onblur event for the last active line is deleted).

Thank you for sharing some thoughts ...

Update I changed the code so that there were no input fields entered in the table. Only after activating the row, cells with editable content receive an input element. Adding / removing these input cells is quite fast (20-40 ms), but the problem with selecting and focusing on the field remains unchanged ... With a table with 190 lines, IE took about 1600 - 2100 ms to execute ". Focus ()" and ".select" on the input element inside the table. I am on my way - right now I believe that this only page is compatible with other browsers than IE and tell our client about installing the Chrome Frame plugin. Or another solution would be to program a rich client for this purpose - anything that takes longer than what is paid for ... Remember that the layout of the table works fine if there are not too many rows in this table ...

code:

Example table row:

<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>
+4
source share
1 answer

Without seeing the script in addition to HTML, I can offer only two things:

1) Profile, profile, profile. Either use a better browser (Chrome / Safari + Devtools or Firefox + Firebug can help), or try using some of the MS dev tools (I have no experience using these functions for profiling, but from what I remember, the MS script debugger can do this) or DynaTrace , which, it seemed to me, is very good for working with IE. Find what is slow and correct it.

2) Get rid of all input fields and convert cells to input fields when clicked. JQuery uses a delegate for this. Sort of:

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

This should eliminate almost any slowdown from the script. I am skeptical about the statements in the comments, stating that jQuery should “search” for the blurry element - this should be available for the event object, as I understand it. I don’t understand why jQuery will have to look for it, but maybe I missed something.

0
source

Source: https://habr.com/ru/post/1383665/

More articles:


All Articles