Info

Bare-Bones

We shouldn't care about string concatenation, or outerHTML returns; we want to know if using innerHTML or createElement is faster. We also don't care about adding to a "live" element, but one that is hidden; just in a variable for example.

For that reason, I have created the innerHTML string and the target "container" div before the test.

Preparation code

 
<script>
  Benchmark.prototype.setup = function() {
    var container = document.createElement("DIV");
    var HTML = new Array(101).join("<span></span>");
  };
</script>

Test runner

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

Java applet disabled.

container.innerHTML = HTML;

for (var i = 0; i < 100; i++) {
  container.appendChild(document.createElement("span"));
}

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:

• Revision 1: published on 16th November 2011
• Revision 2: published by copy on 6th December 2011
• Revision 3: published on 14th December 2011
• Revision 4: published on 22nd December 2011
• Revision 6: published on 13th April 2012
• Revision 7: published on 10th May 2012
• Revision 8: published by Ben on 12th June 2012
• Revision 9: published on 17th October 2012
• Revision 10: published on 18th October 2012
• Revision 11: published on 1st November 2012 and last updated on 2nd November 2012
• Revision 12: published on 15th December 2012
• Revision 13: published on 29th December 2012 and last updated on 30th December 2012
• Revision 14: published on 8th January 2013
• Revision 15: published by Thomas Giles on 11th January 2013
• Revision 16: published on 25th January 2013
• Revision 18: published on 19th March 2013
• Revision 19: published on 19th March 2013
• Revision 20: published by Dave Dopson on 21st March 2013
• Revision 21: published on 25th March 2013

0 comments