Run results for: DOM: Append Performance

Run details:

User agent: Mozilla/5.0 (Linux; Android 12; GM1903) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.5790.167 Mobile Safari/537.36 OPR/77.1.4095.74475

Browser: Opera Mobile 77

Operating system: Android

Device Platform: Mobile

Date tested: 8 months ago

Test name	Executions per second
Document Fragment	21502.5 Ops/sec
String Concatenation	12599.7 Ops/sec

HTML Preparation code:

<div id="content"></div>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

Script Preparation code:

var myArray = ["Hello", "world", "!", "This", "is", "a", "benchmark", "!"];

Tests:

Document Fragment
// Appending to a fragment and adding that fragment to the DOM at the end var frag = document.createDocumentFragment(); $.each(myArray, function(i, item) { var newListItem = document.createElement("li"), itemText = document.createTextNode(item); newListItem.appendChild(itemText); frag.appendChild(newListItem); }); $("#content")[0].appendChild(frag);
String Concatenation
// Appending to a string and generating an HTML tree out of the string and appending it to the DOM var myHtml = ""; $.each(myArray, function(i, item) { myHtml += "<li>" + item + "</li>"; }); $("#content").html(myHtml);

Run results for: DOM: Append Performance

Document Fragment vs. String Concatenation

Document Fragment

String Concatenation