Floodfill vs highpass

JavaScript performance comparison

Test case created by Jim Yang

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://rawgit.com/jim-thisplace/969f5dd8babaa16ae4c0/raw/011b0c7d07ee8a8c48c9f443b24b951b5097c1f0/translucify.js"></script>
<style>
.row:nth-child(2n) {
background: #ff0;
}

.row:nth-child(2n+1) {
background: #0f0;
}
</style>
      
<script>
Benchmark.prototype.setup = function() {
  $('.row').remove();
  
  var html = '<div class="row"><img src="http://i.imgur.com/4KVrADr.png"></div>';
  
  var newRowsHtml = '';
  
  for (var i = 20; i > 0; i--) {
    newRowsHtml += html;
  }
  
  $('body').append(newRowsHtml);

};
</script>

Preparation code output

<style> .row:nth-child(2n) { background: #ff0; } .row:nth-child(2n+1) { background: #0f0; } </style>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Flood fill
window.translucify.floodfill($('img:nth-child(2n)'), {
  floodFillTolerance: 0.03
});
pending…
High pass
window.translucify.highpass($('img:nth-child(2n+1)'), {
  highPassValue: 250
});
pending…

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

Compare results of other browsers

0 Comments