Why is my WebAssembly function slower than the JavaScript equivalent?

Question

Apologies for the wide question! I study WASM and created the Mandelbrot algorithm in C:

int iterateEquation(float x0, float y0, int maxiterations) {
  float a = 0, b = 0, rx = 0, ry = 0;
  int iterations = 0;
  while (iterations < maxiterations && (rx * rx + ry * ry <= 4.0)) {
    rx = a * a - b * b + x0;
    ry = 2.0 * a * b + y0;
    a = rx;
    b = ry;
    iterations++;
  }
  return iterations;
}

void mandelbrot(int *buf, float width, float height) {
  for(float x = 0.0; x < width; x++) {
    for(float y = 0.0; y < height; y++) {
      // map to mandelbrot coordinates
      float cx = (x - 150.0) / 100.0;
      float cy = (y - 75.0) / 100.0;
      int iterations = iterateEquation(cx, cy, 1000);
      int loc = ((x + y * width) * 4);
      // set the red and alpha components
      *(buf + loc) = iterations > 100 ? 255 : 0;
      *(buf + (loc+3)) = 255;
    }
  }
}

I compile in WASM as follows (file name / output is omitted for clarity)

clang -emit-llvm  -O3 --target=wasm32 ...
llc -march=wasm32 -filetype=asm ...
s2wasm --initial-memory 6553600 ...
wat2wasm ... 

I load JavaScript, compile, and then call the following:

instance.exports.mandelbrot(0, 300, 150)

The output is copied to the canvas, which allows me to make sure that it is executed correctly. On my computer, the above function takes about 120 ms to execute.

However, here is the equivalent of JavaScript:

const iterateEquation = (x0, y0, maxiterations) => {
  let a = 0, b = 0, rx = 0, ry = 0;
  let iterations = 0;
  while (iterations < maxiterations && (rx * rx + ry * ry <= 4)) {
    rx = a * a - b * b + x0;
    ry = 2 * a * b + y0;
    a = rx;
    b = ry;
    iterations++;
  }
  return iterations;
}

const mandelbrot = (data) => {
  for (var x = 0; x < 300; x++) {
    for (var y = 0; y < 150; y++) {
      const cx = (x - 150) / 100;
      const cy = (y - 75) / 100;
      const res = iterateEquation(cx, cy, 1000);
      const idx = (x + y * 300) * 4;
      data[idx] = res > 100 ? 255 : 0;
      data[idx+3] = 255;
    }
  }
}

It only takes 62 ms to complete.

Now I know that WebAssembly is very new and not very optimized. But I can't help but feel that it should be faster than that!

Can someone notice something obvious, maybe I missed it?

, C- , '0' - , ? , ? ?

, :

https://wasdk.imtqy.com/WasmFiddle/?jvoh5

(WASM, JavaScript)

Answer 1

10% JS. :

• wasm profit
• / .

. Uint8Array (ok FF). rgba, Uint32Array ant .set() .

/ (rgba) wasm , / (r, g, b, a). .

node.js ( ), 8.2.1 JS. v8 v6.0 . 8.2.1 - ES6, const, => .. ES5. , v8 v6.2 .

• wasm-opt -O3, - clang -O3.
• s2wasm --import-memory
• wasdk . , , .
• , , . , IMHO wasdk .
• benchmark.js, .

---

: .

https://github.com/nodeca/multimath . , init, , js .. " " . .