Benchmark: Clone And Copy Node (Table tbody)

HTML Preparation code:

<table class="table-old">
	<tbody>
      <tr>
        <td class="old-td">old-td 1</td><td class="old-td">old-td 2</td><td class="old-td">old-td 3</td><td class="old-td">old-td 4</td><td class="old-td">old-td 5</td><td class="old-td">old-td 6</td><td class="old-td">old-td 7</td><td class="old-td">old-td 8</td><td class="old-td">old-td 9</td><td class="old-td">old-td 10</td>
        <td class="old-td">old-td 11</td><td class="old-td">old-td 12</td><td class="old-td">old-td 13</td><td class="old-td">old-td 14</td><td class="old-td">old-td 15</td><td class="old-td">old-td 16</td><td class="old-td">old-td 17</td><td class="old-td">old-td 18</td><td class="old-td">old-td 19</td><td class="old-td">old-td 20</td>
        <td class="old-td">old-td 21</td><td class="old-td">old-td 22</td><td class="old-td">old-td 23</td><td class="old-td">old-td 24</td><td class="old-td">old-td 25</td><td class="old-td">old-td 26</td><td class="old-td">old-td 27</td><td class="old-td">old-td 28</td><td class="old-td">old-td 29</td><td class="old-td">old-td 30</td>
        <td class="old-td">old-td 31</td><td class="old-td">old-td 32</td><td class="old-td">old-td 33</td><td class="old-td">old-td 34</td><td class="old-td">old-td 35</td><td class="old-td">old-td 36</td><td class="old-td">old-td 37</td><td class="old-td">old-td 38</td><td class="old-td">old-td 39</td><td class="old-td">old-td 40</td>
        <td class="old-td">old-td 41</td>
        <td class="old-td">old-td 42</td>
        <td class="old-td">old-td 43</td>
        <td class="old-td">old-td 44</td>
        <td class="old-td">old-td 45</td>
        <td class="old-td">old-td 46</td>
        <td class="old-td">old-td 47</td>
        <td class="old-td">old-td 48</td>
        <td class="old-td">old-td 49</td>
        <td class="old-td">old-td 50</td>
      </tr>
	</tbody>
</table>

<table class="table-new"></table>

Script Preparation code:

var $table_old = document.getElementsByClassName('table-old')[0];
var $table_new = document.getElementsByClassName('table-new')[0];

Tests:

createElement
var $tbody = document.createElement('tbody'); $table_new.insertAdjacentElement('beforeend', $tbody);
cloneNode
var $tbody = $table_old.getElementsByTagName('tbody')[0].cloneNode(); $table_new.insertAdjacentElement('beforeend', $tbody);
String insertAdjacentHTML
var $tbody = '<tbody></tbody>'; $table_new.insertAdjacentHTML('beforeend', $tbody);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
cloneNode
String insertAdjacentHTML

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its results.

**Benchmark Definition**

The benchmark measures the performance of three approaches for inserting a table body into an HTML table:

1. `createElement`: Creating a new `<tbody>` element using `document.createElement()`.
2. `cloneNode`: Cloning an existing `<tbody>` element from another table.
3. `String insertAdjacentHTML`: Inserting a pre-defined string containing the HTML for a `<tbody>` element.

**Options Compared**

The three options are compared in terms of their performance, measured by the number of executions per second.

**Pros and Cons**

Here's a brief summary of each approach:

1. **`createElement`**:
	* Pros: Fastest, as it only involves creating a new DOM node.
	* Cons: Requires an additional function call (`document.createElement()`), which may incur some overhead.
2. **`cloneNode`**:
	* Pros: Can be faster for large tables, as it avoids the overhead of creating a new element.
	* Cons: Slower for small tables, as cloning an existing element can be more expensive than creating a new one.
3. **`String insertAdjacentHTML`**:
	* Pros: Can be slower due to string parsing and insertion, but is often used in production code.
	* Cons: May incur additional overhead due to the pre-defined string.

**Library**

None of the options explicitly use a library, but `cloneNode()` uses the DOM API for cloning elements. If you're using a library like jQuery, you may need to consider its impact on performance when inserting DOM nodes.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax used in this benchmark. The tests only involve basic DOM manipulation and string insertion.

**Other Alternatives**

If you want to explore other approaches, here are some alternatives:

1. **`innerHTML`**: Similar to `insertAdjacentHTML`, but uses the inner HTML property of an element. This can be slower due to additional parsing overhead.
2. **`appendChild` with a fragment**: Using a fragment (`<tbody fragment>`) and appending it to the table can be faster than creating a new element or cloning an existing one.
3. **Native Web Workers**: If you need to perform extensive DOM manipulation, using native Web Workers can help offload tasks and improve performance.

Keep in mind that these alternatives may have different trade-offs and may not always outperform the original options used in this benchmark.

Related benchmarks:

Clone And Copy Node (Table tbody) (version: 0)

Comparing performance of: createElement vs cloneNode vs String insertAdjacentHTML

Created: 6 years ago by: Registered User

Jump to the latest result

createElement

cloneNode

String insertAdjacentHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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