javascript - 高效渲染大量 "select"元素

Question

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

原始代码减去失败的实验(见下文)是 here .

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

我尝试过的事情:

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

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

Answer 1

是的，我会“懒惰地”生成和/或填充下拉菜单。

也就是说，只有当用户点击它们时才创建和填充下拉菜单，因为可能永远不会使用 2000 行中的几乎所有下拉菜单，对吧？

也许选择元素也不是这里最好的 UI，而是某种 HTML 菜单，如下所示:https://jqueryui.com/menu/只有当用户点击某种按钮来显示它时才会创建、填充和显示。