javascript - 如何加速 append()

Question

如果这是一个新手问题，我很抱歉，但我对 Javascript 不是很了解......

所以，这是代码片段:

function insertSquares() {
    for (i = 0; i < 113; i++) {
        $('#wrapper').append('<span><img src="images/square_2.png" style='display: none;'/></span>');
    }
}

如您所见，我有一个 append <span> 的循环和一个 <img>到 <div>每次重复代码。通常，此 append 不是问题，但由于它必须在循环中多次执行此操作，因此需要一段时间。 (另外，这个函数被 setInterval() 调用了很多次，它减慢了整个网页的速度)

当使用 JSLitmus 对这个函数进行基准测试时，它每秒运行 5 次操作，我想加快速度。我已经考虑过使用循环将数据添加到数组中(而不是每次都通过循环追加)，然后在循环之外时，仅将所有数据追加一次，但这似乎并没有加快速度显着加快流程。

那么，是否有一些我没有想到的方法可以加快这段代码的速度？我想不出更有效的方法来加载和显示这么多相同的图像。

Answer 1

您能做的最好的事情就是等到循环结束后再对 DOM 进行更改。您当前的方法将使 DOM 进入提交状态，而您当然不希望这样。考虑 Document Fragments相反。

John Resig 之前曾写过关于 DOM 文档片段的文章，但这篇文章仍然是一篇很好的入门文章。您可以在网上找到它 http://ejohn.org/blog/dom-documentfragments/ .