Run results for: DOM: Append Performance

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36

Browser: Chrome 92

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Document Fragment	40783.4 Ops/sec
String Concatenation	38466.4 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);