Benchmark: DOMParser vs InnerHTML

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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DOMParser
InnerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 28 days ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
DOMParser	11335.3 Ops/sec
InnerHTML	33844.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks.

**What is being tested?**

The provided JSON represents two individual test cases, each testing different approaches to parse and manipulate HTML content in a JavaScript environment. The tests compare the performance of:

1. **DOMParser**: A built-in JavaScript API for parsing XML and HTML documents.
2. **InnerHTML**: A method that sets the `innerHTML` property of an element to render HTML content.

**Options compared**

Both options use similar steps to parse and manipulate the HTML content, but with differences in approach:

* Both methods create a temporary container element to hold the parsed HTML content.
* Both methods append links, scripts, and child nodes from the parsed HTML document to a document fragment or the main DOM tree.
* The main difference lies in how they handle the parsing of HTML content:
	+ DOMParser parses the entire HTML document at once and returns it as an XMLDocument object.
	+InnerHTML sets the `innerHTML` property directly on the container element, which can lead to faster execution times since it only needs to update the element's content.

**Pros and cons of each approach**

* **DOMParser**:
	+ Pros: Robust and flexible API for parsing complex HTML documents. Can be used with other libraries or frameworks that support XML parsing.
	+ Cons: May incur a higher overhead due to the full document parsing process, which can lead to slower performance.
* **InnerHTML**:
	+ Pros: Faster execution times since it only needs to update the element's content. Less overhead compared to DOMParser.
	+ Cons: Limited flexibility and may not work well with complex HTML documents or certain libraries/frameworks that rely on XML parsing.

**Library and purpose**

There is no specific library mentioned in the provided JSON, but it's worth noting that JavaScript engines like V8 (used by Chrome) often provide built-in support for DOMParser andInnerHTML APIs. However, third-party libraries like `xml2js` can be used to parse XML documents, which might be relevant in certain scenarios.

**Special JS features or syntax**

There are no specific JavaScript features or syntax mentioned in the provided JSON that require special attention. However, it's essential to note that using `innerHTML` with untrusted sources can lead to security vulnerabilities like XSS attacks, as demonstrated by the benchmark description: "Make sure you trust the source before doing this!"

**Other alternatives**

If you're looking for alternative methods or libraries to parse and manipulate HTML content in JavaScript, consider:

* **XSLT**: A language-based approach for transforming XML documents.
* **Saxon**: An XSLT processor for JavaScript engines like V8.
* **jsdom**: A library that allows you to create a virtual DOM environment for testing and development purposes.

Keep in mind that these alternatives might have different performance characteristics, complexity levels, or use cases compared to the built-in DOMParser andInnerHTML APIs.

Related benchmarks:

DOMParser vs InnerHTML (version: 0)

Comparing performance of: DOMParser vs InnerHTML

Created: 3 years ago by: Guest

Jump to the latest result

DOMParser

InnerHTML

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):