Benchmark: DOM Parser vs insertAdjacentHTML

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">&nbsp;</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:

DOM Parser (small)
const html = new window.DOMParser().parseFromString(string, "text/html");
insertAdjacentHTML (small)
const div = document.createElement("div"); const html = div.insertAdjacentHTML("afterbegin", string);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DOM Parser (small)
insertAdjacentHTML (small)

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Linux

View result in a separate tab

Test name	Executions per second
DOM Parser (small)	5349.4 Ops/sec
insertAdjacentHTML (small)	6390.7 Ops/sec

DOM Parser vs insertAdjacentHTML (version: 0)

Comparing performance of: DOM Parser (small) vs insertAdjacentHTML (small)

Created: 3 months ago by: Guest

Jump to the latest result

DOM Parser (small)

insertAdjacentHTML (small)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A