Benchmark: DocumentFragment: various jQuery vs JavaScript

DocumentFragment: various jQuery vs JavaScript (version: 14)

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: 8 years ago by: Registered User

Jump 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: 10 months 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

Test name	Executions per second
jQuery(jQuery.clone())	0.0 Ops/sec
jQuery(jQuery).clone()	0.0 Ops/sec
jQuery(JavaScript).clone()	0.0 Ops/sec
jQuery(JavaScript.cloneNode.content)	0.0 Ops/sec
jQuery(JavaScript.content.cloneNode)	0.0 Ops/sec
jQuery(getElementById.content.cloneNode)	0.0 Ops/sec
Pure JavaScript.cloneNode.content	683143.2 Ops/sec
Pure JavaScript.content.cloneNode	826647.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript code can be a complex task, and MeasuredThat.net provides an interesting benchmark to compare different approaches.

The provided JSON represents a benchmark that tests various styles of retrieving the content of a `template` element using jQuery and pure JavaScript. There are eight individual test cases:

**Options Compared:**

1. **jQuery Clone**: Retrieves the cloned content using `$($('#frag').clone().prop('content'));`.
2. **jQuery Clone and Extract**: Retrieves the cloned content using `$($('#frag').prop('content')).clone();`.
3. **jQuery Select and Clone with Content**: Retrieves the content of a `div` element within the `template` using $(document.querySelector('#frag').content).clone();.
4. **jQuery Select, Clone Node, and Get Content**: Retrieves the cloned content by cloning the entire `template` node (including its contents) and then extracting it using $(document.querySelector('#frag').cloneNode(true).content);
5. **Pure JavaScript Clone Node with Content**: Retrieves the cloned content using `document.querySelector('#frag').cloneNode(true).content;`.
6. **Pure JavaScript Extract Clone Node with Content**: Retrieves the cloned content by cloning the entire `template` node (including its contents) and then extracting it using `document.querySelector('#frag').content.cloneNode(true);`.

**Pros and Cons of Each Approach:**

1. **jQuery Clone**: Efficient, as it uses jQuery's built-in cloning functionality. However, it requires an extra call to `prop('content')`, which might incur additional overhead.
2. **jQuery Clone and Extract**: Similar to the first approach, but extracts the content separately using `clone()`. This could be slower due to the additional function call.
3. **jQuery Select and Clone with Content**: Uses `querySelector` to select the content element, which can be slower than using a direct selector like `#frag`.
4. **jQuery Select, Clone Node, and Get Content**: Clones the entire node and then extracts the content. This approach can be slow due to the extra cloning step.
5. **Pure JavaScript Clone Node with Content**: Efficiently clones the node and extracts the content in a single operation.
6. **Pure JavaScript Extract Clone Node with Content**: Similar to the previous approach, but extracts the content separately.

**Other Considerations:**

* The benchmark uses Chrome 122 as the test browser, which might not be representative of other browsers or environments.
* The `template` element is used here, which is a HTML5 feature. If you're targeting older browsers, you may need to use alternative approaches.
* The benchmark measures the execution speed of each approach, but doesn't account for memory usage or other factors that could impact performance.

**Alternative Approaches:**

1. **Using `innerHTML`**: Instead of cloning the node and extracting the content, you can use `innerHTML` to set the HTML content of a new element. This approach is generally faster than cloning, but it assumes you have control over the resulting HTML structure.
2. **Using `substring()` or `slice()`**: If you know that the content is contained within a specific range (e.g., between `0` and `length - 1`), you can use `substring()` or `slice()` to extract the substring. This approach can be faster than cloning, but it requires knowledge of the content bounds.
3. **Using a DOM manipulation library**: Depending on your specific requirements, you might want to explore other libraries like jQuery's `html()` method or the `DOMParser` API to manipulate and extract content.

Keep in mind that these alternative approaches may have their own trade-offs and limitations. It's essential to evaluate the performance characteristics of each approach based on your specific use case.

Related benchmarks:

DocumentFragment: various jQuery vs JavaScript (version: 14)

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

Created: 8 years ago by: Registered User

Jump to the latest 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

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