Benchmark: JS: append vs prepend vs insertBefore vs appendChild vs insertAdjacentElement in a populated table

JS: append vs prepend vs insertBefore vs appendChild vs insertAdjacentElement in a populated table (version: 0)

The similar tests I found here "test" adding one single node to another singe node. Those tests are quite useless for real world situations. The use case here is that the rows array is sorted (not included) and then the table is restructured accordingly.

Comparing performance of: append vs prepend vs insertBefore vs appendChild vs insertAdjacentElement

Created: one year ago by: Registered User

Jump to the latest result

HTML Preparation code:

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

Script Preparation code:

var rows = [];
for (var i = 0; i < 10000; ++i) {
    var row = document.createElement("tr");
    var cell = document.createElement("td");
    cell.appendChild(document.createTextNode(i));
    row.appendChild(cell);
    body.appendChild(row);
    rows.push(row);
}
var nodes = body.childNodes;

Tests:

append
for (var i = 0; i < 10000; ++i) { body.append(rows[i]); }
prepend
for (var i = 0; i < 10000; ++i) { body.prepend(rows[i]); }
insertBefore
for (var i = 0; i < 10000; ++i) { body.insertBefore(rows[9999 - i], nodes[i]); }
appendChild
for (var i = 0; i < 10000; ++i) { body.appendChild(rows[i]); }
insertAdjacentElement
for (var i = 0; i < 10000; ++i) { body.insertAdjacentElement("beforeend",rows[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append
prepend
insertBefore
appendChild
insertAdjacentElement

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
append	260.8 Ops/sec
prepend	260.7 Ops/sec
insertBefore	6.4 Ops/sec
appendChild	309.4 Ops/sec
insertAdjacentElement	304.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different methods for appending or modifying elements in an HTML table is crucial, especially when dealing with large datasets.

**Overview of Benchmark**

The provided benchmark measures the execution time of different DOM manipulation methods: `append`, `prepend`, `insertBefore`, `appendChild`, and `insertAdjacentElement`. It creates a populated table by generating 10,000 rows and appends or modifies them using each method.

**Options Compared**

1.  **`append`**: Appends an element to the end of its parent container.
2.  **`prepend`**: Prepends an element to the beginning of its parent container.
3.  **`insertBefore`**: Inserts a node before a specified reference node in the DOM tree.
4.  **`appendChild`**: Appends one or more child nodes to the end of the parent node's children list.
5.  **`insertAdjacentElement`**: Inserts an element at a specific position relative to its parent element.

**Pros and Cons**

1.  **`append`**: Pros:
    *   Easy to use
    *   Fastest execution time (due to the simplicity of appending)
    *   Suitable for small datasets

Cons:
    *   Not suitable for large datasets, as it can lead to inefficient DOM tree structure changes.
2.  **`prepend`**: Pros:
    *   Suitable for small datasets or when reversing a list
3.  **`insertBefore`**: Pros:
    *   Flexible and efficient for inserting elements before other nodes
4.  **`appendChild`**: Pros:
    *   Fastest execution time (due to the simplicity of appending)
5.  **`insertAdjacentElement`**: Pros:
    *   Efficient for inserting elements at specific positions

Cons:

*   Limited flexibility compared to `insertBefore`

**Library and Syntax Used**

There is no explicit library mentioned in the benchmark setup code, but it uses native JavaScript DOM APIs.

**Special JS Features or Syntax Used (if any)**

None are explicitly used in this benchmark. However, note that using certain advanced features like async/await can affect performance when dealing with large datasets or DOM manipulation.

**Other Alternatives**

Some alternative approaches could include:

*   **Using a library**: Instead of native JavaScript DOM APIs, libraries like jQuery or a custom implementation using a different approach (e.g., using a virtual DOM).
*   **Optimized algorithms**: Implementing optimized algorithms for specific use cases, such as using a merge sort or insertion sort for inserting elements.
*   **Parallel processing**: Utilizing parallel processing techniques to speed up execution times, especially when dealing with large datasets.

Keep in mind that the best approach often depends on the specific requirements and constraints of your project.

Related benchmarks:

JS: append vs prepend vs insertBefore vs appendChild vs insertAdjacentElement in a populated table (version: 0)

The similar tests I found here "test" adding one single node to another singe node. Those tests are quite useless for real world situations. The use case here is that the rows array is sorted (not included) and then the table is restructured accordingly.

Comparing performance of: append vs prepend vs insertBefore vs appendChild vs insertAdjacentElement

Created: one year ago by: Registered User

Jump to the latest result

append

prepend

insertBefore

appendChild

insertAdjacentElement

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