Benchmark: document.createDocumentFragment() vs new DocumentFragment

HTML Preparation code:

<div id="foo"></div>

Tests:

new DocumentFragment()
let i = 10000; while (i--) { new DocumentFragment(); }
document.createDocumentFragment()
let i = 10000; while (i--) { document.createDocumentFragment(); }

Historical Performance Data aggregated from 36 community runs

Desktop Results:

Chrome 28 runs

document.createDocumentFragment()

452/s

new DocumentFragment()

441/s

View exact numbers

✓ document.createDocumentFragment(): 452 ops/sec
• new DocumentFragment(): 441 ops/sec

Firefox 8 runs

new DocumentFragment()

399/s

document.createDocumentFragment()

272/s

Fastest: new DocumentFragment() (1.5x faster)

View exact numbers

✓ new DocumentFragment(): 399 ops/sec
• document.createDocumentFragment(): 272 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
new DocumentFragment()
document.createDocumentFragment()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 140 on Android

View result in a separate tab

document.createDocumentFragment()

294/s

new DocumentFragment()

217/s

View exact numbers

Test name	Executions per second
✓ document.createDocumentFragment()	294 Ops/sec
new DocumentFragment()	217 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the explanation into smaller sections to make it easier to understand.

**What is tested on the provided JSON?**

The provided JSON represents two individual test cases for measuring JavaScript performance. The first benchmark, "new DocumentFragment()", tests the creation of a new `DocumentFragment` object using the syntax `let i = 10000; while (i--) { new DocumentFragment(); }`. The second benchmark, "document.createDocumentFragment()", tests the same operation but using the `document.createDocumentFragment()` method.

**Options compared**

The two options being compared are:

1. Creating a new `DocumentFragment` object using the syntax `new DocumentFragment()`.
2. Using the `document.createDocumentFragment()` method to create a new document fragment.

**Pros and Cons of each approach**

**Creating a new `DocumentFragment` object using `new DocumentFragment()`:**

Pros:

* More explicit and clear syntax
* May be more readable for some developers

Cons:

* Requires creating an instance of the `DocumentFragment` class, which may involve additional overhead
* May not take advantage of browser caching or optimizations that are applied to the `document.createDocumentFragment()` method

**Using the `document.createDocumentFragment()` method:**

Pros:

* Often faster and more optimized for performance compared to the syntax-based approach
* May leverage browser-specific caching mechanisms or optimizations
* More concise and readable syntax

Cons:

* Less explicit about what is being created (a document fragment)
* May not be as clear or readable for developers who are not familiar with this method

**Library usage**

The provided JSON includes a library, `DocumentFragment`. A `DocumentFragment` is an object that represents a collection of nodes without the parent-child relationships. It's used to create a group of nodes without having to manage their positions in the DOM tree.

In the context of this benchmark, using `document.createDocumentFragment()` likely means that the browser has optimized and cached this method for creating document fragments, making it potentially faster than creating an instance of the class directly.

**Special JavaScript feature or syntax**

The provided JSON does not include any special JavaScript features or syntax that would require additional explanation. However, it's worth noting that the use of `let i = 10000; while (i--) { ... }` is a common pattern for iterating over an array in JavaScript, and its performance impact may also be of interest.

**Other alternatives**

If you're interested in testing alternative approaches to creating document fragments or measuring JavaScript performance, here are some options:

* Use the `Array.from()` method to create an array of nodes and then use `Object.assign()` to create a new document fragment.
* Compare the performance of different DOM manipulation methods (e.g., `appendChild()`, `insertBefore()`, etc.).
* Test the creation of other types of objects, such as arrays or sets.
* Experiment with different JavaScript engines or implementations (e.g., V8, SpiderMonkey, etc.) to see how they perform on this benchmark.

Keep in mind that these alternatives may not be directly related to document fragments and are intended to provide a more comprehensive understanding of JavaScript performance.

document.createDocumentFragment() vs new DocumentFragment (version: 0) Benchmark.js

Comparing performance of: `new DocumentFragment() vs document.createDocumentFragment()`

Created: 6 years ago by: Guest

Go to the latest result

new DocumentFragment()

document.createDocumentFragment()

Historical Performance Data aggregated from 36 community runs

Desktop Results:

Chrome 28 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

document.createDocumentFragment() vs new DocumentFragment (version: 0) Benchmark.js

Comparing performance of: new DocumentFragment() vs document.createDocumentFragment()

Created: 6 years ago by: Guest

Go to the latest result

new DocumentFragment()

document.createDocumentFragment()

Historical Performance Data aggregated from 36 community runs

Desktop Results:

Chrome 28 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `new DocumentFragment() vs document.createDocumentFragment()`