Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
DOM Parser vs insertAdjacentHTML v2
(version: 0)
Comparing performance of:
DOMParser vs insertAdjacentHTML
Created:
one year ago
by:
Guest
Jump to the latest result
Script Preparation code:
var string = ` <div class="htmlTooltip"> <h1>Detalles de flota:</h1> <div class="splitLine"></div> <table cellpadding="0" cellspacing="0" class="fleetinfo"> <tr> <th colspan="3">Naves:</th> </tr> <tr> <td colspan="2">Nave grande de carga:</td> <td class="value">30.000</td> </tr> <tr> <td colspan="2">Reciclador:</td> <td class="value">5</td> </tr> <tr> <td colspan="2">Sonda de espionaje:</td> <td class="value">495</td> </tr> <tr> <td colspan="2">Estrella de la muerte:</td> <td class="value">15.001</td> </tr> <tr> <td colspan="2">Explorador:</td> <td class="value">5</td> </tr> <tr> <td colspan="2">Segador:</td> <td class="value">5</td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <th colspan="3">Carga:</th> </tr> <tr> <td colspan="2">Metal:</td> <td class="value">518.317.197</td> </tr> <tr> <td colspan="2">Cristal:</td> <td class="value">5.619.435.427</td> </tr> <tr> <td colspan="2">Deuterio:</td> <td class="value">4.006.147.760</td> </tr> <tr> <td colspan="2">Alimentación:</td> <td class="value">0</td> </tr> </table> </div> <div class="htmlTooltip"> <h1>Detalles de flota:</h1> <div class="splitLine"></div> <table cellpadding="0" cellspacing="0" class="fleetinfo"> <tr> <th colspan="3">Naves:</th> </tr> <tr> <td colspan="2">Nave grande de carga:</td> <td class="value">30.000</td> </tr> <tr> <td colspan="2">Reciclador:</td> <td class="value">5</td> </tr> <tr> <td colspan="2">Sonda de espionaje:</td> <td class="value">495</td> </tr> <tr> <td colspan="2">Estrella de la muerte:</td> <td class="value">15.001</td> </tr> <tr> <td colspan="2">Explorador:</td> <td class="value">5</td> </tr> <tr> <td colspan="2">Segador:</td> <td class="value">5</td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <th colspan="3">Carga:</th> </tr> <tr> <td colspan="2">Metal:</td> <td class="value">518.317.197</td> </tr> <tr> <td colspan="2">Cristal:</td> <td class="value">5.619.435.427</td> </tr> <tr> <td colspan="2">Deuterio:</td> <td class="value">4.006.147.760</td> </tr> <tr> <td colspan="2">Alimentación:</td> <td class="value">0</td> </tr> </table> </div> <div class="htmlTooltip"> <h1>Detalles de flota:</h1> <div class="splitLine"></div> <table cellpadding="0" cellspacing="0" class="fleetinfo"> <tr> <th colspan="3">Naves:</th> </tr> <tr> <td colspan="2">Nave grande de carga:</td> <td class="value">30.000</td> </tr> <tr> <td colspan="2">Reciclador:</td> <td class="value">5</td> </tr> <tr> <td colspan="2">Sonda de espionaje:</td> <td class="value">495</td> </tr> <tr> <td colspan="2">Estrella de la muerte:</td> <td class="value">15.001</td> </tr> <tr> <td colspan="2">Explorador:</td> <td class="value">5</td> </tr> <tr> <td colspan="2">Segador:</td> <td class="value">5</td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <th colspan="3">Carga:</th> </tr> <tr> <td colspan="2">Metal:</td> <td class="value">518.317.197</td> </tr> <tr> <td colspan="2">Cristal:</td> <td class="value">5.619.435.427</td> </tr> <tr> <td colspan="2">Deuterio:</td> <td class="value">4.006.147.760</td> </tr> <tr> <td colspan="2">Alimentación:</td> <td class="value">0</td> </tr> </table> </div> <div class="htmlTooltip"> <h1>Detalles de flota:</h1> <div class="splitLine"></div> <table cellpadding="0" cellspacing="0" class="fleetinfo"> <tr> <th colspan="3">Naves:</th> </tr> <tr> <td colspan="2">Nave grande de carga:</td> <td class="value">30.000</td> </tr> <tr> <td colspan="2">Reciclador:</td> <td class="value">5</td> </tr> <tr> <td colspan="2">Sonda de espionaje:</td> <td class="value">495</td> </tr> <tr> <td colspan="2">Estrella de la muerte:</td> <td class="value">15.001</td> </tr> <tr> <td colspan="2">Explorador:</td> <td class="value">5</td> </tr> <tr> <td colspan="2">Segador:</td> <td class="value">5</td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <th colspan="3">Carga:</th> </tr> <tr> <td colspan="2">Metal:</td> <td class="value">518.317.197</td> </tr> <tr> <td colspan="2">Cristal:</td> <td class="value">5.619.435.427</td> </tr> <tr> <td colspan="2">Deuterio:</td> <td class="value">4.006.147.760</td> </tr> <tr> <td colspan="2">Alimentación:</td> <td class="value">0</td> </tr> </table> </div> <div class="htmlTooltip"> <h1>Detalles de flota:</h1> <div class="splitLine"></div> <table cellpadding="0" cellspacing="0" class="fleetinfo"> <tr> <th colspan="3">Naves:</th> </tr> <tr> <td colspan="2">Nave grande de carga:</td> <td class="value">30.000</td> </tr> <tr> <td colspan="2">Reciclador:</td> <td class="value">5</td> </tr> <tr> <td colspan="2">Sonda de espionaje:</td> <td class="value">495</td> </tr> <tr> <td colspan="2">Estrella de la muerte:</td> <td class="value">15.001</td> </tr> <tr> <td colspan="2">Explorador:</td> <td class="value">5</td> </tr> <tr> <td colspan="2">Segador:</td> <td class="value">5</td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <th colspan="3">Carga:</th> </tr> <tr> <td colspan="2">Metal:</td> <td class="value">518.317.197</td> </tr> <tr> <td colspan="2">Cristal:</td> <td class="value">5.619.435.427</td> </tr> <tr> <td colspan="2">Deuterio:</td> <td class="value">4.006.147.760</td> </tr> <tr> <td colspan="2">Alimentación:</td> <td class="value">0</td> </tr> </table> </div> <div class="htmlTooltip"> <h1>Detalles de flota:</h1> <div class="splitLine"></div> <table cellpadding="0" cellspacing="0" class="fleetinfo"> <tr> <th colspan="3">Naves:</th> </tr> <tr> <td colspan="2">Nave grande de carga:</td> <td class="value">30.000</td> </tr> <tr> <td colspan="2">Reciclador:</td> <td class="value">5</td> </tr> <tr> <td colspan="2">Sonda de espionaje:</td> <td class="value">495</td> </tr> <tr> <td colspan="2">Estrella de la muerte:</td> <td class="value">15.001</td> </tr> <tr> <td colspan="2">Explorador:</td> <td class="value">5</td> </tr> <tr> <td colspan="2">Segador:</td> <td class="value">5</td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <th colspan="3">Carga:</th> </tr> <tr> <td colspan="2">Metal:</td> <td class="value">518.317.197</td> </tr> <tr> <td colspan="2">Cristal:</td> <td class="value">5.619.435.427</td> </tr> <tr> <td colspan="2">Deuterio:</td> <td class="value">4.006.147.760</td> </tr> <tr> <td colspan="2">Alimentación:</td> <td class="value">0</td> </tr> </table> </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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Browser/OS:
Chrome 126 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=533730" width="100%" height="500px"></iframe>
Test name
Executions per second
DOMParser
2766.5 Ops/sec
insertAdjacentHTML
2417.8 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll do my best to help. Given the provided HTML and benchmark data, I'm assuming we're trying to analyze the performance of different DOM manipulation techniques in Chrome 126. The first benchmark result shows that using `DOMParser` is faster than other methods, with an execution rate of approximately 2766.52 executions per second. The second benchmark result indicates that using `insertAdjacentHTML` is slower than `DOMParser`, but still relatively efficient, with an execution rate of around 2417.78 executions per second. To determine the best approach for a specific use case, I would need more information about the requirements and constraints of the project, such as: * The size and complexity of the HTML data being processed * The desired performance level and trade-offs between speed and memory usage * Any specific features or APIs that need to be supported If you provide more context or clarify the questions being asked, I'll do my best to help you analyze and choose the most suitable approach for your use case.
Related benchmarks:
querySelectorAll vs. getElementsByTagName
getElementById vs querySelector with known parent
DOM Parser vs insertAdjacentHTML
createContextualFragment vs template.innerHTML
Comments
Confirm delete:
Do you really want to delete benchmark?