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

JavaScript - Is there a more efficient way to create option elements?

本文关键字：创建 选项 元素 方法 有没有 有效 JavaScript      更新时间：2023-09-26

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

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

我会完全放弃"创建选项"，并将研究更好的（从 UI 的角度来看）方法。类似于选择自动完成的东西（这只是一个例子）。

附言如果你真的希望你的用户通过滚动 10k 元素而受苦，我建议把这部分select.appendChild(option);排除在外。生成要追加的所有内容，并一次追加它们。

您可以使用

Option构造函数：

提供了一个构造函数用于创建HTMLOptionElement 对象（除了来自 DOM 的工厂方法，例如 createElement() ）：

Option(text, value, defaultSelected, selected)

当作为构造函数调用时，它必须返回一个新的 HTMLOptionElement对象（新的option元素）。

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

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

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

如果selected参数为真，则新对象 必须将其选择性设置为 true;否则 必须将选定性设置为 false，即使 defaultSelected论点是正确的。

在您的情况下，

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

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

我在下面给你一个jsperf：

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

相关文章：