Benchmark: DOM: Append Performance

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);

Rendered benchmark preparation results:

Previous results

Test case name	Result
Document Fragment
String Concatenation

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Browser/OS: Chrome 117 on Windows

Test name	Executions per second
Document Fragment	47008.5 Ops/sec
String Concatenation	38063.9 Ops/sec

DOM: Append Performance (version: 4)