Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
DOM Parser vs insertAdjacentHTML simple
(version: 0)
Comparing performance of:
DOMParser vs insertAdjacentHTML
Created:
2 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var string = ` <div class="htmlTooltip"> </div> `;
Tests:
DOMParser
const html = new window.DOMParser().parseFromString(string, "text/html");
insertAdjacentHTML
const div = document.createElement("div"); const html = div.insertAdjacentHTML("afterbegin", string);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
DOMParser
insertAdjacentHTML
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
Browser/OS:
Chrome 128 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=554856" width="100%" height="500px"></iframe>
insertAdjacentHTML
316K/s
DOMParser
125K/s
View exact numbers
Test name
Executions per second
✓
insertAdjacentHTML
316,027 Ops/sec
DOMParser
124,823 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what's being tested. **Benchmark Definition** The benchmark is designed to compare two approaches: parsing HTML using the `window.DOMParser` API, and inserting HTML content using the `insertAdjacentHTML()` method on an existing DOM element. **Options Compared** Two options are compared: 1. **DOMParser**: This option uses the `window.DOMParser` API to parse the input string as HTML. 2. **insertAdjacentHTML**: This option creates a new DOM element and inserts the input string into it using the `insertAdjacentHTML()` method. **Pros and Cons of Each Approach** **DOMParser:** Pros: * More explicit and controlled way of parsing HTML * Can be used for more complex HTML structures Cons: * May have overhead due to the parsing process * Requires additional memory allocation for the parsed DOM tree **insertAdjacentHTML:** Pros: * Faster, as it doesn't involve parsing or creating a new DOM tree * More lightweight, with less memory allocation required Cons: * Less explicit and controlled way of inserting HTML content * May not work well with complex HTML structures **Library Used** The `window.DOMParser` API is part of the W3C DOM (Document Object Model) specification. It provides a way to parse HTML strings into DOM trees. **Special JS Feature/Syntax** None mentioned in this benchmark, but note that other benchmarks might test features like async/await or modern JavaScript syntax. **Other Alternatives** Some alternative approaches could be: 1. **String manipulation**: Instead of using `DOMParser` or `insertAdjacentHTML`, the benchmark could compare string manipulation techniques to extract HTML content from a string. 2. **Template engines**: Another approach would be to use a template engine like Handlebars or Mustache to generate and parse HTML templates. 3. **Other parsing methods**: Other parsing methods, such as using regular expressions or a custom parsing function, could also be tested. Overall, this benchmark provides a good comparison between two approaches to inserting HTML content into a DOM tree, highlighting the trade-offs between explicit parsing and lightweight insertion methods.
Related benchmarks
insertAdjacentHtml vs innerHTML - Replace
insertAdjacentHtml vs innerHTML (multiple)
insertAdjacentHtml with remove vs innerHTML
insertAdjacentHtml vs createContextualFragment
Comments
Confirm delete:
Do you really want to delete benchmark?