Benchmark: insertAdjacentHTML+textContent 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+textContent
dest.innerHTML = ""; for(var i=0; i<1000; ++i){ dest.insertAdjacentHTML("beforeend", ""); dest.lastChild.textContent = `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+textContent w/ lastElementChild
dest.innerHTML = ""; for(var i=0; i<1000; ++i){ dest.insertAdjacentHTML("beforeend", ""); 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 27 days ago):

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents a benchmark test case, which compares the performance of two approaches: using `insertAdjacentHTML` with text content (`textContent`) versus using `escape()` followed by `insertAdjacentHTML`. We'll break down each option, their pros and cons, and other considerations.

**Benchmark Options**

1. **`insertAdjacentHTML + textContent`**
	* Description: This approach uses the `insertAdjacentHTML()` method to insert HTML content into the DOM, followed by setting the `textContent` property of the newly inserted element.
	* Pros:
		+ Efficient, as it only involves a single DOM mutation ( insertion).
		+ Less memory allocation, as no new objects are created.
2. **`escape() + insertAdjacentHTML`**
	* Description: This approach uses the `escape()` function to escape special characters in the text content, followed by using `insertAdjacentHTML()` to insert the escaped HTML content into the DOM.

**Pros and Cons**

1. **`insertAdjacentHTML + textContent`**
	* Pros:
		+ Fastest, as it minimizes DOM mutations.
		+ Less memory allocation, reducing potential performance overhead.
	* Cons:
		+ May not work correctly for complex HTML structures or non-ASCII characters.
2. **`escape() + insertAdjacentHTML`**
	* Pros:
		+ Works with any type of content, including non-ASCII characters.
		+ Provides better code readability and maintainability.

**Library: `escape()`**

The `escape()` function is a built-in JavaScript method that escapes special characters in a string to prevent XSS attacks. It replaces certain special characters with their corresponding HTML entities (e.g., `&` becomes `&amp;`, `<` becomes `&lt;`, etc.). This library is used to ensure safe insertion of user-provided content into the DOM.

**Special JS Feature: `insertAdjacentHTML`**

`insertAdjacentHTML()` is a modern JavaScript method introduced in ECMAScript 2017 (ES7). It allows you to insert HTML content at specific positions within an element's DOM tree, without creating new elements or modifying existing ones. This approach is more efficient and flexible than using `appendChild()`.

**Other Considerations**

* When dealing with complex HTML structures or non-ASCII characters, the performance difference between these two approaches may be negligible.
* If you need to insert content at multiple positions within an element, using `insertAdjacentHTML` can provide better performance compared to appending new elements using `appendChild()`.
* Always use a reliable method for escaping user-provided content to prevent XSS attacks.

**Alternative Approaches**

Other alternatives to compare the performance of inserting HTML content into the DOM include:

1. **Using `appendChild()`**: This approach involves creating new elements and appending them to an existing element's DOM tree.
2. **Using `innerHTML`**: This approach involves setting the `innerHTML` property of an element, which can lead to security vulnerabilities due to XSS attacks.

Keep in mind that these alternatives may have different performance characteristics and requirements for handling complex content or edge cases.

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	141.2 Ops/sec
escape+insertAdjacentHTML	517.9 Ops/sec
insertAdjacentHTML+textContent w/ lastElementChild	145.8 Ops/sec

Related benchmarks:

insertAdjacentHTML+textContent vs escape+insertAdjacentHTML (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 27 days ago):