Benchmark: domparser vs native vs none long

HTML Preparation code:


<div id="foo">hello</div>

Script Preparation code:

window.testString = `
	
<div id="p-interaction" class="vector-menu mw-portlet mw-portlet-interaction"  >
	<div class="vector-menu-heading">
		Contribute
	</div>
	<div class="vector-menu-content">
		
		<ul class="vector-menu-content-list"><li id="n-help" class="mw-list-item"><a href="/wiki/Help:Contents" title="Guidance on how to use and edit Wikipedia"><span>Help</span></a></li><li id="n-introduction" class="mw-list-item"><a href="/wiki/Help:Introduction" title="Learn how to edit Wikipedia"><span>Learn to edit</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikipedia:Community_portal" title="The hub for editors"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes to Wikipedia [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_upload_wizard" title="Add images or other media for use on Wikipedia"><span>Upload file</span></a></li></ul>
		
	</div>
</div>

	
<div class="vector-main-menu-action vector-main-menu-action-lang-alert">
	<div class="vector-main-menu-action-item">
		<div class="vector-main-menu-action-heading vector-menu-heading">Languages</div>
		<div class="vector-main-menu-action-content vector-menu-content">
			<div class="mw-message-box-notice vector-language-sidebar-alert mw-message-box">Language links are at the top of the page across from the title.</div>
		</div>
	</div>
</div>

</div>

				</div>

	</div>
</div>
		</nav>
			
<a href="/wiki/Main_Page" class="mw-logo">
	<img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt=""
		aria-hidden="true" height="50" width="50">
	<span class="mw-logo-container">
		<img class="mw-logo-wordmark" alt="Wikipedia"
			src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;">
		<img class="mw-logo-tagline"
			alt="The Free Encyclopedia"
			src="/static/images/mobile/copyright/wikipedia-tagline-en.svg" width="117" height="13" style="width: 7.3125em; height: 0.8125em;">
	</span>
</a>

		</div>
		<div class="vector-header-end">
			
<div id="p-search" role="search" class="vector-search-box-vue  vector-search-box-collapses  vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box">
	<a href="/wiki/Special:Search"
	
		id=""
		class="mw-ui-button mw-ui-quiet mw-ui-icon-element search-toggle"
		title="Search Wikipedia [f]"accesskey="f"><span class="mw-ui-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span>

<span>Search</span>
	</a>
	
	<div>
		<form action="/w/index.php" id="searchform"
			class="vector-search-box-form">
			<div id="simpleSearch"
				class="vector-search-box-inner"
				 data-search-loc="header-moved">
				<input class="vector-search-box-input"
					 type="search" name="search" placeholder="Search Wikipedia" aria-label="Search Wikipedia" autocapitalize="sentences" title="Search Wikipedia [f]" accesskey="f" id="searchInput"
				>
				<input type="hidden" name="title" value="Special:Search">
				<input id="mw-searchButton"
					 class="searchButton mw-fallbackSearchButton" type="submit" name="fulltext" title="Search Wikipedia for this text" value="Search">
				<input id="searchButton"
					 class="searchButton" type="submit" name="go" title="Go to a page with this exact name if it exists" value="Go">
			</div>
		</form>
	</div>
</div>`;

Tests:

domparser
document.getElementById("foo").append(new DOMParser().parseFromString(window.testString, "text/html").body);
native
document.getElementById("foo").setHTML(window.testString);
none
document.getElementById("foo").innerHTML = window.testString;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
domparser
native
none

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared options, pros and cons, library usage, special JavaScript features, and alternatives.

**What is being tested?**

The benchmark measures the performance of three different approaches to parse and manipulate HTML in JavaScript:

1. `DOMParser` (domparser test case)
2. Native HTML parser (native test case)
3. No parsing required (none test case)

The test cases use a sample HTML string with various elements, attributes, and content.

**Options compared**

* **DOMParser**: uses the `Document.getElementById()` method to access an element, then calls `parseFromString()` on the `new DOMParser()` instance to parse the HTML string. The parsed HTML is then accessed using the `body` property.
* **Native**: uses the `setHTML()` method provided by some JavaScript libraries (not shown in this benchmark) to set the HTML content of an element.
* **None**: simply assigns the HTML string directly to an element's `innerHTML` property.

**Pros and Cons**

* **DOMParser**:
	+ Pros: widely supported, easy to use, and provides a robust parsing mechanism.
	+ Cons: may be slower due to the overhead of creating a new DOM parser instance.
* **Native**: pros include faster execution times, as it leverages an optimized parsing engine. However, this method is only supported by libraries that provide the `setHTML()` method, which might not be widely available or well-maintained.
* **None**:
	+ Pros: potentially fastest execution time due to avoiding parsing overhead.
	+ Cons: may be less reliable and less secure, as it directly injects user-controlled HTML into an element.

**Library usage**

The `setHTML()` method used in the native test case is not shown in this benchmark. It's likely provided by a JavaScript library that handles HTML manipulation for certain browsers or use cases.

**Special JavaScript features**

None of the tested methods rely on any special JavaScript features beyond standard DOM API methods.

**Alternatives**

If you don't need to parse HTML, using `innerHTML` can be faster and more convenient. However, this approach bypasses security checks and may lead to XSS vulnerabilities if not used carefully.

For parsing purposes, alternative libraries or approaches like ` cheerio.js`, `jsdom`, or `parse5` might offer better performance or specific features for certain use cases.

Keep in mind that benchmark results can vary depending on the environment, browser, and hardware. These findings are meant to provide a general understanding of each approach's characteristics.

Related benchmarks:

domparser vs native vs none long (version: 0)

Comparing performance of: domparser vs native vs none

Created: 2 years ago by: Guest

Jump to the latest result

domparser

native

none

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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