Run results for: DOMParser vs InnerHTML

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36 Edg/138.0.0.0

Browser: Chrome 138

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

InnerHTML

38K/s

DOMParser

16K/s

View exact numbers

Test name	Executions per second
✓ InnerHTML	37,676 Ops/sec
DOMParser	16,038 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);