高效渲染大量的“select”元素

Question

我正在编写一个Web应用程序，用于显示大量数据行（目前约2000行），每行都有一个下拉“选择”元素，其中包含约100个选项。其中任何一个选项都可以默认选择。我在客户端生成所有实际的DOM元素。我的问题是：呈现此内容需要大约4秒钟，这在我相对较新的计算机上非常不理想。我知道问题特别出现在所有选择元素上，因为用一些静态文本或单选列表替换它们会导致呈现时间几乎不可感知。

原始代码（去除失败的实验）在这里。

避免“分页数据”和“不要在选择框中使用太多选项”的建议，假设我确实有正当理由显示那么多数据并具有那么多选项，我可以编写最有效的附加/呈现代码吗？ 对于我的目的，Firefox是我关心的唯一平台。

我尝试过的事情：

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

现在我的默认假设是第三个选项是正确的方法，我需要弄清楚已经填充了什么。 但我怀疑是否有更好/更快/更惯用的方法来做到这一点。 有吗？

- Bryce

---

尝试使用 slickGrid。它非常棒，会帮助你的工作。 - Gyandeep

他们使用虚拟渲染。这意味着他们只渲染用户可见的行。他们还有分页功能。 - Gyandeep

有没有关于“虚拟渲染”在实践中如何工作以及如何在他们的库之外实现的描述？正如我所说，我对底层技术很感兴趣。 - Bryce

如果您使用类似“无限滚动”或类似的东西，基本上直到页面达到某个滚动位置，您才会向DOM添加元素（有关此信息，请参见https://dev59.com/CHE95IYBdhLWcg3wDpgG） - drew_w

好的，那么另一个选项就是只有一个下拉菜单，并使用DOM将其移动到当前选择的行。 - Matthew Lock

Answer 1

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

也就是说，仅在用户单击它们时创建并填充下拉菜单，因为2000行中几乎所有下拉菜单都不会被使用，对吧？

也许在这里选择元素不是最好的UI，而是一些类似于HTML菜单的东西，例如：https://jqueryui.com/menu/ ，只有当用户单击某种按钮以显示它时才会被创建、填充和显示。

- Matthew Lock

---

经过一些实验，惰性生成选择元素将渲染时间降至可接受水平。要使其更快，似乎需要通过无限滚动类型机制惰性生成实际的表行。当元素被替换时仍然存在取消选择的问题，因此如果我使用选择元素，则这是不可避免的，但据我所知，它并不完全透明。 - Bryce