使用文档片段真的可以提高性能吗？ [英] Does using a document fragment really improve performance?

问题描述

我对JS的表现有疑问。

I've got a doubt regarding performance in JS.

说，我有下一个代码：

var divContainer = document.createElement("div"); divContainer.id="container";
var divHeader = document.createElement("div"); divHeader.id="header";
var divData = document.createElement("div"); divData.id="data";
var divFooter = document.createElement("div"); divFooter.id="footer";
divContainer.appendChild( divHeader );
divContainer.appendChild( divData );
divContainer.appendChild( divFooter );
document.getElementById("someElement").appendChild( divContainer );

此代码只为其他一些函数创建shell来创建网格，创建网格的过程是非常复杂和许多验证，目前我使用2种方法填充网格，一个在数组变量中创建整个html，另一个创建元素并将它们附加到 documentFragment 。

This code just creates the shell for some other functions to create a grid, the process to create the grid is very complex and with many validations and currently I'm using 2 methods to fill the grid, one creating the whole html in an array variable and the other one creating elements and appending them to a documentFragment.

我的问题是，如果在使用片段时性能确实有所改善，我理解它们 - 它们管理内存中的元素，所以它们不是因此，附加到文档，不会触发DOM重新计算和其他令人讨厌的东西。但是我创建变量的方式，在我将容器附加到实际页面之前，它们并没有附加到任何DOM元素。

My question is if there's really an improvement regarding performance when using fragments, as I understand them - they manage elements on memory, so they're not attached to the document, thus, not triggering DOM recalculation and other nasty stuff. But the way I'm creating my variables, they're not attached to any DOM Element until i append the container to the actual page.

所以我想知道是否以前的代码比使用包装它的文档片段具有更好的性能：

So I was wondering if the previous code has better performance than using a document fragment that wraps it all like so:

var fragment = document.createDocumentFragment();
var divContainer = document.createElement("div"); divContainer.id="container";
var divHeader = document.createElement("div"); divHeader.id="header";
var divData = document.createElement("div"); divData.id="data";
var divFooter = document.createElement("div"); divFooter.id="footer";
divContainer.appendChild( divHeader );
divContainer.appendChild( divData );
divContainer.appendChild( divFooter );
fragment.appendChild( divContainer )
document.getElementById("someElement").appendChild( fragment.cloneNode(true) );

正如我已经说过的，这是一个关于性能的问题，我知道这是一个最佳实践它建议使用片段，但我无法想到这样做只是在内存中创建一个新对象并且什么都不做，所以我假设在这种情况下放弃片段是有效的。

As I've already said, this is a question regarding performance, I know that as a best practice it's recommended to use fragments, but I can't take the thought out of my head that doing that just creates a new object in memory and does nothing, so I assume that ditching the fragment in this case is valid.

希望有些js guru / god会在这里发出希望之光并帮助我们解决这个问题。

Hopefully some js guru / god will shine a light of hope in here and help us with this issue.

编辑：所以，我一直在寻找与此问题相关的内容，似乎documentFragments并不一定意味着更好的性能。

Edit: So, I've been looking around for stuff related to this issue and it seems that documentFragments doesn't necessarily means better performance.

它只是节点的内存容器。一个片段与一个< div> 之间的区别在于片段没有父级，它永远不会在DOM上，只在内存中，这意味着由于没有对DOM的操作，因此对片段进行的操作更快。

It's just an "in memory" container of nodes. The difference between a fragment and say, a <div> is that the fragment has no parent and it will never be on the DOM, just in memory, which means that the operations made on the fragment are faster since there's no manipulation of the DOM.

W3C 关于documentFragments的文档非常模糊，但重要的是，每个人最喜欢的浏览器都不使用真正的片段，而是根据此MSDN文档创建新文档。这意味着，IE上的片段速度较慢。

W3C's documentation on documentFragments is very vague but to the point and also, everybody's favorite browser does not uses real fragments, instead it creates a new document according to this MSDN documentation. Which means, fragments on IE are slower.

因此，问题占上风，如果我创建元素（a < div> 例如）变量中的但是不要将它附加到DOM，添加元素（div，表格等）和东西完成所有工作后（循环，验证，元素样式），该元素被追加，是否与片段相同？

So, the question prevails, if I create an element (a <div> for example) in a variable but DO NOT APPEND IT TO THE DOM, add elements (divs, tables, etc ) and stuff and after all the work has been done (loops, validations, styling of elements), that element is appended, is it the same as a fragment?

考虑到IE使用假片段这一事实我至少在IE中使用这种方法（使用像div这样的元素，而不是片段）更好，我真的不关心IE，但我需要测试它（办公室的政策）。

Given the fact that IE uses a "fake" fragment I'd say at least in IE using that approach (using an element such as a div, not a fragment) is better, I really don't care for IE but I need to test it ( office's policy ).

另外，如果我像这样在数组上创建所有html：

Also, if I create all the html on an array like so:

var arrHTML = ["<table>","<tr>", ....]; 

然后执行此操作

document.getElementById("someElement").innerHTML = arrHTML.join(""); 

在IE上它的速度更快，但其他主流浏览器（FF，Chrome，Safari和Opera）表现更好当使用容器然后附加它（片段或div）时。

It's way faster on IE, but other major browsers ( FF, Chrome, Safari and Opera ) perform better when using a container and then appending it (fragment or div).

所有这一切都是因为创建所有元素的过程非常快，大约8-10用24列创建多达20,000行的秒数，它是很多元素/标签，但是当它们全部被一次追加时，浏览器似乎会冻结几秒钟，如果我尝试逐个追加它们，那就太糟糕了。

All of this is because the process to create all the elements is done really fast, around 8 - 10 seconds to create up to 20,000 rows with 24 columns, it's a lot of elements / tags, but the browser seems to freeze a few seconds when they're all appended at once, if I try and append them one by one, it's hell.

再次感谢大家，这真的很有趣也很有趣。

Thanks again folks, this is really interesting and fun.

推荐答案

文档片段 快得多用于在多个位置中插入元素集时。这里的大多数答案都指出它没有效用，但这是为了证明它的优势。

Document Fragment is much faster when it is used to insert a set of elements in multiple places. Most answers here point out its un-utility, but this is to demonstrate its strength.

让我们举个例子。

假设我们需要在 10个元素中使用容器附加 20 div 。

Say we need to append 20 divs in 10 elements with class container.

没有：

var elements = [];
for(var i=20; i--;) elements.push(document.createElement("div"));

var e = document.getElementsByClassName("container");
for(var i=e.length; i--;) {
  for(var j=20; j--;) e[i].appendChild(elements[j].cloneNode(true));
}

使用：

var frag = document.createDocumentFragment();
for(var i=20; i--;) frag.appendChild(document.createElement("div"));

var e = document.getElementsByClassName("container");
for(var i=e.length; i--;) e[i].appendChild(frag.cloneNode(true));

对于我来说，使用文档片段在Chrome 48上的速度提高了16倍。

For me using a document fragment turns out to be 16 times faster on Chrome 48.

在JsPerf上测试

这篇关于使用文档片段真的可以提高性能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！