Benchmark: Add rows to Table: insertRow() vs appending innerHTML 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);
Append innerHTML
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.innerHTML += html;
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()
Append innerHTML
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/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
insertRow()	77708.6 Ops/sec
Append innerHTML	0.2 Ops/sec
insertAdjacentHTML()	34861.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark that compares three different approaches to insert data into an HTML table: `insertRow()`, `appending innerHTML`, and `insertAdjacentHTML()`.

**What is being compared?**

1. **`insertRow()`**: This approach involves inserting rows into the table using the `insertRow()` method.
2. **`Appending innerHTML`**: This approach involves appending HTML strings to the table body using the `innerHTML` property.
3. **`insertAdjacentHTML()`**: This approach uses the `insertAdjacentHTML()` method to insert HTML content adjacent to an element.

**Pros and Cons of each approach:**

1. **`insertRow()`**:
	* Pros: Can be more efficient for inserting multiple rows, as it avoids unnecessary DOM modifications.
	* Cons: Requires creating a new row object and appending cells to it, which can lead to increased memory allocation and garbage collection overhead.
2. **`Appending innerHTML`**:
	* Pros: Simple and straightforward, with minimal overhead for small amounts of data.
	* Cons: Can be inefficient for large amounts of data, as it involves cloning the entire DOM tree, leading to unnecessary reflows and repaints.
3. **`insertAdjacentHTML()`**:
	* Pros: More efficient than appending innerHTML, especially for larger datasets, as it only requires inserting a single node into the DOM.
	* Cons: Requires support for the `insertAdjacentHTML()` method, which may not be available in older browsers.

**Library and syntax usage**

In this benchmark, no libraries are explicitly mentioned. However, if we examine the `insertRow()` approach more closely:

```javascript
var row = tbl.insertRow();
var cell = row.insertCell();
var textnode = document.createTextNode(data.one);
cell.appendChild(textnode);

// ...
```

We can see that it's using the `tbl` variable to access the table element, which suggests that this benchmark is targeting a specific DOM manipulation scenario.

**Special JS features or syntax**

There are no special JavaScript features or syntax used in this benchmark. The code is written in vanilla JavaScript and doesn't employ any advanced concepts like async/await, Promises, or modern JavaScript features.

**Other alternatives**

If you're looking for alternative approaches to insert data into an HTML table, some other options include:

* Using the `createElement()` method to create individual elements (e.g., `<tr>`, `<td>`) and appending them to the DOM.
* Utilizing a template engine or a library like Handlebars to generate the HTML content dynamically.
* Employing a more advanced templating approach using a framework like React or Angular.

Keep in mind that these alternatives might have varying degrees of overhead, complexity, or browser support compared to the approaches tested in this benchmark.

Related benchmarks:

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

Vannilla JS version, no jquery

Comparing performance of: insertRow() vs Append innerHTML vs insertAdjacentHTML()

Created: 4 years ago by: Guest

Jump to the latest result

insertRow()

Append innerHTML

insertAdjacentHTML()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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