Javascript 高效地呈现大量的；选择"；元素

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

普通代码，减去失败的实验（见下文）是

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

我尝试过的事情：

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

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

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

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

---

也许select元素可能不是这里最好的UI，而是类似这样的HTML菜单：只有当用户单击某种按钮来显示它时，才会创建、填充和显示该菜单。

试试

slickGrid

。这太棒了，它会帮助你。这主要是我自己的教诲；我对理解底层技术感兴趣。你知道这些问题的slickGrid解决方案是什么吗？他们使用虚拟渲染。这意味着它们只呈现用户可见的行。他们也有分页。是否有一些关于“虚拟渲染”在实践中是如何工作的，以及如何在他们的库之外实现的描述？正如我所说，我对底层技术很感兴趣。如果你使用“无限滚动”之类的东西，或者沿着这些线条，你基本上不会向DOM中添加元素，直到页面在经过一些实验后达到某个滚动位置（请参阅以获取相关信息），延迟生成选择元素会将渲染时间降低到可接受的级别。要使其更快，似乎需要通过无限滚动式机制惰性地生成实际的表行。替换元素时仍然会出现取消选择的问题，因此它不是完全透明的，但是如果使用select元素，这是不可避免的。