masonry optimizations

Benchmark created on

Preparation HTML

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

<ul id="container" style="width: 1000px;>

</ul>

Test runner

Ready to run.

Testing in
TestOps/sec
Masonry default
var container =$('#container');

container.masonry({
  itemSelector: 'li',
  columnWidth: '200px'
});

var items = [];

for(var i=0; i<100; i++) {
  var colors = ['red', 'blue', 'green'];
  var sizes = [[200, 200], [400, 400], [400, 600]];

  var rnd3 = Math.ceil((Math.random()*10) % 3);
  items.push($('<li>').css({
    backgroundColor: colors[rnd],
    width: sizes[rnd][0] + 'px',
    height: sizes[rnd][1] + 'px'
  }));
}


container.append(items).masonry('appended', items);
ready
Masonry optimized
var container =$('#container');

container.masonry({
  itemSelector: 'li',
  columnWidth: '200px'
});

var items = [];

for(var i=0; i<100; i++) {
  var colors = ['red', 'blue', 'green'];
  var sizes = [[200, 200], [400, 400], [400, 600]];

  var rnd3 = Math.ceil((Math.random()*10) % 3);
  items.push($('<li>').css({
    backgroundColor: colors[rnd],
    width: sizes[rnd][0] + 'px',
    height: sizes[rnd][1] + 'px'
  }));
}


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.