DOMParser vs innerHTML vs createHTMLDocument (v2)

Revision 2 of this benchmark created by Stuart K 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 first 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 = '<div id="test">' + Array(100001).join('<div>x</div>') + '</div>';

Teardown


    if (result.id !== "test") throw "wrong element"

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
var b = document.createElement('div');
b.innerHTML = testString;
result = b.firstChild;
ready
createHTMLDocument
var d = document.implementation.createHTMLDocument('');
d.body.innerHTML = testString;
result = d.body.firstChild;
ready
DOMParser
result = (new DOMParser).parseFromString(testString, 'text/html').firstChild;
ready

Revisions

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