Why are JS / React much quicker than WebAssembly / Rust?

Question

I'm doing some tests with Wasm generated by Rust (wasm_bindgen). What dazzles me is that the JavaScript implementation seems to be much quicker than the Rust implementation.

The program is creating n items of a dict / object / map and pushing it to an array.

The JavaScript implementation is very easy:

const createJSObjects = (amount: number) => {
  const arr: Array<{ index: number }> = []
  for (let i = 0; i < amount; i++) {
    arr.push({
      index: i
    })
  }
  return arr
}

easy enough. The Rust implementation is similar:

#[wasm_bindgen]
pub fn create_rust_objects(amount: usize) -> JsValue {
    let mut arr: Vec<Obj> = vec![];
    arr.reserve(amount);

    for i in 0..amount {
        let itm = Obj { index: i };
        arr.push(itm);
    }

    JsValue::from_serde(&arr).unwrap()
}

I've also tried with a vector of hashmaps:

let mut field = HashMap::new();
field.insert("index", i);
arr.push(field);

Both are equally "slow".

I'm importing the Wasm binary with the generated js and d.ts files that comes with the wasm-build.

The JavaScript is at least twice as fast as the rust code. Why is this? Am I doing something wrong with the implementation? The implementation is set up according to MDN docs.

I've put all the code in a React project - https://github.com/Devalo/rust-react-wasm-test

Answer 1

The answer is that you are likely not doing anything wrong. Essentially, WASM has the potential to be faster, but will not always be faster.

I really liked this quick read from Winston Chen in which they run performance testing comparing web assembly to vanilla JS.

If you're interested in more in-depth conversation, this talk by Surma at Google I/O '19 is very informative. From the video:

Both JavaScript and Web Assembly have the same peak performance. They are equally fast. But it is much easier to stay on the fast path with Web Assembly than it is with JavaScript.