Javascript 如何加速<；img>；附加（）

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

下面是代码片段：

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

函数insertSquares（）{
对于（i=0；i<113；i++）{
$（'#包装器'）。附加（''）；
}
}

如您所见，我有一个循环，每次重复代码时，它都会在

后面追加一个

。通常情况下，这个附加不是问题，但由于它必须在循环中多次执行此操作，因此需要一段时间。（另外，

setInterval（）

会多次调用此函数，从而降低整个网页的速度）

当使用JSLitmus对这个函数进行基准测试时，它的运行速度是每秒5次，我想加快速度。我已经考虑过使用循环将数据添加到数组中（而不是每次通过循环进行追加），然后在循环之外只追加一次所有数据，但这似乎并没有显著地加快处理速度

---

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

您可以做的最好的事情是等到完成循环后再对DOM进行更改。您当前的方法将使DOM提交，您当然不希望这样。考虑一下。

---

John Resig在一段时间前写过DOM文档片段，但这篇文章仍然是一本不错的入门书。您可以在网上找到它。

您可以做的最好的事情是等待循环完成后再对DOM进行更改。您当前的方法将使DOM提交，您当然不希望这样。考虑一下。

---

John Resig在一段时间前写过DOM文档片段，但这篇文章仍然是一本不错的入门书。您可以在网上找到它。

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

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);
}

函数insertSquares（）{
var html=''；
对于（变量i=0；i<113；i++）{
html+=''；
}
$（'#wrapper'）.html（html）；
}

在需要附加字符串之前，您可以一直使用字符串

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);
}

函数insertSquares（）{
var html=''；
对于（变量i=0；i<113；i++）{
html+=''；
}
$（'#wrapper'）.html（html）；
}

对于流畅的性能，我同意@jonathon sampson和@timrwood的观点，即对DOM进行一次修改比多次修改更可取

也就是说，提高性能的另一种方法是最小化插入DOM的html量。在您的例子中，如果可能的话，我会尝试将每个元素缩减为一个

块，使用CSS类封装常见的风格元素

发件人：

html+=''；

致：

html+=''；

---

如上所述，如果您可以避免所有这一切，并处理DOM服务器端的创建，这确实是“最好”的解决方案。

对于平滑的性能，我同意@jonathon sampson和@timrwood的观点，对DOM进行一次修改比多次修改更可取

也就是说，提高性能的另一种方法是最小化插入DOM的html量。在您的例子中，如果可能的话，我会尝试将每个元素缩减为一个

块，使用CSS类封装常见的风格元素

发件人：

html+=''；

致：

html+=''；

---

---

如上所述，如果您可以避免所有这一切，并处理DOM服务器端的创建，这确实是“最佳”解决方案。

首先，缓存

$（“#包装器”）

，这样jQuery就不必在每次迭代中都找到它。因此，您将相同的字符串追加113次？这有语法错误。对字符串和样式属性使用单引号，而不转义它们。但不确定这是否是您的实际代码。您可能希望停止使用jquery解析html，只通过dom创建元素。@AlienWebguy-我没有想到缓存包装器，它确实有助于提高速度，但只起到了很小的作用。谢谢你的提示。首先，缓存

$（“#wrapper”）

，这样jQuery就不必在每次迭代中都找到它。所以你将相同的字符串追加113次？这会导致语法错误。对字符串和样式属性使用单引号，而不转义它们。但不确定这是否是您的实际代码。您可能希望停止使用jquery解析html，只通过dom创建元素。@AlienWebguy-我没有想到缓存包装器，它确实有助于提高速度，但只起到了很小的作用。谢谢你的提示。这也是我要尝试的第一件事。有趣的是，我没有想到这一点。我对您的代码进行了基准测试，但不幸的是，与我的相比，它执行任务的速度并没有明显加快。不过，我也会在我的大型程序中尝试它，以防它在较大的工作负载下比这个较小的示例更快。这也是我要尝试的第一件事。有趣的是，我没有想到这一点。我对您的代码进行了基准测试，但不幸的是，与我的相比，它执行任务的速度并没有明显加快。不过，我也会在我的大型程序中尝试它，以防它在较大的工作负载下比这个较小的示例更快。嗯，这看起来是一个潜在的解决方案，但即使有你的链接和一些研究，我也很难理解它并将其集成到我的代码中。这可能需要我一点时间去把握，我会回来的…@inconu你花时间去把握是值得的。实际上，您创建了一个容器，可以将一堆元素推到该容器上。完成所有操作后，只将该容器插入DOM。这使得浏览器在循环浏览时不必重新创建DOM的部分

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