jQuery append vs html vs innerHTML list performance

JavaScript performance comparison

Revision 46 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="divHeader">
</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()
$(function() {
  $("#divHeader").append(
    "<div id='divLogo'>" +
    "<img src='images/logo.jpg' alt='B.K.K.(1985) PUBLIC COMPANY LIMITED' />" +
    "</div>" +
    "<div id='divLanguage'>" +
    "<p class='language'>" +
    "<a href='index_th.html'>ไทย | </a><a href='index.html'>Eng</a>" +
    "</p>" +
    "</div>" +
    "<hr id='hrDropdownBar' />"
  )
});
pending…
jQuery .html()
$(function() {
  $("#divHeader").html(
    '<div id="divLogo">' +
    '<img src="images/logo.jpg" alt="B.K.K.(1985) PUBLIC COMPANY LIMITED" />' +
    '</div>' +
    '<div id="divLanguage">' +
    '<p class="language">' +
    '<a href="index_th.html">ไทย | </a><a href="index.html">Eng</a>' +
    '</p>' +
    '</div>' +
    '<hr id="hrDropdownBar" />'
  )
});
pending…
javascript innerHTML
 
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:

0 comments

Add a comment