Benchmark: Add rows to Table: insertRow() vs insertAdjacentHTML

HTML Preparation code:

<table id="tbl">
  <tbody></tbody>
</table>

Script Preparation code:

var tbody = tbl.tBodies[0];

var data = { one: 'one', two: 'two', three: 'three', four: 'four', five: 'five' };

Tests:

insertRow()
var row = tbl.insertRow(); var cell = row.insertCell(); var textnode = document.createTextNode(data.one); cell.appendChild(textnode); cell = row.insertCell(); textnode = document.createTextNode(data.two); cell.appendChild(textnode); cell = row.insertCell(); textnode = document.createTextNode(data.three); cell.appendChild(textnode); cell = row.insertCell(); textnode = document.createTextNode(data.four); cell.appendChild(textnode); cell = row.insertCell(); textnode = document.createTextNode(data.five); cell.appendChild(textnode);
insertAdjacentHTML()
var html = '<tr>'; html += '<td>'+data.one+'</td>'; html += '<td>'+data.two+'</td>'; html += '<td>'+data.three+'</td>'; html += '<td>'+data.four+'</td>'; html += '<td>'+data.five+'</td>'; html += '</tr>'; tbody.insertAdjacentHTML('beforeend', html);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
insertRow()
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/117.0.0.0 Safari/537.36

Browser/OS: Chrome 117 on Windows

View result in a separate tab

Test name	Executions per second
insertRow()	38876.8 Ops/sec
insertAdjacentHTML()	75441.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark, specifically measuring the performance of two approaches for inserting table rows: `insertRow()` and `insertAdjacentHTML()`. The benchmark is designed to test vanilla JS versions without using jQuery.

**Test Cases**

There are two individual test cases:

1.  **`insertRow()`**: This test case manually inserts rows into a table body using the `insertRow()` method, followed by appending text nodes to each cell.
2.  **`insertAdjacentHTML()`**: This test case uses `insertAdjacentHTML()` to insert a string containing HTML elements (in this case, table rows) and appends it to the end of the table body.

**Comparison**

The two approaches are compared in terms of performance, measured by the number of executions per second. The benchmark measures how fast each approach can execute.

**Options Compared**

*   **`insertRow()`**: A method that creates a new row element and inserts it into the table body.
*   **`insertAdjacentHTML()`**: A method that allows inserting HTML elements at a specified position relative to an element.

**Pros and Cons of Each Approach**

### `insertRow()`

Pros:

*   More explicit control over the insertion process, potentially allowing for more customization or optimization.
*   Could be less dependent on browser optimizations or implementation details specific to `insertAdjacentHTML()`.

Cons:

*   Requires manual creation of row elements and cell nodes, which can add overhead due to DOM manipulation.
*   May require additional time for the browser to optimize or finalize the insertion process.

### `insertAdjacentHTML()`

Pros:

*   Can provide a performance boost due to optimized browser handling of HTML strings, potentially reducing parsing and layout times.
*   Allows for more concise code, reducing manual DOM creation and management overhead.

Cons:

*   Less control over the insertion process, as it relies on browser-specific optimizations.
*   May introduce additional dependencies or complexities due to the use of an external string representation.

**Library/Functionality Used**

The benchmark uses the `insertAdjacentHTML()` method from the JavaScript DOM API. This method allows inserting HTML elements at a specified position relative to an element.

**Special JS Feature/Syntax**

None mentioned in the provided benchmark, but it's essential to note that some newer browsers or versions may optimize or handle certain features differently, affecting performance comparisons.

**Alternatives**

Some potential alternatives for building table rows include:

*   Using `createElement()` and setting attributes, then appending elements to the table body.
*   Leveraging third-party libraries (e.g., jQuery) specifically designed for DOM manipulation and table row creation.
*   Employing other rendering or layout engines like WebAssembly or Canvas for faster rendering.

Keep in mind that each approach has its trade-offs and may better suit specific use cases.

Related benchmarks:

Add rows to Table: insertRow() vs insertAdjacentHTML (version: 0)

Vannilla JS version, no jquery

Comparing performance of: insertRow() vs insertAdjacentHTML()

Created: 3 years ago by: Guest

Jump to the latest result

insertRow()

insertAdjacentHTML()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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