Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Creating/adding html element performance (10 elements)
(version: 0)
Comparing performance of:
Pure JavaScript vs Strings / append vs Strings array / append vs Strings / innerHTML vs Strings array / innerHTML vs Strings / html vs Strings array / html
Created:
4 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <div id="test"></div>
Tests:
Pure JavaScript
var c = document.createDocumentFragment(); for (var i=0; i<5; i++) { const inputElem = document.createElement("input"); inputElem.id = "inputTest" + i; inputElem.name = "inputTest"; inputElem.type = "radio"; inputElem.value = "value"; const labelElem = document.createElement("label"); labelElem.htmlFor = "inputTest" + i; labelElem.innerText = "inputTest" + i; labelElem.setAttribute("style", "color: " + "#FF0000"); const container = document.createElement("label"); container.appendChild(inputElem); container.appendChild(labelElem); c.appendChild(container); } var elem = document.getElementById("test"); elem.appendChild(c);
Strings / append
var s = ""; for (var i=0; i<5; i++) { s += "<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' stye='color: #FF0000'>inputTest" + i + "</label></label>"; } $("#test").append(s);
Strings array / append
var a = []; for (var i=0; i<5; i++) { a.push("<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' stye='color: #FF0000'>inputTest" + i + "</label></label>"); } $("#test").append(a.join(""));
Strings / innerHTML
var s = ""; for (var i=0; i<5; i++) { s += "<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' stye='color: #FF0000'>inputTest" + i + "</label></label>"; } var elem = document.getElementById("test"); elem.innerHTML = s;
Strings array / innerHTML
var a = []; for (var i=0; i<5; i++) { a.push("<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' stye='color: #FF0000'>inputTest" + i + "</label></label>"); } var elem = document.getElementById("test"); elem.innerHTML = a.join("");
Strings / html
var s = ""; for (var i=0; i<5; i++) { s += "<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' stye='color: #FF0000'>inputTest" + i + "</label></label>"; } $("#test").html(s);
Strings array / html
var a = []; for (var i=0; i<5; i++) { a.push("<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' stye='color: #FF0000'>inputTest" + i + "</label></label>"); } $("#test").html(a.join(""));
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (7)
Previous results
Fork
Test case name
Result
Pure JavaScript
Strings / append
Strings array / append
Strings / innerHTML
Strings array / innerHTML
Strings / html
Strings array / html
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 the benchmark and its various test cases. **Benchmark Definition** The benchmark is used to compare the performance of different methods for rendering HTML content in web browsers. Specifically, it tests six different approaches: 1. **Pure JavaScript**: This method uses JavaScript to create the HTML content directly. 2. **Strings / innerHTML**: This method uses the `innerHTML` property to set the HTML content of an element. 3. **Strings array / innerHTML**: This method creates an array of strings and then sets the `innerHTML` property using this array. 4. **Strings array / html**: This method creates an array of strings, appends them to an element's HTML, and then returns the updated HTML content. 5. **Strings / html**: This method uses the `html()` method to set the HTML content of an element. 6. **Strings array / html**: This method creates an array of strings, appends them to an element's HTML, and then sets the `html()` property using this array. **Test Cases** The benchmark runs multiple test cases for each approach, with varying number of executions per second (executionsPerSecond). The latest results show that the top three approaches are: 1. **Strings / innerHTML**: This method outperforms all other approaches, likely due to its direct access to the `innerHTML` property. 2. **Strings array / innerHTML**: This approach is close to the first one but slightly slower. 3. **Pure JavaScript**: This method is slower than the top two but still relatively fast. **Performance Comparison** The performance comparison shows that using `innerHTML` (either directly or through an array) is generally faster than using other methods, especially for large amounts of HTML content. However, there are some variations in performance among different test cases and approaches, indicating that other factors like browser version, platform, and hardware may influence the results. **Advice** Based on these results, if you need to render a large amount of HTML content, using `innerHTML` (either directly or through an array) is likely the best approach. However, if you're working with smaller amounts of data or have other performance considerations, Pure JavaScript might be a viable alternative. It's essential to test your specific use case and consider factors like browser support, maintenance, and code readability when choosing an approach. Additionally, note that some browsers may have different performance characteristics for these methods due to their implementation details or engine optimizations. Always verify the results with your target browser and version to ensure they align with your expected performance requirements.
Related benchmarks:
HTML insertion
reparsing jQuery speed test
Creating/adding html element performance (100 elements)
Creating/adding html element performance (10 elements)
createElement vs JQuery $
Comments
Confirm delete:
Do you really want to delete benchmark?