Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs createDocumentFragment @oneook
(version: 0)
Comparing performance of: createElement vs createDocumentFragment
Comparing performance of:
createElement vs createDocumentFragment
Created:
3 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
document.body.innerHTML = "";
Tests:
createElement
var root = document.createElement("div"); for (var i = 0; i < 1000; i++) { var e = document.createElement("span"); e.innerText = i + " text"; root.appendChild(e); } document.body.appendChild(root);
createDocumentFragment
var frag = document.createDocumentFragment(); var root = document.createElement("div"); for (var i = 0; i < 1000; i++) { var e = document.createElement("span"); e.innerText = i + " text"; root.appendChild(e); } document.body.appendChild(frag);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
createElement
createDocumentFragment
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Overview of the Benchmark** The provided JSON represents a JavaScript microbenchmark test case hosted on MeasureThat.net. The benchmark compares the performance of two approaches: creating an HTML element using `document.createElement()` versus creating a document fragment using `document.createDocumentFragment()`. This test aims to measure which approach is faster for appending 1000 small elements to a parent element. **Options Compared** Two options are being compared: 1. **`createElement()`**: Creates a new HTML element (in this case, a `<span>` element) and appends it to the root element. 2. **`createDocumentFragment()`**: Creates a document fragment and appends small elements to it, which is then appended to the parent element. **Pros and Cons of Each Approach** **`createElement()`**: Pros: * Simpler to understand and implement * Elements are added directly to the DOM, which can be beneficial for rendering purposes Cons: * Can lead to slower performance due to the overhead of creating a new element and appending it to the parent element. **`createDocumentFragment()`**: Pros: * Can reduce the number of DOM nodes created, potentially improving performance * Elements are appended to a document fragment, which can be appended to the parent element in batches, reducing the number of DOM mutations Cons: * May require more complex implementation and understanding of document fragments * The performance benefits may not always outweigh the overhead of creating a new document fragment. **Other Considerations** * Using `createDocumentFragment()` may help reduce the impact of DOM mutation on layout and painting. * The choice between these two approaches depends on the specific use case, such as rendering small elements versus large or complex elements. **Library Usage** In this benchmark, `document` is used, which is a built-in object in JavaScript. There are no external libraries required. **Special JS Features/Syntax** None mentioned in the provided JSON.
Related benchmarks:
createTextNode vs innerHTML vs innerText
createElement vs createDocumentFragment @oneook 2
createElement vs createDocumentFragment @oneook 3
createTextNode vs textContent vs innerText vs innerHTML (for reading)
Comments
Confirm delete:
Do you really want to delete benchmark?