DOMParser vs createElement & innerHTML

JavaScript performance comparison

Revision 3 of this test case created by Joel Richard and last updated

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  var html = '<li><strong>Hello there</strong><p>Just a random list item</p></li>',
    parser = new DOMParser(),
    docCache = document,
    cachedEl = docCache.createElement('div'),
    cachedRange = document.createRange();
  cachedRange.selectNode(document.body);

};
</script>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
DOMParser
var _el = (new DOMParser()).parseFromString(html, 'text/xml'),
  child = _el.firstChild;
pending…
CreateElement and innerHTML
var _el = document.createElement('div');
_el.innerHTML = html;
var child = _el.firstChild;
pending…
Cached DOMParser
var _el = parser.parseFromString(html, 'text/xml'),
  child = _el.firstChild;
pending…
Cached element and innerHTML
cachedEl.innerHTML = html;
var child = cachedEl.firstChild;
pending…
contextual fragment
var child = cachedRange.createContextualFragment(html).firstChild;
pending…
insertAdjacentHTML
var el = document.createElement('div');
el.insertAdjacentHTML('beforeend', html);
var child = el.firstChild;
pending…
insertAdjacentHTML cached element
cachedEl.insertAdjacentHTML('beforeend', html);
var child = cachedEl.removeChild(cachedEl.firstChild)
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.

0 Comments