Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
insertAdjacentHTML+textContent vs escape+insertAdjacentHTML
(version: 0)
Comparing performance of:
insertAdjacentHTML+textContent vs escape+insertAdjacentHTML vs insertAdjacentHTML+textContent w/ lastElementChild
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id='dest'></div>
Script Preparation code:
const dest = document.getElementById('dest'); function escapeHtml(unsafe) { return unsafe .replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">"); }
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
var html = ""; for(var i=0; i<1000; ++i){ html += `<p>${escapeHtml(`Hello ${i} & hello again.`)}</p>`; } dest.innerHTML = html;
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>
Run tests (3)
Previous results
Fork
Test case name
Result
insertAdjacentHTML+textContent
escape+insertAdjacentHTML
insertAdjacentHTML+textContent w/ lastElementChild
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**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 `&`, `<` becomes `<`, 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.
Related benchmarks:
insertAdjacentHTML+innerText vs escape+insertAdjacentHTML
insertAdjacentHTML+textContent vs escape+Improved
HTML Escape textContent vs replace
Escape HTML regex vs replace vs textNode vs Option 4
Comments
Confirm delete:
Do you really want to delete benchmark?