jquery clone() vs native cloneNode

JavaScript performance comparison

Test case created by Dto

Preparation code

<table>
<tbody id="tbo">
<tr>
<td>
<textarea class="cloneable" style="color: red; width: 200px; height: 40px;">value</textarea>
</td>
</tr>
</tbody>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jquery clone
var textarea = $('#tbo').find('textarea.cloneable');
$(textarea)
  .clone()
  .removeAttr('id class')
  .css({
    'height': '50px',
    'width': '100px'
  })
  .val(textarea.val())
  .attr('tabIndex', '-1')
  .addClass('isClone')
  .insertBefore($(textarea));
pending…
native clone
var textarea = document.querySelector('textarea.cloneable');
var clonedEl = textarea.cloneNode(true);

clonedEl.value = textarea.value;

clonedEl[0]
  .setAttribute('id','')
  .setAttribute('class','')
  .setAttribute('tabIndex', '-1')
  .classList.add("isClone")
  .style.setAttribute('height', '50px', false)
  .style.setAttribute('width', '100px', false);

textarea.parentNode.insertBefore(clonedEl, textarea);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment