masonry optimizations (v2)

Revision 2 of this benchmark created on

Preparation HTML

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

Setup

var pages = [
      [],
      [],
      [],
      [],
      [],
    ];
    
    for(var p=0; p<pages.length; p++) {
      for(var i=0; i<40; i++) {
        var colors = ['red', 'blue', 'green'];
        var sizes = [[20, 20], [40, 40], [40, 60]];
        var distribution = [0, 0, 0, 0, 0, 0, 0, 0, 1, 2];
    
    
        var rnd = distribution[Math.ceil(Math.random()*10) % 10];
        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
var url = 'http://masonry.desandro.com/jquery.masonry.js';
jQuery.getScript(url, function(){
  $('<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
var url = 'http://local.fashiolista.com/fashiolista_media//js/original/jquery.masonry.js';
jQuery.getScript(url, function(){
  $('<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

Revisions

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