Does using a document fragment really improve performance?

by

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.

Lets take an example.

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

Without:

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

With:

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

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

Test on JsPerf

More Related Contents:

  1. Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?
  2. How to efficiently count the number of keys/properties of an object in JavaScript
  3. How do you performance test JavaScript code?
  4. What is the difference between parseInt() and Number()?
  5. What’s the fastest way to loop through an array in JavaScript?
  6. Most efficient way to concatenate strings in JavaScript?
  7. fastest MD5 Implementation in JavaScript
  8. Good ways to improve jQuery selector performance?
  9. Which browsers support ?
  10. Unobtrusive JavaScript: at the top or the bottom of the HTML code?
  11. How to stop intense Javascript loop from freezing the browser
  12. What is the most efficient way to reverse an array in Javascript?
  13. Microsoft CDN for jQuery or Google CDN? [closed]
  14. Performance differences between visibility:hidden and display:none
  15. Why cache jQuery objects?
  16. Prepend text to beginning of string
  17. Firestore slow performance issue on getting data
  18. In Javascript, is it expensive to use try-catch blocks even if an exception is never thrown?
  19. Array Join vs String Concat
  20. How many concurrent setTimeouts before performance issues?
  21. Javascript Set vs. Array performance
  22. Why is looping through an Array so much faster than JavaScript’s native `indexOf`?
  23. recursive function vs setInterval vs setTimeout javascript
  24. HTML5 Canvas Performance and Optimization Tips, Tricks and Coding Best Practices [closed]
  25. How do I use Browserify with external dependencies?
  26. draw 10,000 objects on canvas javascript
  27. JavaScript Profiler in IE
  28. Enable smooth scrolling for my website in all browsers
  29. How to profile and get Javascript performance [duplicate]
  30. What’s the best way (most efficient) to turn all the keys of an object to lower case?

Leave a Comment