javascriptv8spidermonkey

why Firefox runs this code 10x faster than Chrome


I need to run this code on WebKit, it's a part of a hybrid app for android:

for(var x = 0; x < width; x++) {
    for(var y = 0; y < height; y++) {
        var i = (y * width + x) * 3;
        var r = data[i];
        var g = data[i + 1];
        var b = data[i + 2];
        var green = is_green(r, g, b);
        x_histogram[x] += green;
        y_histogram[y] += green;
    }
}

Here is full code to test: https://jsbin.com/boduputebu/edit?js,console

I thought V8 is faster than Firefox (SpiderMonkey), but here for this simple code SpiderMonkey is significantly faster. On my laptop the performance is:

Chrome: 30 ms
Node: 30 ms
Firefox: 3 ms
Java (same code with Java): 3 ms

Do you have any idea to change the code to make it fast on V8. With current performance I had to write it native on Java side, but it's not a good option for me. Or if there is no way to make it faster do you know why V8 runs this code very slower?

Version:

Chrome: "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36"
FireFox: "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:49.0) Gecko/20100101 Firefox/49.0"

Solution

  • This quick n dirty code is already significantly faster in v8. (~24ms for 1000x1000 dataset)

    var calc_histogram = function() {
        for(var x = 0; x < width|0; x++) {
            for(var y = 0; y < height|0; y++) {
                var  i = ((y * width + x) * 3)|0;
                var  r = data[i]|0;
                var  g = data[i + 1]|0;
                var  b = data[i + 2]|0;
                var  green = ((g > 80) && (g > (r + 35)|0) && (g > (b + 35)|0))|0;
                x_histogram[x] += green|0;
                y_histogram[y] += green|0;
            }
        }
    };
    

    |0 ensure that the number is an integer, it is asm js technique. Calling an array with a number require to make sure it is an integer, using |0 makes it explicit.

    EDIT : And this is the fastest I manage to get without unnecessary |0. ~4ms for 500x500 and ~11 for 1000x1000. Note that I inverted the loops so it reads data in sequence to take advantage of prefetch, and I also used a bigger dataset to make improvements noticeable.

    var calc_histogram = function() {
        var i=0;
        for(var y = 0; y < height; y++) {
          for(var x = 0; x < width; x++) {
                var r = (data[i|0]+35)|0;
                var g = data[(i+1)|0];
                var b = (data[(i+2)|0]+35)|0;
    
                if((g > 80) && (g > r) && (g > b)){
                  x_histogram[x]++;
                  y_histogram[y]++;
                }
                i=(i+3)|0;
            }
        }
    }