Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
DocumentFragment test
(version: 0)
Comparing performance of:
No frag vs With frag
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div> <div class="container"></div>
Tests:
No frag
var elements = []; for(var i=20; i--;) elements.push(document.createElement("div")); var e = document.getElementsByClassName("container"); for(var i=e.length; i--;) { for(var j=20; j--;) e[i].appendChild(elements[j].cloneNode(true)); }
With frag
var frag = document.createDocumentFragment(); for(var i=20; i--;) frag.appendChild(document.createElement("div")); var e = document.getElementsByClassName("container"); for(var i=e.length; i--;) e[i].appendChild(frag.cloneNode(true));
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
No frag
With frag
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
11 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36 OPR/94.0.0.0
Browser/OS:
Opera 94 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
No frag
8.2 Ops/sec
With frag
29.6 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**What is being tested?** MeasureThat.net is testing the performance of creating and manipulating DOM elements in JavaScript, specifically the difference between using a `DocumentFragment` and not using it. **Options compared** Two test cases are compared: 1. **"No frag"**: This test case uses a traditional approach to create and append multiple DOM elements without using a `DocumentFragment`. It creates an array of 20 elements, loops through each element, and appends it to the DOM using `appendChild`. 2. **"With frag"**: This test case uses a `DocumentFragment` to optimize the creation and appending of DOM elements. A fragment is created, and then looped through while appending the same 20 elements. **Pros and Cons** * **"No frag"**: + Pros: Simpler code, easier to understand. + Cons: Can be less efficient due to repeated DOM mutations (e.g., `appendChild`), which can lead to performance issues. * **"With frag"**: + Pros: More efficient by reducing the number of DOM mutations, making it suitable for large datasets or complex layouts. + Cons: Requires a slight increase in complexity and understanding of the fragment API. **Library** In this benchmark, the `DocumentFragment` is a built-in JavaScript object that allows you to group multiple elements together without actually adding them to the DOM. Its purpose is to optimize DOM manipulation by reducing the number of mutations. **Special JS feature or syntax** None mentioned in the provided code snippets, but it's worth noting that some other features like `requestIdleCallback` or `Web Workers` might be used in more complex scenarios to further optimize performance. **Other alternatives** If you need to create and manipulate a large number of DOM elements for performance-critical applications, consider using: 1. **Virtual DOM libraries**: Libraries like React's Virtual DOM or MobX's Virtual DOM can help reduce the overhead of DOM mutations by storing a virtual representation of your UI. 2. **Async operations**: Using async/await or `requestIdleCallback` can help optimize performance by deferring non-critical tasks to idle times or background threads. Keep in mind that these alternatives might add complexity to your code, so it's essential to weigh the benefits against the trade-offs.
Related benchmarks:
jQuery event On Performance
jQuery event On Performance
getElementsByClassName VS querySelectorAll tes
getElementsByClassName VS querySelector test1
Comments
Confirm delete:
Do you really want to delete benchmark?