Benchmark: InnerHTML vs deleteRow

HTML Preparation code:

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

Script Preparation code:

var el = document.getElementById('tableBody');
for (i=0; i<10; i++) {
	var row = el.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
}

Tests:

innerHTML
var el = document.getElementById('tableBody'); el.innerHTML = ''
deleteRow
var el = document.getElementById('tableBody'); while (el.children.length) { el.deleteRow(-1) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
deleteRow

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Android 14; Mobile; rv:135.0) Gecko/135.0 Firefox/135.0

Browser/OS: Firefox Mobile 135 on Android

View result in a separate tab

Test name	Executions per second
innerHTML	469240.3 Ops/sec
deleteRow	1509330.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript benchmarking test case created on the MeasureThat.net platform. The goal of this benchmark is to measure the performance difference between two approaches for clearing a table: using `innerHTML` and deleting rows.

**Script Preparation Code vs. Html Preparation Code**

The script preparation code defines a function that creates 10 table rows and populates them with cell contents, which will be used as a test subject for the benchmarking test cases. The html preparation code is a simple HTML snippet that includes an empty `<table>` element with an ID of "tableBody", which is referenced in the script preparation code.

**Options Compared**

Two options are compared:

1. **innerHTML**: This approach involves setting the `innerHTML` property of the table body element to an empty string, effectively clearing all rows.
2. **deleteRow**: This approach involves using a loop to delete each row from the table body element, starting from the last row (index -1) and moving backwards.

**Pros and Cons**

* **innerHTML**:
	+ Pros: Simple to implement, straightforward logic.
	+ Cons: May cause issues with HTML structure, especially if the table contains other elements or attributes that need to be preserved.
* **deleteRow**:
	+ Pros: Preserves HTML structure, suitable for tables with complex layouts or attributes.
	+ Cons: More complex implementation, potentially slower due to looping and iteration.

**Library Usage**

Neither of the options explicitly uses a library. However, if we consider the `innerHTML` approach, it's worth noting that some browsers may have optimized implementations of `innerHTML` that use internal data structures and algorithms, which could impact performance.

**Special JS Feature/Syntax (None)**

There are no special JavaScript features or syntax used in this benchmarking test case.

**Other Considerations**

When implementing a similar benchmarking test case, it's essential to consider the following:

* Use a consistent testing framework and setup to ensure reproducibility of results.
* Optimize the test script for performance, avoiding unnecessary overhead or computations.
* Ensure that the test subject (in this case, the table) is properly initialized and populated before running the benchmark.

**Alternatives**

If you need to clear a table in JavaScript, there are alternative approaches you can consider:

1. **DOM manipulation libraries**: Libraries like jQuery or React DOM provide optimized methods for manipulating the DOM, including clearing tables.
2. **Custom implementations**: You can implement a custom solution using native JavaScript APIs, such as `DocumentFragment` or `CSSOM`.
3. **Browser-specific optimizations**: Some browsers have optimized implementations of certain DOM operations, such as `innerHTML` or `deleteRow`.

Related benchmarks:

InnerHTML vs deleteRow (version: 0)

Testing to see what is the fastest way to clear a table.

Comparing performance of: innerHTML vs deleteRow

Created: 6 years ago by: Guest

Jump to the latest result

innerHTML

deleteRow

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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