高效渲染大量“选择”元素

Question

我正在编写一个 Web 应用程序，它显示大量数据行（目前约为 2000 行），每行数据都有一个下拉“选择”元素，其中包含约 100 个选项。 默认情况下可以选择这些选项中的任何一个。 我正在客户端生成所有实际的 DOM 元素。 我的问题：在我相对较新的机器上渲染这个野兽大约需要 4 秒，这确实不是最理想的。 我知道问题出在所有选择元素上，因为用一些静态文本或单选项列表替换它们会导致渲染时间几乎难以察觉。

原始代码，减去失败的实验（见下文）是这里。

避免“对数据进行分页”和“选择中没有太多选项”的建议，假设我确实有正当理由显示，那么我可以编写追加/渲染代码的“最有效”方式是什么那么多数据，有那么多选择？就我的目的而言，Firefox 是我唯一关心的平台。 我尝试过的事情：

使用

异步循环
• 将行追加到表中（比常规循环慢，并且奇怪的是没有呈现中间结果） 构建一个表示表主体的字符串，并在一次调用中将其插入到 DOM 中（几乎相同的性能）
• 不要插入整个选项列表，而是插入一个单选项“select”元素，然后在“select”元素获得焦点时填充整个列表（可能是因为有人试图更改它）。 对于初始渲染来说，这实际上是相当高性能的，但随后用完整列表填充元素会导致一些奇怪的行为，失去焦点并且永远无法真正“打开”选择元素。
现在我的默认假设是第三个选项是可行的方法，我需要弄清楚如何对已经填充的内容进行一些簿记。 但我怀疑有一种明显更好/更快/更惯用的方法来做到这一点。 有吗

Answer 1

也就是说，仅在用户单击下拉列表时创建并填充下拉列表，因为可能 2000 行中的几乎所有下拉列表都不会被使用，对吗？

也许 select 元素也可能不是最好的 UI，而是某种 HTML 菜单，如下所示：

https://jqueryui.com/menu/

仅当用户单击某些元素时才会创建、填充和显示一种显示它的按钮。

Answer 2

我最终所做的是在

鼠标悬停

上延迟加载项目，而不是单击时加载。原因有两个：

这会带来更流畅的用户体验，因为当用户看到渲染的选项下拉列表时，大多数（如果不是全部）选项子项都已添加。

1. Chrome 似乎有一个错误，即选择 UI 元素上的初始单击不会触发单击事件。因此，用户实际上必须单击该元素两次才能看到任何选项。
我的代码草稿如下：

    function createItemChooser() {
        const root = document.createElement("select");
        const freeFormChoice = document.createElement("option");
        freeFormChoice.innerText = "Default";
        freeFormChoice.setAttribute("value", -1);
        root.appendChild(freeFormChoice);

        root.onmouseover = (event) => {
            if (root.children.length < (MONSTER.length + 1)) {
                MONSTER.forEach((item) => {
                    const choice = document.createElement("option");
                    choice.innerText = item;
                    root.appendChild(choice);
                });
            }
        };

        return root;
    }