我一直致力于为这里的一些科学家研究蛋白质/ DNA序列比对工具。它最初是作为对齐文件的简单表格视图。所以我会在每个序列中有一个包含字符串的表行。但是他们基本上希望能够从组件本身进行对齐,并且突然间序列中的每个字符都必须是span元素。
页面上只有少数序列,浏览器保持平滑。但是当序列的数量达到大约60(> 100k DOM元素)时,浏览器开始突然出现。通过chug我的意思是滚动不再平滑,滚动是这个页面上的重要操作。
事情是可以控制的,但我的客户告诉我他们可能想要加载数千个序列。
所以我的问题是你们如何处理大量的DOM元素?我一直在考虑使用Canvas或Flash或其他非DOM解决方案,但我想知道是否有办法将它保存在DOM中。
答案 0 :(得分:1)
元素重用!不是为每个序列字符创建span
,而是为当前显示创建足够的内容,加上1页以上的缓冲区。首先,将数据存储在JavaScript中(例如JS数组)。在加载时填充数组中的初始元素集。然后,当元素滚动页面时,重复使用一行DOM元素,方法是将它们移动到页面底部,然后通过JavaScript填充数据。
如果您想维护浏览器滚动条定位,请创建一对大小合适的额外div,其高度会动态变化,以“填充”页面的其余部分。
答案 1 :(得分:1)
尝试不显示所有这些元素而是显示部分,在滚动事件上设置处理程序以及何时最后或第一个可见元素显示另一部分元素并隐藏另一个不再重要的元素(可见性:隐藏)