jQuery DOM Manipulation Comparison

JavaScript performance comparison

Revision 4 of this test case created by Todd

Preparation code

<ul id="imgList">
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  var $imglist = $('#imgList');
  var arr = ['http://farm7.staticflickr.com/6216/6240217938_aeed84634a_t.jpg', 'http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd_t.jpg', 'http://farm7.staticflickr.com/6092/6330704947_dd7e1b453c_t.jpg', 'http://farm6.staticflickr.com/5015/5505775854_39d4e3a1fe_t.jpg', 'http://farm6.staticflickr.com/5213/5508784414_d2d84f9c92_t.jpg', 'http://farm3.staticflickr.com/2706/5840168826_486f364c6c_t.jpg', 'http://farm3.staticflickr.com/2317/5799936522_7a09e4df0c_t.jpg', 'http://farm6.staticflickr.com/5221/5605279583_bd276d9624_t.jpg', 'http://farm3.staticflickr.com/2570/4220856234_029e5b8348_t.jpg', 'http://farm1.staticflickr.com/19/163378752_a3e57e8c9a_t.jpg']
</script>
      
<script>
Benchmark.prototype.teardown = function() {
  $imglist.empty();

};
</script>

Preparation code output

<ul id="imgList"> </ul>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Append for each
for (var i = 0, l = arr.length; i < l; i++) {
  $imglist.append('<li>' + arr[i] + '</li>');
}
pending…
Append once
var tmp = '';
for (var i = 0, l = arr.length; i < l; i++) {
  tmp += '<li>' + arr[i] + '</li>';
}
$imglist.append(tmp);
pending…
Join an array
var tmp = [];
for (var i = 0, l = arr.length; i < l; i++) {
  tmp.push('<li>');
  tmp.push(arr[i]);
  tmp.push('</li>');
}
$imglist.append(tmp.join(''));
pending…
String + jQuery html()
var tmp = '';
for (var i = 0, l = arr.length; i < l; i++) {
  tmp += '<li>' + arr[i] + '</li>';
}
$imglist.html(tmp);
pending…
String + innerHTML
var tmp = '';
for (var i = 0, l = arr.length; i < l; i++) {
  tmp += '<li>' + arr[i] + '</li>';
}
$imglist[0].innerHTML = tmp;
pending…

Compare results of other browsers

Revisions

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

0 Comments