1

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

所以，这里的代码片段：

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

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

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

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

4

3 回答 3

5

您可以做的最好的事情是等到您完成循环后再对 DOM 进行更改。您当前的方法将锤击 DOM 使其提交，您当然不希望这样。请考虑使用文档片段。

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

于 2012-05-21T23:38:04.883 回答
5

您可以只使用字符串，直到需要附加它。

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);
}
于 2012-05-21T23:41:47.110 回答
0

为了流畅的性能，我同意@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 服务器端的创建，那确实是“最佳”解决方案。

于 2012-05-22T01:32:59.480 回答