Benchmark: Clone And Copy Node - v3

HTML Preparation code:

<div id="container">
  <table id="element_1">
      <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 id="element_2">
      <tbody>
          <tr></tr>
      </tbody>
  </table>
</div>

Script Preparation code:

var $element_2 = document.getElementById('element_2');
var $container = document.getElementById('container');

var $clone = document.getElementById('element_1').cloneNode(true);

Tests:

cloneNode appendChild
$container.appendChild($clone);
cloneNode insertAdjacentElement afterend
$element_2.insertAdjacentElement('afterend', $clone);
cloneNode insertAdjacentElement beforeend
$container.insertAdjacentElement('beforeend', $clone);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
cloneNode appendChild
cloneNode insertAdjacentElement afterend
cloneNode insertAdjacentElement beforeend

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36

Browser/OS: Chrome 92 on Windows

View result in a separate tab

Test name	Executions per second
cloneNode appendChild	174847.4 Ops/sec
cloneNode insertAdjacentElement afterend	173326.1 Ops/sec
cloneNode insertAdjacentElement beforeend	175914.6 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain what's being tested on the provided JSON and describe the options compared, their pros and cons, and other considerations.

**Benchmark:** Clone And Copy Node - v3

The benchmark is designed to measure the performance of cloning and appending/detaching nodes in a table using JavaScript. The test case creates two tables with data and then clones one of them. The cloned node is then appended or inserted adjacent to the original table using different methods.

**Options compared:**

1. `appendChild()`: Clones the node and appends it to the end of the parent element.
2. `insertAdjacentElement('beforeend')`: Inserts the cloned node before the end of the parent element.
3. `insertAdjacentElement('afterend')`: Inserts the cloned node after the end of the parent element.

**Pros and Cons:**

* `appendChild()`:
	+ Pros: Simple to use, efficient for appending nodes to the end of a container.
	+ Cons: May cause layout issues if not used carefully, as it can lead to unnecessary DOM reflows.
* `insertAdjacentElement('beforeend')`:
	+ Pros: More precise control over node insertion, can be useful for layout optimization.
	+ Cons: May require more code and have a slight performance overhead compared to `appendChild()`.
* `insertAdjacentElement('afterend')`:
	+ Pros: Similar to `appendChild()`, but allows for more flexibility in node insertion.
	+ Cons: May also cause layout issues if not used carefully, similar to `appendChild()`.

**Other considerations:**

* The benchmark does not account for other factors that might affect performance, such as the size of the cloned nodes or the complexity of the DOM tree.
* The use of `cloneNode(true)` creates a shallow copy of the original node, which may not be suitable for all scenarios. A deep clone using `JSON.parse(JSON.stringify(node))` would require additional overhead.

**Library and special JS features:**

The benchmark uses the `insertAdjacentElement()` method, which is a part of the Web APIs specification (ECMAScript 2022). This method allows inserting nodes into an element's DOM tree while maintaining the original node's position.

No special JavaScript features or syntax are used in this benchmark. The code is written in standard JavaScript and relies on the DOM API for its functionality.

**Alternatives:**

Other alternatives to measure cloning and appending/detaching nodes could include:

* Using a library like jQuery, which provides a similar `clone()` method.
* Implementing a custom clone function using recursion or iteration.
* Using a benchmarking framework that supports more advanced features, such as parallel execution or async operations.

Note: The specific alternatives would depend on the desired scope and requirements of the benchmark.

Related benchmarks:

Clone And Copy Node - v3 (version: 2)

Comparing performance of: cloneNode appendChild vs cloneNode insertAdjacentElement afterend vs cloneNode insertAdjacentElement beforeend

Created: 5 years ago by: Registered User

Jump to the latest result

cloneNode appendChild

cloneNode insertAdjacentElement afterend

cloneNode insertAdjacentElement beforeend

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