Performance 如何处理页面上成千上万的DOM元素？

我一直在为一些科学家研究蛋白质/DNA序列比对工具。它一开始只是它们对齐文件的一个简单表视图。因此，对于每个序列，我将有一个表行，其中包含一个字符串。但是他们基本上希望能够从组件本身进行对齐，突然序列中的每个字符都必须是一个span元素

页面上只有少量序列，浏览器仍保持平滑。但是当序列的数量达到60个左右（>100k DOM元素）时，浏览器就开始运行了。我的意思是，滚动不再是平滑的，滚动是这个页面上的一个重要操作

事情是可以管理的，但我的客户刚刚告诉我，他们可能想加载数千个序列到这个东西

---

所以我的问题是你们如何处理大量的DOM元素？我一直在考虑使用Canvas、Flash或其他非DOM解决方案，但我想知道是否有办法将其保留在DOM中。

元素重用！与其为每个序列字符创建一个

span

，不如为当前显示创建足够的数据，再加上一个上下缓冲区，比如说，一页。首先，将数据存储在JavaScript中（例如JS数组）。在加载时填充数组中的初始元素集。然后，当元素滚动离开页面时，通过将DOM元素移动到页面底部并通过JavaScript填充数据来重用大量DOM元素

---

如果要保持浏览器滚动条的位置，请创建一对大小合适的额外div，其高度会动态变化，以“填充”页面的其余部分。

尝试显示部分，而不是所有这些元素，在scroll事件上设置处理程序，当它最后或第一个可见元素时，显示元素的另一部分并隐藏不再重要的另一部分（可见性：隐藏）

哪个浏览器？你试过吗？我认为它即使在非常大的文档上也表现得非常好……在可滚动的div中进行简单的虚拟化怎么样？动态创建、附加和删除元素？如此。答案是一个页面上不应该有那么多的元素。从本质上讲，规范中的DOM元素很重。您应该一次只显示一个节，并在运行时删除旧节点。