masonry optimizations (v4)

Revision 4 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://masonry.desandro.com/jquery.masonry.js">
</script>
<script src="http://local.fashiolista.com/fashiolista_media//js/original/jquery.masonry.js">
</script>

Setup

var pages = [
      [],
      [],
    ];
    
    var preRnd = [0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1,
        0, 0, 0, 0,0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2, 1, 0, 2, 0, 0, 2,
        0, 0];
    var colors = ['red', 'blue', 'green'];
    var sizes = [[20, 20], [40, 40], [40, 60]];
    
    for(var p=0; p<pages.length; p++) {
      for(var i=0; i<5; i++) {
        var rnd = preRnd[i];
        pages[p].push($('<div class="item">').css({
          backgroundColor: colors[rnd],
          width: sizes[rnd][0] + 'px',
          height: sizes[rnd][1] + 'px',
          float: 'left'
        }).html(i)[0]);
      }
    
      pages[p] = $(pages[p]).filter('.item');
    }

Teardown


    $('#container').remove();

Test runner

Ready to run.

Testing in
TestOps/sec
Masonry default
$('<div id="container" style="width: 100px;">').appendTo('body').masonry({
    itemSelector: '.item',
    columnWidth: 20
});

for(var p=0; p<pages.length; p++){
  var items = pages[p];
  $('#container').append(items).masonry('appended', items);
}
ready
Masonry local 1
$('<div id="container" style="width: 100px;">').appendTo('body').masonryLocal({
    itemSelector: '.item',
    columnWidth: 20
});

for(var p=0; p<pages.length; p++){
  var items = pages[p];
  $('#container').append(items).masonryLocal('appended', items);
}
ready

Revisions

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