Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
ssssdsaddffvfggggfffdssffffdd
(version: 0)
Comparing performance of:
inner vs fragment
Created:
4 years ago
by:
Guest
Jump to the latest result
Tests:
inner
const el = document.createElement('div'); el.innerText = 'asssssssssss' document.documentElement.appendChild(el);
fragment
const fragment = document.createDocumentFragment(); const el = document.createElement('div'); el.innerText = 'asssssssssss' fragment.appendChild(el); document.documentElement.appendChild(fragment);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
inner
fragment
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):
Let's break down what's happening in this benchmark. **What is being tested?** The provided JSON represents two individual test cases, each testing the performance of creating and appending elements to different DOM structures. **Options compared:** 1. **Direct append**: Creating an element (`const el = document.createElement('div');`) and directly appending it to `document.documentElement` using `el.appendChild(el);`. This approach is straightforward but might incur additional overhead due to the extra node creation. 2. **Fragment-based append**: Creating a fragment (`const fragment = document.createDocumentFragment();`) and then appending an element to it (`fragment.appendChild(el);`). The resulting fragment is then appended to `document.documentElement` using `document.documentElement.appendChild(fragment);`. This approach can be more efficient because the fragment acts as a temporary storage for nodes, reducing the number of individual node creations. **Pros and Cons:** 1. **Direct append**: * Pros: Simple and straightforward. * Cons: Might incur additional overhead due to extra node creation. 2. **Fragment-based append**: * Pros: Can be more efficient by reducing the number of individual node creations. * Cons: Requires creating an extra fragment, which might have its own overhead. **Library usage:** None of these test cases use any libraries beyond the standard JavaScript APIs provided by the DOM. **Special JS features or syntax:** None mentioned. Now, let's consider other alternatives: 1. **Using a library like WebKit**: If you're targeting WebKit-based browsers (like Safari), you might want to use their built-in `WebKitAnimationTimer` class for benchmarking, which can provide more accurate results. 2. **Using a framework or engine-specific API**: Some frameworks (e.g., React) or engines (e.g., V8 in Node.js) have specific APIs for performance testing that might be worth exploring if you're targeting those environments. In the context of MeasureThat.net, the choice between direct append and fragment-based append is likely intended to test the performance differences between these two approaches. The benchmark result suggests that fragment-based append performs better on this particular hardware configuration (Chrome 92 on Windows).
Related benchmarks:
testje
for vs filter 1111
Lazy single quote regexp search
test dv vs fm real
RegEx vs Reduce
Comments
Confirm delete:
Do you really want to delete benchmark?