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

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):

LLMs can make mistakes. Check important info.

I'll break down the provided benchmarking setup and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark is comparing two approaches to render HTML content:

1. **DOM Parser**: Using the `window.DOMParser` API to parse a string into an HTML document.
2. **insertAdjacentHTML**: Using the `insertAdjacentHTML` method on the `document.createElement("div")` element to insert HTML content.

**Script Preparation Code**

The script preparation code is the same for both approaches:
```javascript
var string = `\r\n<div class="htmlTooltip">\r\n    <h1>Detalles de flota:</h1>\r\n    <div class="splitLine"></div>\r\n            <table cellpadding="0" cellspacing="0" class="fleetinfo">\r\n            <tr>\r\n                <th colspan="3">Naves:</th>\r\n            </tr>\r\n                                                <tr>\r\n                        <td colspan="2">Nave grande de carga:</td>\r\n                        <td class="value">30.000</td>\r\n                    </tr>\r\n                                    <tr>\r\n                        <td colspan="2">Reciclador:</td>\r\n                        <td class="value">5</td>\r\n                    </tr>\r\n                                    <tr>\r\n                        <td colspan="2">Sonda de espionaje:</td>\r\n                        <td class="value">495</td>\r\n                    </tr>\r\n                                    <tr>\r\n                        <td colspan="2">Estrella de la muerte:</td>\r\n                        <td class="value">15.001</td>\r\n                    </tr>\r\n                                    <tr>\r\n                        <td colspan="2">Explorador:</td>\r\n                        <td class="value">5</td>\r\n                    </tr>\r\n                                    <tr>\r\n                        <td colspan="2">Segador:</td>\r\n                        <td class="value">5</td>\r\n                    </tr>\r\n                                                        <tr>\r\n                    <td colspan="3">&nbsp;</td>\r\n                </tr>\r\n                <tr>\r\n                    <th colspan="3">Carga:</th>\r\n                </tr>\r\n                                                <tr>\r\n                        <td colspan="2">Metal:</td>\r\n                        <td class="value">518.317.197</td>\r\n                    </r\n                                    <tr>\r\n                        <td colspan="2">Cristal:</td>\r\n                        <td class="value">5.619.435.427</td>\r\n                    </tr>\r\n                                    <tr>\r\n                        <td colspan="2">Deuterio:</td>\r\n                        <td class="value">4.006.147.760</td>\r\n                    </tr>\r\n                                    <tr>\r\n                        <td colspan="2">Alimentación:</td>\r\n                        <td class="value">0</td>\r\n                    </tr>\r\n                                    </table>\r\n    </div>    `;
```
This code defines a string containing HTML content, which is used for both approaches.

**Html Preparation Code**

There is no HTML preparation code provided for either approach. This means that the benchmark assumes that the input string already contains valid HTML content and does not provide any additional processing or formatting.

**Comparison**

The benchmark compares the execution times of two approaches:

1. **DOM Parser**: Using `window.DOMParser().parseFromString(string, "text/html")` to parse the input string into an HTML document.
2. **insertAdjacentHTML**: Using `div.insertAdjacentHTML("afterbegin", string)` to insert the HTML content into a newly created element.

**Pros and Cons**

**DOM Parser:**

Pros:

* Portable and compatible with various browsers
* Can handle complex HTML documents

Cons:

* May incur additional overhead due to parsing the entire document
* May not be as efficient for large or complex documents

**insertAdjacentHTML:**

Pros:

* Efficient for inserting content into an existing element
* Does not require parsing the entire document

Cons:

* May not be compatible with older browsers that do not support `insertAdjacentHTML`
* May have performance implications if used extensively

**Other Considerations**

The benchmark assumes that the input string contains valid HTML content. If the input is malformed or not well-formed, the results may not be accurate.

Additionally, the benchmark does not account for other factors that could affect performance, such as:

* The complexity of the HTML document
* The size of the input string
* The browser's rendering engine and version

**Conclusion**

The benchmark provides a simple comparison between two approaches to render HTML content. While it highlights the differences in execution times between DOM Parser and insertAdjacentHTML, it does not account for other factors that could impact performance. As with any benchmarking exercise, it is essential to consider these limitations and potential sources of variability when interpreting the results.

Latest run results:

Run details: (Test run date: 3 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

Related benchmarks:

DOM Parser vs insertAdjacentHTML (version: 0)

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

Created: 4 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

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):