Benchmark: tr td removal - MeasureThat.net

HTML Preparation code:

<table id="table"></table>

Script Preparation code:

for (let i = 0; i < 50; i++) {
    let tr = document.createElement("TR");
    for (let j = 0; j < 50; j++) {
        tr.appendChild(document.createElement("TD"))
    }
    document.querySelector("table").appendChild(tr);
}

Tests:

textContent
var nodeTr = document.querySelectorAll('#table tr'); for(let i=0;i<nodeTr.length;i++){ nodeTr[i].textContent=""; }
removeChild
var nodeTr = document.querySelectorAll('#table tr'); for(let i=0;i<nodeTr.length;i++){ while(nodeTr[i].firstChild) {nodeTr[i].removeChild(nodeTr[i].firstChild)} }
remove
var nodeTr = document.querySelectorAll('#table tr'); for(let i=0;i<nodeTr.length;i++){ while(nodeTr[i].firstChild) {nodeTr[i].firstChild.remove()} }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
textContent
removeChild
remove

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
textContent	178061.6 Ops/sec
removeChild	256609.7 Ops/sec
remove	256314.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks.

**Benchmark Definition JSON**

The provided benchmark definition is for a script that creates a table with 50 rows and 50 columns, then repeatedly appends elements to each row. The test case removes all child nodes from each row using three different approaches: `removeChild`, `remove`, and their usage.

**Script Preparation Code**

This code creates an HTML table structure using JavaScript. It uses the `document.createElement` method to create table rows (`tr`) and columns (`td`). Each row is appended to a parent table, which is selected by its ID ("table").

**Html Preparation Code**

This code provides the basic HTML structure for the table, with an empty `id` attribute.

**Individual Test Cases**

There are three test cases:

1. **textContent**: This test case removes the text content from each row in the table.
2. **removeChild**: This test case removes all child nodes from each row in the table using the `removeChild` method.
3. **remove**: This test case removes all child nodes from each row in the table using a custom `remove` function (not shown in the provided code).

**Options Compared**

The three test cases compare the performance of removing child nodes from rows in different ways:

*   **textContent**: Uses the `textContent` property to clear text content from each row.
*   **removeChild**: Directly uses the `removeChild` method on each child node to remove them.
*   **remove**: Defines a custom `remove` function that iterates over the first child node of each row and removes it using its own `remove` method.

**Pros and Cons**

Here's a brief analysis of each approach:

*   **textContent**: Fastest, as it only sets the text content to an empty string.
    *   Pros: Simple and efficient.
    *   Cons: May not remove other child nodes (e.g., HTML elements), only text content.
*   **removeChild**: Removes all child nodes from each row.
    *   Pros: Comprehensive node removal, more thorough than `textContent`.
    *   Cons: Can be slower due to the extra method call and loop iteration.
*   **remove**: Custom function that iterates over and removes first child nodes.
    *   Pros: Allows for flexible removal of any type of node content.
    *   Cons: More complex and potentially slower than `textContent` or `removeChild`.

**Libraries Used**

There are no libraries explicitly mentioned in the provided code, but if a test case uses some library, it would likely be related to DOM manipulation.

**Special JS Features/Syntax (Not Mentioned)**

No special features or syntax were mentioned in this benchmark definition.

**Other Alternatives**

Some alternative approaches could include:

*   Using `Array.prototype.fill()` to clear the text content of each row.
*   Iterating over the child nodes using a loop and calling their `remove()` method.
*   Utilizing `DocumentFragment` for efficient removal of child nodes.

These alternatives would require adjustments in script preparation code and test case implementation.

Related benchmarks:

tr td removal (version: 0)

Comparing performance of: textContent vs removeChild vs remove

Created: one year ago by: Guest

Jump to the latest result

textContent

removeChild

remove

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):