Run results for: DOMParser vs InnerHTML

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:131.0) Gecko/20100101 Firefox/131.0

Browser: Firefox 131

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

InnerHTML

34K/s

DOMParser

21K/s

View exact numbers

Test name	Executions per second
✓ InnerHTML	33,867 Ops/sec
DOMParser	21,286 Ops/sec

Script Preparation code:

var htmlBody = `<h3>A body coming from an API... or somewhere else</h3>
  <div id="html-mock-body">
    It can contain regular HTML Elements and scripts with links.
  </div>
  <script type="text/javascript">
    (function() {
      var bodyElement = document.querySelector('#html-mock-body');
      var tag = document.createElement('h1');
      tag.textContent =
        'This script is injected from external source. Make sure you trust the source before doing this!';
      bodyElement.append(tag);
    }());
  </script>`;

Tests:

DOMParser
const domParser = new DOMParser(); const doc = domParser.parseFromString(htmlBody, 'text/html'); const links = Array.from(doc.getElementsByTagName('link')); const scripts = Array.from(doc.getElementsByTagName('script')); const children = Array.from(doc.body.childNodes); const fragment = document.createDocumentFragment(); fragment.append(...links); fragment.append(...children); fragment.append(...scripts);
InnerHTML
const container = document.createElement('div'); container.innerHTML = htmlBody; const links = Array.from(container.getElementsByTagName('link')); const scripts = Array.from(container.getElementsByTagName('script')); const children = Array.from(container.childNodes); const fragment = document.createDocumentFragment(); fragment.append(...links); fragment.append(...children); fragment.append(...scripts);