Benchmark: ddddkkk - 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
function convertToPlain(html){ var tempDivElement = document.createElement("div"); tempDivElement.innerHTML = html; return tempDivElement.textContent || tempDivElement.innerText || ""; } var htmlString= "<div><h1>Bears Beets Battlestar Galactica </h1>\n<p>Quote by Dwight Schrute</p></div>"; var strippedHtml = convertToPlain(convertToPlain);

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

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, comparing the performance of different approaches for various tasks.

The provided benchmark definition and test cases demonstrate three alternative methods for stripping HTML tags from a string:

1. `replace()` method
2. `createContextualFragment` method (introduced in Internet Explorer 8)
3. Custom implementation using `innerHTML`

**Testing What's Tested**

The testing measures the performance of each approach in removing HTML tags from an input string. The benchmark prepares an example HTML string and then applies one of the three methods to remove the tags.

**Comparison of Approaches**

### replace() method

This is a built-in JavaScript method that replaces all occurrences of a pattern with another value. In this case, it's used to remove HTML tags by replacing them with an empty string.

Pros:

* Fast and efficient
* Widely supported across browsers

Cons:

* May not work correctly for complex or nested HTML structures
* Can be slow if the input string is very large

### createContextualFragment method

This method was introduced in Internet Explorer 8 as a way to create a contextually fragment of an HTML document. In this benchmark, it's used to remove HTML tags by taking the text content of the created fragment.

Pros:

* Efficient and fast for simple HTML structures
* Works correctly for nested HTML structures

Cons:

* Only supported in older browsers (Internet Explorer 8 and later)
* May not work correctly in modern browsers that have replaced `createContextualFragment` with `textContent`

### Custom implementation using innerHTML

This custom implementation creates a temporary `<div>` element, sets its `innerHTML` property to the input HTML string, and then returns the text content of the element.

Pros:

* Fast and efficient
* Works correctly for complex or nested HTML structures

Cons:

* Requires more code than the other two approaches
* May be slower than the built-in `replace()` method

**Other Considerations**

* The benchmark uses a custom JavaScript string literal syntax (`"..."`) to define the input HTML string. This is not a standard way of defining strings in JavaScript, but it's commonly used for this purpose.
* The benchmark does not test the security implications of using these methods, as they are generally considered safe.

**Alternative Approaches**

Other approaches that could be tested on MeasureThat.net include:

* Using regular expressions to remove HTML tags
* Using a library like DOMPurify or js-xss to sanitize the input HTML string
* Comparing the performance of different parser libraries (e.g., DOMParser, XMLParser)

These additional tests would provide a more comprehensive understanding of the performance and security characteristics of these approaches.

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.41 YaBrowser/21.2.0.2458 Yowser/2.5 Safari/537.36

Browser/OS: Yandex Browser 21 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
replace	3045352.8 Ops/sec
createContextualFragment	111504.5 Ops/sec
innerHTML	28821.0 Ops/sec

Related benchmarks:

ddddkkk (version: 0)

Comparing performance of: replace vs createContextualFragment vs innerHTML

Created: 3 years ago by: Guest

Jump to the latest result

replace

createContextualFragment

innerHTML

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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