Benchmark: insertAdjacentHTML+innerText vs escape+insertAdjacentHTML

HTML Preparation code:


<div id='dest'></div>

Script Preparation code:

const dest = document.getElementById('dest');
function escapeHtml(unsafe)
{
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;");
 }

Tests:

insertAdjacentHTML+innerText
for(var i=0; i<1000; ++i){ dest.insertAdjacentHTML("beforeend", ""); dest.lastChild.innerText = `Hello ${i} & hello again.`; }
escape+insertAdjacentHTML
var html = ""; for(var i=0; i<1000; ++i){ html += `${escapeHtml(`Hello ${i} & hello again.`)}`; } dest.innerHTML = html;
insertAdjacentHTML+innerText w/ lastElementChild
for(var i=0; i<1000; ++i){ dest.insertAdjacentHTML("beforeend", ""); dest.lastElementChild.innerText = `Hello ${i} & hello again.`; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
insertAdjacentHTML+innerText
escape+insertAdjacentHTML
insertAdjacentHTML+innerText w/ lastElementChild

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its options.

**Benchmark Definition**

The website MeasureThat.net provides a JSON representation of a JavaScript microbenchmark. In this case, we have three test cases:

1. `insertAdjacentHTML+innerText`
2. `escape+insertAdjacentHTML`
3. `insertAdjacentHTML+innerText w/ lastElementChild`

These test cases aim to measure the performance difference between using `insertAdjacentHTML` with inner text (`innerText`) and using HTML escaping (with `escapeHtml` function) followed by `insertAdjacentHTML`.

**Options Compared**

The options being compared are:

* Using `insertAdjacentHTML` with `innerText`: This method appends a new HTML element to the end of an existing element, including its content.
* Using `insertAdjacentHTML` with HTML escaping (using `escapeHtml` function): This method also appends a new HTML element to the end of an existing element but uses HTML escaping to ensure the content is safe for display in an HTML document.

**Pros and Cons**

1. **Using `insertAdjacentHTML` with `innerText`:**
	* Pros:
		+ Easy to use and understand.
		+ Fast, since it doesn't require parsing or escaping HTML.
	* Cons:
		+ Can lead to XSS (Cross-Site Scripting) vulnerabilities if the content is not properly sanitized.
2. **Using `insertAdjacentHTML` with HTML escaping:**
	* Pros:
		+ Ensures the content is safe for display in an HTML document, preventing XSS vulnerabilities.
	* Cons:
		+ Requires using a separate function (`escapeHtml`) to perform the escaping, adding complexity.

**Library and Purpose**

The library used here is not explicitly mentioned, but it's likely that `insertAdjacentHTML` is part of the HTML5 API. The purpose of this API is to provide a convenient way to append new elements or attributes to an existing element without affecting its structure.

**Special JS Feature/Syntax**

There is no special JavaScript feature or syntax being tested in these benchmark cases. They focus on comparing different approaches for inserting content into an element using `insertAdjacentHTML`.

**Other Alternatives**

If you're looking for alternatives to measure the performance of your code, you can consider:

* Using a profiling tool like Chrome DevTools or Firefox Developer Edition.
* Creating custom benchmarks using your preferred testing framework.
* Utilizing existing benchmarking libraries like Benchmark.js or Microbenchmark.

Keep in mind that MeasureThat.net is specifically designed for comparing JavaScript microbenchmarks, so it might not be the best option for more complex performance evaluations.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0

Browser/OS: Firefox 100 on Windows

View result in a separate tab

Test name	Executions per second
insertAdjacentHTML+innerText	259.3 Ops/sec
escape+insertAdjacentHTML	605.9 Ops/sec
insertAdjacentHTML+innerText w/ lastElementChild	239.0 Ops/sec

Related benchmarks:

insertAdjacentHTML+innerText vs escape+insertAdjacentHTML (version: 0)

Comparing performance of: insertAdjacentHTML+innerText vs escape+insertAdjacentHTML vs insertAdjacentHTML+innerText w/ lastElementChild

Created: 2 years ago by: Guest

Jump to the latest result

insertAdjacentHTML+innerText

escape+insertAdjacentHTML

insertAdjacentHTML+innerText w/ lastElementChild

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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