Benchmark: insertAdjacentHTML+textContent vs escape+Improved

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+textContent
dest.innerHTML = ""; for(var i=0; i<1000; ++i){ dest.insertAdjacentHTML("beforeend", "<p></p>"); dest.lastChild.textContent = `Hello ${i} & hello again.`; }
escape+insertAdjacentHTML
dest.innerHTML = ""; for(var i=0; i<1000; ++i){ dest.insertAdjacentHTML("beforeend", `<p>${escapeHtml(`Hello ${i} & hello again.`)}</p>`); }
insertAdjacentHTML+textContent w/ lastElementChild
dest.innerHTML = ""; for(var i=0; i<1000; ++i){ dest.insertAdjacentHTML("beforeend", "<p></p>"); dest.lastElementChild.textContent = `Hello ${i} & hello again.`; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll explain the benchmark in detail.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark test created on MeasureThat.net. The test compares three different approaches for inserting HTML content into an element: `insertAdjacentHTML` with `textContent`, `escape` function, and `lastElementChild`.

**Script Preparation Code**

The script preparation code is as follows:
```javascript
const dest = document.getElementById('dest');

function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");
}
```
This code creates a `dest` element and defines an `escapeHtml` function. The `escapeHtml` function takes an input string `unsafe` and escapes its special characters to HTML-safe format using regular expressions.

**HTML Preparation Code**

The HTML preparation code is as follows:
```html
<div id='dest'></div>
```
This code creates a simple `div` element with the ID `dest`.

**Benchmark Test Cases**

There are three test cases:

1. **insertAdjacentHTML+textContent**: This test case uses `insertAdjacentHTML` to insert HTML content into the `dest` element and then sets the `textContent` of the last child element.
2. **escape+insertAdjacentHTML**: This test case uses `insertAdjacentHTML` with the escaped input string using the `escapeHtml` function and then sets the text content of the last element child.
3. **insertAdjacentHTML+textContent w/ lastElementChild**: This test case is similar to the first one, but it uses `lastElementChild` instead of `lastChild` to set the text content.

**Options Compared**

The three test cases compare the performance of different approaches for inserting HTML content into an element:

* **insertAdjacentHTML+textContent**: Uses `insertAdjacentHTML` to insert HTML content and then sets the text content of the last child element.
* **escape+insertAdjacentHTML**: Uses `insertAdjacentHTML` with the escaped input string using the `escapeHtml` function and then sets the text content of the last element child.
* **insertAdjacentHTML+textContent w/ lastElementChild**: Similar to the first one, but uses `lastElementChild` instead of `lastChild`.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **insertAdjacentHTML+textContent**:
	* Pros: Simple and efficient.
	* Cons: May not be optimal for all use cases (e.g., when dealing with complex HTML structures).
2. **escape+insertAdjacentHTML**:
	* Pros: Provides a safer alternative to using `insertAdjacentHTML` directly, as it escapes special characters.
	* Cons: May introduce additional overhead due to the escape function.
3. **insertAdjacentHTML+textContent w/ lastElementChild**:
	* Pros: Similar performance to the first approach, but with the added benefit of being able to access the last element child more efficiently.
	* Cons: Same as the first approach.

**Other Considerations**

The benchmark results show that the execution speed for `insertAdjacentHTML+textContent` and `insertAdjacentHTML+textContent w/ lastElementChild` are relatively close, suggesting that the choice between these two approaches may not have a significant impact on performance. However, using the `escapeHtml` function introduces additional overhead, which may affect the overall performance of the application.

**Alternative Approaches**

Other alternatives to consider when inserting HTML content into an element include:

* Using a template engine like Handlebars or Pug.
* Creating a custom rendering function that uses a combination of DOM manipulation and templating engines.
* Using a library like jQuery's `html()` method, which provides a more concise way of setting the innerHTML of an element.

Keep in mind that the choice of approach depends on the specific use case and requirements of your application.

Latest run results:

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

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

Browser/OS: Chrome 101 on Windows

View result in a separate tab

Test name	Executions per second
insertAdjacentHTML+textContent	150.9 Ops/sec
escape+insertAdjacentHTML	150.5 Ops/sec
insertAdjacentHTML+textContent w/ lastElementChild	149.3 Ops/sec

Related benchmarks:

insertAdjacentHTML+textContent vs escape+Improved (version: 0)

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

Created: 2 years ago by: Guest

Jump to the latest result

insertAdjacentHTML+textContent

escape+insertAdjacentHTML

insertAdjacentHTML+textContent w/ lastElementChild

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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