Benchmark: strip html v2 - MeasureThat.net

Tests:

replace
var strippedHtml = ("<div><h1>Bears Beets Battlestar Galactica </h1>\n<p>Quote by Dwight Schrute</p></div>").replace(/<[^>]+>/g, '');
createContextualFragment
var strippedHtml = (document.createRange().createContextualFragment("<div><h1>Bears Beets Battlestar Galactica </h1>\n<p>Quote by Dwight Schrute</p></div>").textContent || '');
innerHTML
var a = document.createElement("div"); a.innerHTML = "<div><h1>Bears Beets Battlestar Galactica </h1>\n<p>Quote by Dwight Schrute</p></div>" var strippedHtml = a.textContent;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
replace
createContextualFragment
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 months ago)

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

Browser/OS: Chrome 136 on Windows

View result in a separate tab

Test name	Executions per second
replace	8549035.0 Ops/sec
createContextualFragment	284125.6 Ops/sec
innerHTML	4804.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to strip HTML from a string in JavaScript:

1. **Replace**: Replaces all HTML tags with an empty string using a regular expression.
2. **createContextualFragment**: Creates a DOM fragment from the input HTML, extracts the text content, and then returns it.
3. **innerHTML**: Sets the inner HTML of a temporary `<div>` element to the input HTML and then extracts the text content.

**Comparison of Approaches**

1. **Replace**:
	* Pros: Simple, efficient, and widely supported in JavaScript engines.
	* Cons: May not work correctly with malformed or malformed HTML, and can lead to security issues if used with user-input data.
2. **createContextualFragment**:
	* Pros: Provides a more precise way of extracting text content from DOM fragments, which is especially useful when dealing with nested HTML structures.
	* Cons: Requires creating temporary DOM elements, which can incur additional overhead and might not be supported in older JavaScript engines.
3. **innerHTML**:
	* Pros: Convenient and widely supported, as it's a built-in method of the `DOMElement` interface.
	* Cons: May lead to security issues if used with user-input data (e.g., creating malicious `<div>` elements), and can be slower than pure string manipulation methods due to DOM creation overhead.

**Library and Special JS Features**

The benchmark doesn't explicitly use any external libraries, but it does utilize the `createRange()` method from the JavaScript DOM API. This method is supported by most modern browsers but may not work in older versions or in certain environments where the DOM is not fully implemented.

There are no special JS features used in this benchmark that would require advanced knowledge of JavaScript syntax.

**Alternative Approaches**

Other approaches to stripping HTML from a string could include:

* Using `DOMParser` and `XMLSerializer` to parse the input HTML into a DOM document, extracting the text content, and then converting it back to a string.
* Utilizing libraries like DOMPurify or html-minifier for more advanced HTML cleaning and minification tasks.
* Implementing custom, hand-rolled parsing logic using regular expressions or other string manipulation techniques.

Keep in mind that these alternatives might not provide significant performance benefits over the three benchmarked approaches, especially when considering security and compatibility factors.

Related benchmarks:

strip html v2 (version: 0)

Comparing performance of: replace vs createContextualFragment vs innerHTML

Created: 4 years ago by: Guest

Jump to the latest result

replace

createContextualFragment

innerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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