Geek Answers Handbook

Why is this javascript so slow in IE when all this does is change the selection list?

I am working on a list with several choices in which you can select items, and then click the Up or Down button, which will allow you to reorder these items in the list.

I have a simple standalone example:

<html> <head> <title>Example</title> <script src="https://www.google.com/jsapi"></script> <script> google.load('jquery', '1.4.1'); </script> </head> <body> <select id="selectedDataPoints" multiple="multiple"> <option>Pig</option> <option>Duck</option> <option>Dog</option> <option>Zebra</option> <option>Snake</option> <option>Giraffe</option> <option>Cow</option> </select> <input type="button" id="btnReorderUp" value="Up" /> <input type="button" id="btnReorderDown" value="Down" /> </body> </html> <script type="text/javascript"> var DataPointSelector = (function() { var $selectedList = $('#selectedDataPoints'); $('#btnReorderUp').click(function(e) { moveUp(); e.preventDefault(); }); $('#btnReorderDown').click(function(e) { moveDown(); e.preventDefault(); }); function moveUp() { var select = $selectedList[0]; for (var i = 1, n = select.options.length; i < n; i++) if (select.options[i].selected && !select.options[i - 1].selected) select.insertBefore(select.options[i], select.options[i - 1]); } function moveDown() { var select = $selectedList[0]; for (var i = select.options.length - 1; i > 0; i--) if (select.options[i].selected && !select.options[i + 1].selected) select.insertBefore(select.options[i + 1], select.options[i]); } } ()); </script>

However, the Up / Down button takes literally 3-8 seconds to take effect in IE7 / 8. The first click will sometimes be quick, but after that, the selection list needs to be updated with new positions (especially if you have a couple of elements).

This issue is missing in Chrome / FF. I would not have thought that this simple reordering would be so intense!

Does anyone have any info that could help me speed up the moveUp / moveDown functions ?!

+7
performance javascript jquery selectlist
source share
2 answers

Instead of moving existing DOM elements, recreate the entire <select> element, including all child elements for IE.

+4
source share

IE is slow, slow, slow. Therefore, you should check your code to minimize unnecessary operations.

@ Arron Digullah idea is good. But you can also reduce processor time due to the following changes:

 function moveUp() { var select = $selectedList[0]; for (var i = 1, n = select.options.length; i < n; i++) var selected = select.options[i], selectedPrior = select.options[i - 1]; // Don't locate obj/array element more than once if (selected.selected && !selectedPrior.selected) { select.insertBefore(selected, selectedPrior); break; // Since we have found the right elements, don't do } // any further checking }

Added: Hmmm, now I see that you can select several items. So you need to move some elements, yes? In this case, the break statement is not right.

Is the IE UI layer exciting? - IE does not update the appearance of the screen until the JS thread completes. The workaround is to start the timer from 0 sec. This will lead to the IE rendering engine and turn on the screen for updating.

+2
source share

More articles:


All Articles