jQuery append vs html vs innerHTML list performance

JavaScript performance comparison

Revision 20 of this test case created

Info

Just a simple example showing the speed difference between populating a list with .append() & .html() and innerHTML

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="list">
</div>
<script>
Benchmark.prototype.setup = function() {
    var len = 20;
};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jquery .append()
for (var i = 0; i < len; i++) {
  var html = '<div>Test ' + i + '</div>';
  $('#list').append(html);
}
pending…
jQuery .html()
var html = '';
for (var i = 0; i < len; i++) {
  html += '<div>Test ' + i + '</div>';
}

$('#list').html(html);
pending…
javascript innerHTML
var list = document.getElementById('list');
for (var i = 0; i < len; i++) {
  list.innerHTML = list.innerHTML + '<div>Test ' + i + '</div>';
}
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. Here’s a list of current revisions for this page:

2 comments

Joey commented :

The two examples are coded to work differently, giving JQuery an unfair advantage.

The jQuery .html() example has an unfair advantage. The html variable is created outside of the loop in the JQuery example, then after a pure JavaScript loop adds items to the variable rather than the DOM, the contents of the html var are added to the DOM just once using JQuery .html().

For the JavaScript innerHTML example the JavaScript is adding to the DOM within the loop, which is much, much slower. It must access the DOM each time and add content to it, rather than adding to the DOM just once from a variable like the JQuery example.

fffffff commented :

sadfasdf asdfsdf asdf asdf asdfasdf asdf

Add a comment