Benchmark: DocumentFragment: various jQuery vs JavaScript

DocumentFragment: various jQuery vs JavaScript (version: 14) Benchmark.js

Test various styles of retrieving the content of a <template> element using jQuery and pure JavaScript

Comparing performance of: `jQuery(jQuery.clone()) vs jQuery(jQuery).clone() vs jQuery(JavaScript).clone() vs jQuery(JavaScript.cloneNode.content) vs jQuery(JavaScript.content.cloneNode) vs jQuery(getElementById.content.cloneNode) vs Pure JavaScript.cloneNode.content vs Pure JavaScript.content.cloneNode`

Created: 9 years ago by: Registered User

Go to the latest result

HTML Preparation code:

<template id="frag">
  <div id="content">
    <p>Content</p>
  </div>
</template>

Tests:

jQuery(jQuery.clone())
$($('#frag').clone().prop('content'));
jQuery(jQuery).clone()
$($('#frag').prop('content')).clone();
jQuery(JavaScript).clone()
$(document.querySelector('#frag').content).clone();
jQuery(JavaScript.cloneNode.content)
$(document.querySelector('#frag').cloneNode(true).content);
jQuery(JavaScript.content.cloneNode)
$(document.querySelector('#frag').content.cloneNode(true));
jQuery(getElementById.content.cloneNode)
$(document.getElementById('frag').content.cloneNode(true));
Pure JavaScript.cloneNode.content
document.querySelector('#frag').cloneNode(true).content;
Pure JavaScript.content.cloneNode
document.querySelector('#frag').content.cloneNode(true);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery(jQuery.clone())
jQuery(jQuery).clone()
jQuery(JavaScript).clone()
jQuery(JavaScript.cloneNode.content)
jQuery(JavaScript.content.cloneNode)
jQuery(getElementById.content.cloneNode)
Pure JavaScript.cloneNode.content
Pure JavaScript.content.cloneNode

Fastest: N/A

Slowest: N/A

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/122.0.0.0 Safari/537.36 Edg/122.0.0.0

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Pure JavaScript.content.cloneNode

827K/s

Pure JavaScript.cloneNode.content

683K/s

jQuery(jQuery.clone())

0/s

jQuery(jQuery).clone()

0/s

jQuery(JavaScript).clone()

0/s

jQuery(JavaScript.cloneNode.content)

0/s

jQuery(JavaScript.content.cloneNode)

0/s

jQuery(getElementById.content.cloneNode)

0/s

View exact numbers

Test name	Executions per second
✓ Pure JavaScript.content.cloneNode	826,647 Ops/sec
Pure JavaScript.cloneNode.content	683,143 Ops/sec
jQuery(jQuery.clone())	0 Ops/sec
jQuery(jQuery).clone()	0 Ops/sec
jQuery(JavaScript).clone()	0 Ops/sec
jQuery(JavaScript.cloneNode.content)	0 Ops/sec
jQuery(JavaScript.content.cloneNode)	0 Ops/sec
jQuery(getElementById.content.cloneNode)	0 Ops/sec