Javascript JQuery不会在每次迭代中追加以避免DOM重画

我有这个jquery代码，它可能会导致DOM在迭代的每一步都重新绘制。 我怎么能只做一次

$.each(d.sponsoren, function(k,v) {
        $("#sponsoren").parent().append( $("<div/>").append($("<a/>").attr("href", v.l).append($("<img/>").attr("src", v.im).css("margin","1").css("border","0"))) );
    });

$。每个（d.发起人，函数（k，v）{
$（“#sponsoren”）.parent（）.append（$（“”）.append（$（“”）.attr（“href”，v.l.）.append（$（“将dom节点保留在内存中，直到bucle完成，然后将内存中的节点附加到dom中

var $tempnode = $('<div />');
$.each(d.sponsoren, function(k,v) {
        $tempnode.append( $("<div/>").append($("<a/>").attr("href", v.l).append($("<img/>").attr("src", v.im).css("margin","1").css("border","0")));
});
$("#sponsoren").parent().append( $tempnode );

var$tempnode=$（“”）；
美元。每个（d.赞助商，功能（k，v）{
$tempnode.append（$（“”）.append（$（“”）.attr（“href”，v.l）.append（$（“收集数组中的元素，然后追加数组：

var elements = [];
$.each(d.sponsoren, function(k,v) {
         elements.push($("<div/>").append($("<a/>").attr("href", v.l).append($("<img/>").attr("src", v.im).css("margin","1").css("border","0")))));
    });
$("#sponsoren").parent().append(elements);

var元素=[]；
美元。每个（d.赞助商，功能（k，v）{
elements.push（$（“”）.append（$（“”）.attr（“href”，v.l）.append（$（“
var-markup=”“）；
美元。每个（d.赞助商，功能（k，v）{
标记+=“”；
});
$（“#赞助商”）.parent（）.append（标记）；
对我来说，最简单的解决方案是从一个具有
display:none
的
Div开始，然后将元素附加到该
Div
，一旦完成，然后设置
display:block
。现在没有重画或闪烁效果。
这在很大程度上取决于你的内容以及它对绘画引擎的压力。你可以缓冲所有HTML最大父级的内容，并在最后将其全部转储到该父级。这可能是确保所有操作同时发生的唯一方法。即使缓冲jQuery命令，然后循环这些命令，也可能不会同时进行。您必须锁定所有其他命令（单击）这可能会触发绘图tho，否则可能会弄乱绘图结果。同意。与我在评论中提到的相同：）如果要执行单个附加，则只需要一个元素，否则将有多个附加，除非使用.html（）函数，但追加文本不如DOM操作最佳，请选择您的方式这仍然非常依赖于内容的大小。我以前在OP案例中遇到过问题。最好收集所有内容，因为这些DOM更新会导致绘图引擎希望完全重新提交
文档
DOM节点的内容，这在大内容的情况看起来会非常不稳定：）@Allendar您能进一步解释一下吗？正在创建
div
元素及其子元素，但在循环完成之前不会将其推送到DOM。仅仅创建元素是否会触发a
重绘
或
回流
？不完全。从本机C角度来看，您收集的切片数据需要再次解包by解析器，这比将整个HTML字符串转储到解析器并让其重新分析要花费的时间要多得多。对于指数，我的意思仍然是毫秒的分数tho。但在大数据的情况下，它可能会导致口吃。这个故事实际上就是Google分叉Webkit闪烁的原因。问题是JavaScript和DOM彼此平行包装，这使得从它们到彼此的每个操作都会产生所谓的字节开销。导致行为迟缓或者我错过了对你的上一个问题的评论；
回流
非常依赖于应用的样式。例如，绝对定位总是会导致
重新绘制
样式仍然会导致
重新绘制
（谷歌为Paul Irish博客，应该会显示他对此事的一些评论），这是我的一点默认（不好意思：P）我记得Paul的演示还显示了新CSS定义中转换和转换之间的巨大差异，其中某些操作会严重过载绘图引擎，导致打嗝。append（elements）会触发每个元素的DOM事件（在Chrome上测试），所以这不起作用。这个答案与marcial的答案几乎相同，除了缓冲区到字符串，marcial的缓冲区直接到元素。仅供参考，DOM操作要比文本附加好得多，只要是原始字符串，它应该比使用DOM做任何事都要快。原始JavaScript将比使用XML做任何事都要快在循环中使用DOM。我无法确认在DOM tho上执行的最终附加的影响。但我无法想象这比每次使用DOM元素慢：）这与在大量HTML块上执行
display:none；
是一样的。这会使绘制变得非常混乱，因为HTML确实会从绘制的DOM画布上剥离出来。我们应该庆幸这些天我们拥有火箭驱动的JavaScript引擎：D
var markup = "";
$.each(d.sponsoren, function(k,v) {
    markup += "<div><a href='" + v.l + "'><img src='" + v.im + "' style='margin:1; border:0' /></a></div>";
});

$("#sponsoren").parent().append(markup);