Individual vs Batch jQuery insertion (v4)

Revision 4 of this benchmark created by Benjaminbenben on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="nyans"></div>

Setup

var nyanImg = '<img width="40px" src="http://i1.kym-cdn.com/photos/images/original/000/117/424/tumblr_ljwaimhJcK1qa4ebfo1_500.gif" />',
    nyanImgs = new Array(11).join(nyanImg),
    $nyanDiv = $('#nyans');

Teardown


    $('#nyans').empty();

Test runner

Ready to run.

Testing in
TestOps/sec
Single insertion
// Times 10
$nyanDiv.append(nyanImg);
$nyanDiv.append(nyanImg);
$nyanDiv.append(nyanImg);
$nyanDiv.append(nyanImg);
$nyanDiv.append(nyanImg);
$nyanDiv.append(nyanImg);
$nyanDiv.append(nyanImg);
$nyanDiv.append(nyanImg);
$nyanDiv.append(nyanImg);
$nyanDiv.append(nyanImg);
ready
Batch insertion
$nyanDiv.append(nyanImgs);
ready
Single insertion + reflows
// Times 10
$nyanDiv.append(nyanImg).offset().left;
$nyanDiv.append(nyanImg).offset().left;
$nyanDiv.append(nyanImg).offset().left;
$nyanDiv.append(nyanImg).offset().left;
$nyanDiv.append(nyanImg).offset().left;
$nyanDiv.append(nyanImg).offset().left;
$nyanDiv.append(nyanImg).offset().left;
$nyanDiv.append(nyanImg).offset().left;
$nyanDiv.append(nyanImg).offset().left;
$nyanDiv.append(nyanImg).offset().left;
ready
Batch insertion + reflows
$nyanDiv.append(nyanImgs).offset().left;
ready

Revisions

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

  • Revision 2: published by henrahmagix on
  • Revision 4: published by Benjaminbenben on
  • Revision 5: published by Rick Waldron on
  • Revision 6: published by Jon Raasch on
  • Revision 8: published by Pavithra on
  • Revision 9: published on
  • Revision 10: published on