JavaScript - 有没有更有效的方法来创建选项元素？答案

【问题标题】：JavaScript - Is there a more efficient way to create option elements?JavaScript - 有没有更有效的方法来创建选项元素？
【发布时间】：2025-11-26 16:10:01
【问题描述】：

我正在尝试创建一个包含 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 可能会很昂贵。有没有更简单的方法来做到这一点？

【问题讨论】：

代价高昂的事情是重复从 DOM 读取然后更改 DOM。仅仅改变 DOM 本身并没有那么昂贵。但是，从 UX 方面来看，如果你给他们一个 10000 项选择，你的用户会讨厌你。带着热情。在你的情况下，我会非常努力想出一个替代的 UI 解决方案。
请注意，最好在末尾附加select，一旦它拥有所有options。

标签： javascript algorithm performance loops dom

【解决方案1】：

您可以使用Option constructor:

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

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

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

如果 defaultSelected 参数为真，则新的对象必须有一个没有值的selected 属性集。

如果selected 参数为真，则新对象必须将其 selectedness 设置为 true；否则 selectedness 必须设置为 false，即使 defaultSelected 参数为真。

在你的情况下，

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

【讨论】：

【解决方案2】：

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

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

P.S.如果您真的希望您的用户因滚动 10k 元素而受苦，我建议您将这部分 select.appendChild(option); 排除在循环之外。一次生成所有你想追加的内容并追加它们。

【讨论】：

感谢您指出这一点。您可以显示的选项数量是否有 UX 限制？ 1000还是太多了吗？ 100？如果您需要在下拉列表中存储城市列表怎么办
没有硬性限制，也就是说你不能说145太多，但是140就可以了。这主要是一个特定的人可以忍受的程度。我会说（但我不是 UI 专家）如果滚动列表大于屏幕的 3/4 - 这太多了。如果您需要城市列表，我会在开始时要求一个人选择一个国家（如果您想去美国孟菲斯，选择埃及孟菲斯会很愚蠢）。然后我会允许人们输入开头并为他们自动完成其他内容。

【解决方案3】：

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

下面我给你一个jsperf：

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

【讨论】：