有效地渲染大量“选择”元素

Question

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

vanilla代码，减去失败的实验（见下文）是here。

避免“对数据进行分页”和“选择中没有这么多选项”的建议，我可以编写附加/呈现代码的最有效方式是什么，假设我有没有合理的理由显示那么多数据并拥有那么多选项？就我而言，Firefox是我唯一关心的平台。

我尝试过的事情：

• 使用async loop将行追加到表中（比常规循环慢，奇怪的是没有渲染中间结果）
• 构建一个表示表格主体的字符串，并在一次调用中将其插入DOM（几乎相同的性能）
• 而不是插入整个选项列表，插入单选项“select”元素，然后在“select”元素获得焦点时填充整个列表（可能是因为有人试图更改它）。这对于初始渲染来说实际上非常高性能，但是然后用完整列表填充元素会导致一些奇怪的行为，失去焦点并且实际上永远无法“打开”选择元素。

现在我的默认假设是第三种选择是要走的路，我需要弄清楚如何对已经填充的内容进行一些记录。但我的怀疑是，有一个明显更好/更快/更惯用的方式来做到这一点。有吗？

Answer 1

是的，我会“懒洋洋地”生成和/或填充下拉列表。

也就是说，只有在用户点击它们时才创建并填充下拉列表，因为可能几乎所有2000行中的所有下拉列表都不能正确使用？

也许select元素也可能不是最好的UI，而是某种类似的HTML菜单：https://jqueryui.com/menu/只有在用户点击某种按钮才能显示时才会创建，填充和显示它