dom manipulation with jquery (v8)

Revision 8 of this benchmark created on

Description

appending nodes to DOM

Preparation HTML

<style>
  #wrapper > div{ display:none; }
</style>
<div id="wrapper">
  Dom Manipulation
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Setup

var arr = [],
        domArr = [];
    
    $container = $("#wrapper");
    $container.empty();
    domArr.length = 0;
    arr.length = 0;
    
    for (var i = 0; i < 5; i++) {
      arr.push(i);
    }

Test runner

Ready to run.

Testing in
TestOps/sec
Bad1
$.each(arr, function(i, item) {
  $container.append("<div>" + item + "</div>");
});
ready
Bad2
var domStr = "";
$.each(arr, function(i, item) {
  domStr += "<div>" + item + "</div>";
});
$container.append(domStr);
ready
Bad3
var domStr = "";

$.each(arr, function(i, item) {
  domStr += "<div>" + item + "</div>";
});
$container.append("<div>" + domStr + "</div>");
ready
Good1
var arrLength = arr.length;
for (var i = 0; i < arrLength; i++) {
  domArr[i++] = "<div>";
  domArr[i++] = i;
  domArr[i++] = "</div>";
}

$container.append(domArr.join(""));
ready
Bad5
$.each(arr, function(i, item) {
  domArr[i++] = "<div>";
  domArr[i++] = item;
  domArr[i++] = "</div>";
});

$container.append(domArr.join(""));
ready
Good
var fragment = document.createDocumentFragment(),
    elm = "",
    arrLength = arr.length;

for (var i = 0; i < arrLength; i++) {
  elm = document.createElement('div');
  elm.appendChild(document.createTextNode(i));
  fragment.appendChild(elm);
}

$container[0].appendChild(fragment);

$container.append(domArr.join(""));
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.