Sample test

Benchmark created on

Preparation HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<div id="ballers"></div>

Setup

let myArray = [];
for(let i=1;i<=1000;i++)myArray.push(i);

$(onready);

Test runner

Ready to run.

Testing in
TestOps/sec
Slow
function onready(){
$.each( myArray, function( i, item ) {
 
    var newListItem = "<li>" + item + "</li>";
 
    $( "#ballers" ).append( newListItem );
 
});
}
ready
Fast2
function onready(){
var myHtml = "";
 
$.each( myArray, function( i, item ) {
 
    myHtml += "<li>" + item + "</li>";
 
});
 
$( "#ballers" ).html( myHtml );
}
ready
Fast1
function onready(){
var frag = document.createDocumentFragment();
 
$.each( myArray, function( i, item ) {
 
    var newListItem = document.createElement( "li" );
    var itemText = document.createTextNode( item );
 
    newListItem.appendChild( itemText );
 
    frag.appendChild( newListItem );
 
});
 
$( "#ballers" )[ 0 ].appendChild( frag );
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.