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>。通常，这个附加不是问题，但由于它必须在循环中多次执行此操作，因此需要一段时间。（此外，此功能被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);
}

Answer 3

为了获得顺畅的表现，我同意@ jonathon-sampson和@timrwood对DOM的一个修改比许多人更好。

也就是说，提高性能的另一种方法是尽量减少插入DOM的html数量。在你的情况下，如果可能的话，我会尝试将每个元素剪切为单个<span>块，使用CSS类来封装常见的样式元素。

从：

html += '<span><img src="images/square_2.png" style="display: none;"/></span>';

为：

html += '<span class='myclass'></span>';

正如上面提到的评论，如果你可以避免所有这些，并处理DOM服务器端的创建，那真的是'最好'的解决方案。

如何加快<img/>追加（）

3 个答案: