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> `;
const html = new window.DOMParser().parseFromString(string, "text/html");
const div = document.createElement("div");
const html = div.insertAdjacentHTML("afterbegin", string);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
DOMParser | |
insertAdjacentHTML |
Test name | Executions per second |
---|---|
DOMParser | 2766.5 Ops/sec |
insertAdjacentHTML | 2417.8 Ops/sec |
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:
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.