如何加速<img> append()

Question

如果这是一个新手问题,我很抱歉,但是当谈到Javascript时我不是很了解...

那么,这是代码片段:

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

正如你所看到的,我有一个循环,追加<span>和<img>到<div>该代码每次重复.通常,这个附加不是问题,但由于它必须在循环中多次执行此操作,因此需要一段时间.(此外,此功能被a多次调用setInterval(),它会减慢整个网页的速度)

使用JSLitmus对此函数进行基准测试时,它运行5次/秒,我想加快速度.我已经考虑过使用循环来将数据添加到数组中(而不是每次都通过循环追加)然后在循环外部时,仅将所有数据附加一次,但这似乎不会加速以明显的金额上升过程.

那么,有没有什么方法可以加速我没有想到的代码？我想不出一种更有效的方法来加载和显示相同数量的图像.

Answer 1

你可以做的最好的事情是等到你完成循环以对DOM进行更改.您当前的方法将锤击DOM提交,您当然不希望这样.请考虑使用Document Fragments.

John Resig在一段时间后写了关于DOM Document Fragments的文章,但这篇文章仍然是一本很好的入门读物.您可以在http://ejohn.org/blog/dom-documentfragments/在线找到它.

Answer 2

你可以使用字符串,直到你需要附加它.

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