Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
AppendChild vs DocumentFragment
(version: 0)
Comparing performance of:
Appending HTML strings vs DocumentFragment #1 vs DocumentFragment #2 vs Appending DOM objects
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<select id="test"></select>
Tests:
Appending HTML strings
(() => { const dropdown = document.querySelector('select#test'); for (let i=0; i<5000; i++) { dropdown.append(`<option id="${i}" value="${i}">${i}</option>`) } })();
DocumentFragment #1
(() => { const dropdown = document.querySelector('select#test'); const fragment = document.createDocumentFragment(); for (let i=0; i<5000; i++) fragment.append(`<option id="${i}" value="${i}">${i}</option>`); dropdown.appendChild(fragment); })();
DocumentFragment #2
(() => { const dropdown = document.querySelector('select#test'); const fragment = document.createDocumentFragment(); for (let i=0; i<5000; i++) { const option = document.createElement('option'); option.value = `${i}`; option.setAttribute('id', `${i}`); option.textContent = `${i}`; fragment.appendChild(option); } dropdown.appendChild(fragment); })();
Appending DOM objects
(() => { const dropdown = document.querySelector('select#test'); for (let i=0; i<5000; i++) { const option = document.createElement('option'); option.value = `${i}`; option.setAttribute('id', `${i}`); option.textContent = `${i}`; dropdown.appendChild(option); } })();
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
Appending HTML strings
DocumentFragment #1
DocumentFragment #2
Appending DOM objects
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 dive into the world of JavaScript microbenchmarks on MeasureThat.net. **Benchmark Definition** The benchmark definition is a JSON object that contains metadata about the test case, including its name, description, script preparation code, and HTML preparation code. In this case, we have a simple select element with an ID of "test" in our HTML preparation code: ```html "<select id=\"test\"></select>" ``` **Options Compared** The benchmark compares four different approaches to appending options to the select element: 1. **Appending HTML strings**: This approach creates a new option element for each iteration and appends it directly to the select element. 2. **DocumentFragment**: This approach creates a DocumentFragment, which is an object that can hold multiple DOM elements without actually adding them to the document. We then append all the options to this fragment and finally append the fragment to the select element. 3. **Appending DOM objects**: Similar to the first approach, but instead of creating HTML strings, we create new option elements directly using the `document.createElement()` method. **Pros and Cons** Here's a brief summary of the pros and cons of each approach: * **Appending HTML strings**: + Pros: Simple and easy to understand. + Cons: Can lead to slower performance due to repeated DOM mutations (e.g., adding or removing elements). * **DocumentFragment**: + Pros: Reduces DOM mutations, as all the options are added to a single fragment before appending it to the select element. This can lead to better performance, especially when dealing with large datasets. + Cons: Requires creating an additional DocumentFragment object and might be less intuitive for some developers. * **Appending DOM objects**: + Pros: Similar to Appending HTML strings, but uses `document.createElement()` instead of string concatenation. + Cons: Still leads to repeated DOM mutations, which can negatively impact performance. **Library Usage** None of the test cases use any external libraries. The only JavaScript features used are: * `for` loops * `document.querySelector()` * `document.createDocumentFragment()` * `element.appendChild()` **Special JS Features** No special JavaScript features or syntax is used in these benchmarks. All tests follow standard JavaScript syntax and semantics. **Other Alternatives** If you're interested in exploring alternative approaches, here are a few suggestions: 1. **Use a virtual DOM library**: Libraries like React or Virtual DOM can help reduce the number of DOM mutations by using a virtual representation of the UI. However, this approach may introduce additional overhead due to the need for reconciliation and updating. 2. **Use a more efficient option element creation method**: Some browsers provide a `createOption()` method on `DocumentFragment` that can create an option element more efficiently than the `createElement()` method used in this benchmark. 3. **Benchmarks with different datasets or scenarios**: Experimenting with varying dataset sizes, number of iterations, or even changing the structure of the HTML elements can help identify performance hotspots and optimize the code for specific use cases. Keep in mind that microbenchmarks like these are meant to be small-scale tests, focusing on specific optimization opportunities. Larger benchmarks might uncover different performance characteristics and require more comprehensive testing approaches.
Related benchmarks:
append vs appendChild + createTextNode
JS: append vs appendChild
createTextNode vs textContent vs innerText vs append
JavaScript: append() VS appendChild()
appendChild vs append
Comments
Confirm delete:
Do you really want to delete benchmark?