3px vs 5px blur

JavaScript performance comparison

Revision 3 of this test case created

Preparation code

 <script src="http://fabricjs.com/lib/fabric.js"></script>
<script>
Benchmark.prototype.setup = function() {
    var matrix5 = [1 / 1048576, 10 / 1048576, 45 / 1048576, 120 / 1048576, 210 / 1048576, 252 / 1048576, 210 / 1048576, 120 / 1048576, 45 / 1048576, 10 / 1048576, 1 / 1048576, 10 / 1048576, 100 / 1048576, 450 / 1048576, 1200 / 1048576, 2100 / 1048576, 2520 / 1048576, 2100 / 1048576, 1200 / 1048576, 450 / 1048576, 100 / 1048576, 10 / 1048576, 45 / 1048576, 450 / 1048576, 2025 / 1048576, 5400 / 1048576, 9450 / 1048576, 11340 / 1048576, 9450 / 1048576, 5400 / 1048576, 2025 / 1048576, 450 / 1048576, 45 / 1048576, 120 / 1048576, 1200 / 1048576, 5400 / 1048576, 14400 / 1048576, 25200 / 1048576, 30240 / 1048576, 25200 / 1048576, 14400 / 1048576, 5400 / 1048576, 1200 / 1048576, 120 / 1048576, 210 / 1048576, 2100 / 1048576, 9450 / 1048576, 25200 / 1048576, 44100 / 1048576, 52920 / 1048576, 44100 / 1048576, 25200 / 1048576, 9450 / 1048576, 2100 / 1048576, 210 / 1048576, 252 / 1048576, 2520 / 1048576, 11340 / 1048576, 30240 / 1048576, 52920 / 1048576, 63504 / 1048576, 52920 / 1048576, 30240 / 1048576, 11340 / 1048576, 2520 / 1048576, 252 / 1048576, 210 / 1048576, 2100 / 1048576, 9450 / 1048576, 25200 / 1048576, 44100 / 1048576, 52920 / 1048576, 44100 / 1048576, 25200 / 1048576, 9450 / 1048576, 2100 / 1048576, 210 / 1048576, 120 / 1048576, 1200 / 1048576, 5400 / 1048576, 14400 / 1048576, 25200 / 1048576, 30240 / 1048576, 25200 / 1048576, 14400 / 1048576, 5400 / 1048576, 1200 / 1048576, 120 / 1048576, 45 / 1048576, 450 / 1048576, 2025 / 1048576, 5400 / 1048576, 9450 / 1048576, 11340 / 1048576, 9450 / 1048576, 5400 / 1048576, 2025 / 1048576, 450 / 1048576, 45 / 1048576, 10 / 1048576, 100 / 1048576, 450 / 1048576, 1200 / 1048576, 2100 / 1048576, 2520 / 1048576, 2100 / 1048576, 1200 / 1048576, 450 / 1048576, 100 / 1048576, 10 / 1048576, 1 / 1048576, 10 / 1048576, 45 / 1048576, 120 / 1048576, 210 / 1048576, 252 / 1048576, 210 / 1048576, 120 / 1048576, 45 / 1048576, 10 / 1048576, 1 / 1048576],
      matrix3 = [1 / 84, 1 / 84, 1 / 84, 2 / 84, 1 / 84, 1 / 84, 1 / 84,
        1 / 84, 1 / 84, 2 / 84, 2 / 84, 2 / 84, 1 / 84, 1 / 84,
        1 / 84, 2 / 84, 3 / 84, 3 / 84, 3 / 84, 2 / 84, 1 / 84,
        2 / 84, 2 / 84, 3 / 84, 4 / 84, 3 / 84, 2 / 84, 2 / 84,
        1 / 84, 2 / 84, 3 / 84, 3 / 84, 3 / 84, 1 / 84, 1 / 84,
        1 / 84, 1 / 84, 2 / 84, 2 / 84, 2 / 84, 1 / 84, 1 / 84,
        1 / 84, 1 / 84, 1 / 84, 2 / 84, 1 / 84, 1 / 84, 1 / 84
      ];
};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
3px
fabric.Image.fromURL("url(data:image/gif;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KCTxkZWZzPg0KCQk8cmFkaWFsR3JhZGllbnQgaWQ9InN1biIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNDUlIj4NCgkJCTxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6aHNsKDIxMCwxMDAlLDUwJSk7Ii8+DQoJCQk8c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOmhzbGEoMjEwLDEwMCUsNTAlLDApOyIvPg0KCQk8L3JhZGlhbEdyYWRpZW50Pg0KCTwvZGVmcz4NCgk8Y2lyY2xlIGN4PSI1MCUiIGN5PSIxNTBweCIgcj0iNzAwIiBzdHJva2UtZGFzaGFycmF5PSIxMDAiIHN0cm9rZT0idXJsKCNzdW4pIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjE0MDAiLz4NCjwvc3ZnPg==)", function(image) {
  var filter = new fabric.Image.filters.Convolute(matrix3);

  image.filters.push(filter);
  image.applyFilters();
});
pending…
5px
fabric.Image.fromURL("url(data:image/gif;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KCTxkZWZzPg0KCQk8cmFkaWFsR3JhZGllbnQgaWQ9InN1biIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNDUlIj4NCgkJCTxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6aHNsKDIxMCwxMDAlLDUwJSk7Ii8+DQoJCQk8c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOmhzbGEoMjEwLDEwMCUsNTAlLDApOyIvPg0KCQk8L3JhZGlhbEdyYWRpZW50Pg0KCTwvZGVmcz4NCgk8Y2lyY2xlIGN4PSI1MCUiIGN5PSIxNTBweCIgcj0iNzAwIiBzdHJva2UtZGFzaGFycmF5PSIxMDAiIHN0cm9rZT0idXJsKCNzdW4pIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjE0MDAiLz4NCjwvc3ZnPg==)", function(image) {
    var filter = new fabric.Image.filters.Convolute(matrix5);

    image.filters.push(filter);
    image.applyFilters();
  }
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment