innerHTML vs createElement() and appendChild() (v2)

Revision 2 of this benchmark created by GarciaWebDev on

Description

Compares the performance of adding elements to DOM by using strings and innerHTML and creating DOMElement objects and appending them with appendChild().

Preparation HTML

<script>
/*
 * DOMParser HTML extension
 * 2012-02-02
 *
 * By Eli Grey, http://eligrey.com
 * Public domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */
 
/*! @source https://gist.github.com/1129031 */
/*global document, DOMParser*/
 
(function(DOMParser) {
    "use strict";
 
    var
      DOMParser_proto = DOMParser.prototype
    , real_parseFromString = DOMParser_proto.parseFromString
    ;
 
    // Firefox/Opera/IE throw errors on unsupported types
    try {
        // WebKit returns null on unsupported types
        if ((new DOMParser).parseFromString("", "text/html")) {
            // text/html parsing is natively supported
            return;
        }
    } catch (ex) {}
 
    DOMParser_proto.parseFromString = function(markup, type) {
        if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
            var
              doc = document.implementation.createHTMLDocument("")
            , doc_elt = doc.documentElement
            , first_elt
            ;
 
            doc_elt.innerHTML = markup;
            first_elt = doc_elt.firstElementChild;
 
            if ( // are we dealing with an entire document or a fragment?
                   doc_elt.childElementCount === 1
                && first_elt.localName.toLowerCase() === "html"
            ) {
                doc.replaceChild(first_elt, doc_elt);
            }
 
            return doc;
        } else {
            return real_parseFromString.apply(this, arguments);
        }
    };
}(DOMParser));
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
document.body.innerHTML += '<div class="test"><p>This is a test</p></div>';
ready
createElement() and appendChild()
var div = document.createElement('div');
div.className = 'test';

var p = document.createElement('p');
p.innerText = 'This is a test';

div.appendChild(p);
document.body.appendChild(div);
ready
DOMParser
var parser = new DOMParser();
var doc = parser.parseFromString('<div class="test"><p>This is a test</p></div>', 'text/html');
document.body.appendChild(doc.body.childNodes[0]);
ready

Revisions

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