Question

我试图创建一个包含10,000个选项的html选择列表。由于数量，我需要它尽可能高效。我已经开始工作了，但我觉得效率很低

var select = document.createElement("select");
document.body.appendChild(select);

for (var i = 1; i <= 10000; i++) {
    var option = document.createElement("option");
    var optionText = option.createTextNode("option" + i);
    option.value = "option" + i;
    option.appendChild(optionText);
    select.appendChild(option);
}

我读过太多查询DOM可能会很昂贵。有更简单的方法吗？

Answer 1

我会从另一个角度看待这个问题。作为一个用户，我甚至可以容忍生成此列表的两秒钟（即使在坏的手机上也很可能只需要不到2秒），但强迫我从10k元素的下拉列表中选择一个元素 - 这个是一种矫枉过正。

我会完全放弃“创建一个选项”，并将调查更好的（从UI角度来看）方法。像select autocomplete之类的东西（这只是一个例子）。

P.S。如果你真的希望你的用户通过滚动10k元素而受苦，我建议把这部分select.appendChild(option);从循环中取出来。生成您想要追加的所有内容并立即附加它们。

Answer 2

您可以使用Option constructor：

提供构造函数来创建HTMLOptionElement 对象（除了DOM的工厂方法之外） createElement()）：
Option(text, value, defaultSelected, selected)
当作为构造函数调用时，它必须返回一个新的   HTMLOptionElement对象（新的option元素）。

如果第一个参数不是空字符串，则新对象必须   将Text节点作为唯一的子节点，其数据值为。{3}   那个论点。否则，它必须没有孩子。

如果存在value参数，则为新对象   必须使用参数的值设置value属性   作为它的价值。

如果defaultSelected参数为true，则为新参数   对象必须设置selected属性，没有值。

如果selected参数为true，则为新对象   必须将selectedness设置为true;否则   selectedness必须设置为false，即使是   defaultSelected论证是真的。

在你的情况下，

select.appendChild(new Option("option" + i));

Answer 3

如果你想要高性能，请使用innerHTML

我在下面给你一个jsperf：

http://jsperf.com/js-appendchild/3

JavaScript - 是否有更有效的方法来创建选项元素？

3 个答案: