DOMParser vs innerHTML vs createHTMLDocument (v6)

Revision 6 of this benchmark created by B on

Description

Tests

  • body + innerHTML
  • createHTMLDocument + innerHTML
  • DOMParser with text/html - https://developer.mozilla.org/en-US/docs/DOM/DOMParser

Using a string with a size of 100k <div>x</div>s, wrapped in a <body> element.

The last two methods involve creating an offline document (contrary to the firsy method, external resources such as <img> are not loaded).

No error checking is added. When this test case was created, Firefox (12+) was the only browser which supported all of the three methods. The first and second test should pass on all modern browsers though (the first on ancient browsers as well!).

Setup

var testString = '<body>' + Array(100001).join('<div>x</div>') + '</body>';
    
    function test_innerHTML() {
        var b = document.createElement('body');
        b.innerHTML = testString;
        return b;
    }
    function test_createHTMLDocument() {
        var d = document.implementation.createHTMLDocument('');
        d.body.innerHTML = testString;
        return d.body;
    }
    function test_DOMParser() {
        return (new DOMParser()).parseFromString(testString, 'text/html').body;
    }

Test runner

Ready to run.

Testing in
TestOps/sec
body+innerHTML
test_innerHTML();
ready
createHTMLDocument
test_createHTMLDocument();
ready
DOMParser+text/html
test_DOMParser();
ready

Revisions

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