Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Clone And Copy Node - v3
(version: 2)
Comparing performance of:
cloneNode appendChild vs cloneNode insertAdjacentElement afterend vs cloneNode insertAdjacentElement beforeend
Created:
6 years ago
by:
Registered User
Jump to the latest result
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>
Run tests (3)
Previous results
Fork
Test case name
Result
cloneNode appendChild
cloneNode insertAdjacentElement afterend
cloneNode insertAdjacentElement beforeend
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):
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:
Move Element to another
Move Multiple Elements to another - Winners
Clone And Copy Node (Table tbody)
CloneNode vs InnerHTML Fixed
Comments
Confirm delete:
Do you really want to delete benchmark?