native for (v4)

Revision 4 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Setup

var items = {
      0: "zero",
      1: "one",
      2: "two",
      3: "three",
      4: "four",
      5: "five",
      6: "six",
      7: "seven",
      8: "eight",
      9: "nine",
      a: "alpha",
      b: "bravo",
      c: "charlie",
      d: "delta",
      e: "echo",
      f: "foxtrot",
      g: "golf",
      h: "hotel",
      i: "india",
      j: "juliet",
      k: "kilo",
      l: "lima",
      m: "mike",
      n: "november",
      o: "oscar",
      p: "papa",
      q: "quebec",
      r: "romeo",
      s: "sierra",
      t: "tango",
      u: "uniform",
      v: "victor",
      w: "whiskey",
      x: "x-ray",
      y: "yankee",
      z: "zulu"
    };

Teardown


    $('.mylist').remove();

Test runner

Ready to run.

Testing in
TestOps/sec
direct dom access
var list = $('<ul class="mylist"></ul>').appendTo(document.body);
$.each(items, function(k, v) {
  $('<li data-foo="' + k + '">' + v + '</li>').appendTo(list);
});
ready
indirect dom access
var list = $('<ul class="mylist"></ul>');
$.each(items, function(k, v) {
  $('<li data-foo="' + k + '">' + v + '</li>').appendTo(list);
});
list.appendTo(document.body);
ready
documentFragment
var list = $(document.createDocumentFragment()),
    ul = $('<ul class="mylist"></ul>');
$.each(items, function(k, v) {
  $('<li data-foo="' + k + '">' + v + '</li>').appendTo(list);
});
list.appendTo(ul);
ul.appendTo(document.body)
ready
strings
var list = '<ul class="mylist">';
$.each(items, function(k, v) {
  list += '<li data-foo="' + k + '">' + v + '</li>';
});
list += "</ul>";
$(list).appendTo(document.body);
ready
native
var list = document.createElement('ul');
list.className = "mylist";
$.each(items, function(k, v) {
  var li = document.createElement('li');
  li.setAttribute('data-foo', k);
  list.appendChild(li);
});
document.body.appendChild(list);
ready
string array
var listStart = '<ul class="mylist">';
var listEnd = '</ul>';

var listItems = [];
$.each(items, function(k, v) {
  listItems.push('<li data-foo="' + k + '">' + v + '</li>');
});

var list = listStart + listItems.join('') + listEnd;
$(list).appendTo(document.body);
ready
native for
var list = document.createElement('ul'),
    li;

for (var item in items) {
  li = document.createElement('li');
  li.setAttribute('data-foo', item);
  li.className = 'myList';
  list.appendChild(li);
}

document.body.appendChild(list);
ready
adjacent
var list = document.createElement('ul');

for (var item in items) {
  var li = document.createElement('li');
  li.setAttribute('data-foo', item);
  li.className = 'myList';
  list.appendChild(li);
}

document.body.appendChild(list);
ready

Revisions

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