Javascript 大量dom元素导致的性能问题

我有一个网页，我在一个循环中用同一个类重复了上千次div，因为浏览器引擎似乎卡住了

有没有办法改进一个包含大量dom元素的页面？还是dom元素上的无限滚动

<div class="test"> content 1</div>
<div class="test"> content 2</div>
<div class="test"> content 3</div>
<div class="test"> content 4</div> //so on like 10000 same divs in loop

内容1
内容2
内容3
内容4//如此类推，循环中有10000个相同的div

如果我是你，我会首先放置一组填充屏幕的div。当你滚动到页面底部时，你可以看到另外两个元素。然后重复这个过程。如果达到所需的div数量，可以从一开始就开始追加元素。

可以加载前20个左右的元素，其他元素可以通过AJAX方法异步加载，通过滚动或显示底部元素之一触发。无论如何，不建议卸载顶部DOM。最佳性能实践的一般建议是避免使用大量带有ID标记的DOM元素

---

更多信息请参见

如果您是无限滚动，您可以在dom元素离开页面时删除它们，并在它们再次进入页面时重新添加。搜索“虚拟滚动”可能会发现一些有用的信息。另外，如果在循环中添加div，是否意味着每次迭代都会向DOM添加一个div？如果是这样的话，第一个快速的胜利就是一次添加多个/所有div以防止回流。e、 g.使用

document.createDocumentFragment（）

当然，上面提到的虚拟滚动解决方案将是最优雅的，但是在每次迭代中添加是第一个瓶颈