javascript jQuery 是否在每个循环内使用创建文档片段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14615484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Does jQuery use create document fragment inside each loops?
提问by Matt Whitehead
So I've read that jQuery uses document fragments internally to make rendering faster. But I am wondering if anyone knows if jQuery would use createDocumentFragment in this situation where I'm appending img elements to the DOM using the each loop?
所以我读到 jQuery 在内部使用文档片段来加快渲染速度。但我想知道是否有人知道在我使用 each 循环将 img 元素附加到 DOM 的情况下，jQuery 是否会使用 createDocumentFragment？
var displayArray = []; // Lots of img elements
$.each(displayArray, function()
{
$('#imgSection').append(this);
});
Or would I need to use this code in order to reduce the number of browser reflows?
或者我是否需要使用此代码来减少浏览器回流的次数？
var displayArray = []; // Lots of img elements
var imgHolder = $('<div/>');
$.each(displayArray, function()
{
imgHolder.append(this);
});
$('#imgSection').append(imgHolder);
Also, the displayArray is populated by other code, not shown here, that creates img elements based off of paths in a JSON file.
此外，displayArray 由其他代码填充，此处未显示，这些代码根据 JSON 文件中的路径创建 img 元素。
Thank you for any advice.
谢谢你的任何建议。
回答by epascarello
Why all the looping to add elements?
为什么要循环添加元素？
$('#imgSection').append("<div>" + displayArray .join("") + "</div>");
$('#imgSection').append("<div>" + displayArray .join("") + "</div>");
Okay so it is elements.
好的，它是元素。
The quickest way is going to be using append with the array itself.
最快的方法是将 append 与数组本身一起使用。
$("#out").append(elems);
other option using one div to append is
使用一个 div 追加的其他选项是
var div = $("<div/>").append(elems);
$("#out").append(div);
BUT appending a lot of images at once is going to be bad unless they are preloaded. That will be a bunch of http requests being queued up.
但是，除非预先加载，否则一次附加大量图像会很糟糕。那将是一堆正在排队的 http 请求。
回答by Alnitak
No, if you use
$.each()then jQuery won't use aDocumentFragment- jQuery has no way of knowing what you're going to do inside the loop and each iteration is independent.The point of the document fragment is that you don'thave to wrap all your new elements up in a wrapper element as you've done in your second example to limit the reflows.
jQuery apparently willuse a document fragment if you pass an array of elements directly to
.append()instead of iterating over them yourself.
不，如果您使用，
$.each()那么 jQuery 将不会使用 aDocumentFragment- jQuery 无法知道您将在循环内做什么，并且每次迭代都是独立的。文档片段的要点是，您不必像在第二个示例中那样将所有新元素包装在包装器元素中以限制回流。
如果您将元素数组直接传递给而不是自己迭代它们，jQuery显然会使用文档片段
.append()。
回答by Bergi
If you really care about reflows (and have noticed the displaying to be slow), you can hide and show the image-holding element:
如果你真的关心回流（并且注意到显示很慢），你可以隐藏和显示图像保持元素：
var displayArray = […]; // Lots of img elements
var holder = $('#imgSection').hide();
for (var i=0; i<displayArray.length; i++)
holder.append(displayArray[i]);
holder.show();
