为什么这个javascript在IE中运行这么慢，而它所做的只是修改一个选择列表？
为什么这个javascript在IE中运行这么慢，而它所做的只是修改一个选择列表？
提问于 2010-11-16 23:37:50
我正在开发一个多选列表，您可以在其中选择项目，然后单击“向上”或“向下”按钮，以允许您在列表中对这些项目进行重新排序。
我有一个简单的自包含示例：
<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>然而，Up/Down按钮在IE7/8中确实需要3-8秒才能生效。第一次点击有时会很快，但之后选择列表需要很长时间才能更新到新的位置(特别是当你选择了几个项目时)。
Chrome/FF中不存在此问题。我不会想到这种简单的重新排序会如此密集！
谁有任何信息可以用来帮助我加速moveUp/moveDown函数？！
回答 2
Stack Overflow用户
发布于 2010-11-16 23:42:57
不是移动现有的DOM元素，而是重新创建整个<select>元素，包括IE的所有子元素。
Stack Overflow用户
发布于 2010-11-16 23:50:54
IE很慢，很慢，很慢。因此，您应该检查您的代码以最小化不必要的操作。
@Arron Digulla的想法很好。但您也可以通过以下更改来最小化处理器时间：
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
}添加:嗯，我现在看到可以选择多个项目。所以你需要移动多个项目，对吗？在这种情况下，break语句是不正确的。
IE UI层是否让您陷入困境？--在JS线程结束之前，IE往往不会更新屏幕的外观。解决方法是以0秒运行计时器。这将让位于IE渲染引擎，并使屏幕能够更新。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4195865
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号