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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2 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

Clone And Copy Node - v3 (version: 2)

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

Created: 4 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