document.createDocumentFragment 또는 document.createElement를 사용해야합니까?

document.createDocumentFragment 또는 document.createElement를 사용해야합니까?

---

나는 한 문서 조각에 대한 읽기 및 DOM 리플 로우 방법 궁금 document.createDocumentFragment에서 차이가 document.createElement나는 DOM 요소를 추가 할 때까지 둘 중이 DOM에 존재하지 않는 것처럼 보이는.

테스트 (아래)를했는데 모두 정확히 같은 시간 (약 95ms)이 걸렸습니다. 아마도 이것은 요소에 적용된 스타일이 없기 때문일 수 있으므로 리플 로우가 없을 수도 있습니다.

어쨌든 아래 예제를 기반으로 DOM에 삽입 할 때 createDocumentFragment대신 사용해야 하는 이유 createElement와 둘 사이의 차이점은 무엇입니까 ?

var htmz = "<ul>";
for (var i = 0; i < 2001; i++) {
    htmz += '<li><a href="#">link ' + i + '</a></li>';
}
htmz += '<ul>';

//createDocumentFragment
console.time('first');
var div = document.createElement("div");
div.innerHTML = htmz;
var fragment = document.createDocumentFragment();
while (div.firstChild) {
    fragment.appendChild(div.firstChild);
}
$('#first').append(fragment);
console.timeEnd('first');

//createElement
console.time('second');
var span = document.createElement("span");
span.innerHTML = htmz;
$('#second').append(span);
console.timeEnd('second');


//jQuery
console.time('third');
$('#third').append(htmz);
console.timeEnd('third');

---

The difference is that a document fragment effectively disappears when you add it to the DOM. What happens is that all the child nodes of the document fragment are inserted at the location in the DOM where you insert the document fragment and the document fragment itself is not inserted. The fragment itself continues to exist but now has no children.

This allows you to insert multiple nodes into the DOM at the same time:

var frag = document.createDocumentFragment();
var textNode = frag.appendChild(document.createTextNode("Some text"));
var br = frag.appendChild(document.createElement("br"));
var body = document.body;
body.appendChild(frag);
alert(body.lastChild.tagName); // "BR"
alert(body.lastChild.previousSibling.data); // "Some text"
alert(frag.hasChildNodes()); // false

---

Another very important difference between creating an element and a document fragment:

When you create an element and append it to the DOM, the element is appended to the DOM, as well as the children.

With a document fragment, only the children are appended.

Take the case of:

var ul = document.getElementById("ul_test");


// First. add a document fragment:


(function() {
  var frag = document.createDocumentFragment();
  
  
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Document Fragment"));
  frag.appendChild(li);
  
  ul.appendChild(frag);
  console.log(2);
}());

(function() {
  var div = document.createElement("div");
  
  
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Inside Div"));
   div.appendChild(li);
  
  ul.appendChild(div);
}());

Sample List:
<ul id="ul_test"></ul>

which results in this malformed HTML (whitespace added)

<ul id="ul_test">
  <li>Document Fragment</li>
  <div><li>Inside Div</li></div>
</ul>

참고URL : https://stackoverflow.com/questions/3397161/should-i-use-document-createdocumentfragment-or-document-createelement