The difference in performance is about 3x and it looks like an pretty ideal case for wasm. Seems to match observations from Zaplip portmortem:<p>> Rust is faster than JS in some cases, but those cases are rarer than we expected, and the performance gain is on the order of 2x some of the time, not 10x most of the time.<p><a href="https://zaplib.com/docs/blog_post_mortem.html" rel="nofollow">https://zaplib.com/docs/blog_post_mortem.html</a>
I wish there was an "about" blurb. Perhaps 2-6 paragraphs explaining what's going on?<p>Although it's obvious that you're comparing JavaScript and WASM performance, the devil is in the details. What <i>exactly</i> are you comparing?<p>There's quite a bit of overhead in calling out from WASM to the DOM; how are you making WASM faster? How much "JavaScript" is involved in the WASM version? Are you manipulating a Canvas? Generating a bitmap?
The innermost rendering loop in the JS seems to create and destruct an array instance for every single pixel iteration (see <a href="https://github.com/dmaynard/chaos-screen-saver/blob/master/src/modules/Attractor.js#L79" rel="nofollow">https://github.com/dmaynard/chaos-screen-saver/blob/master/s...</a>). I guess that this could be potentially optimized away by the JIT, but it will make things slower or at least less predictable.
I found the source of each:<p>JavaScript: <a href="https://github.com/dmaynard/chaos-screen-saver/blob/master/src/modules/Attractor.js" rel="nofollow">https://github.com/dmaynard/chaos-screen-saver/blob/master/s...</a><p>Rust: <a href="https://github.com/dmaynard/rust-wasm-attractor/blob/master/src/lib.rs" rel="nofollow">https://github.com/dmaynard/rust-wasm-attractor/blob/master/...</a>
My conclusion from this is that Firefox seems to be much faster than Chrome-based browsers when it comes to WASM. I have noticed this trend before.<p>I would be more interested in a more realistic test with scenarios replacing web frameworks like React. This benchmark seems more like something you would do with shaders anyway.
When comparing js and wasm, one thing people rarely mention is that with js, you get built-in functions/runtime (without crossing the boundary and then getting language mismatch).
When "reimplementing" that functionality in wasm, it will add a good amount to binary size. Just a hashmap will add a decent bit.
Not to say there aren't uses, but js comes with some advantages.
I feel this is a bit of an 'algorithmic fallacy'.<p>If you have a few algs. you need to run under the hood, preferably with few cross domain calls, that can be expressed mostly using a small bunch of native types and not a lot of maps/string etc. then something low-level like WASM might help.<p>But that doesn't match most real world scenarios very well.
I get that the intended meaning is "JS sux", but I can't help being impressed with how performant engines are. The "pixels per ms" count ratio is less than 3:1 on my machine, in what I imagine is a CPU-heavy task.
Rust is a great solution to the memory safety problem, but is more difficult to use and slower to compile than some other languages. I'm wondering why I would use Rust for WebAssembly, which doesn't have memory safety issues?
On my phone Firefox I occasionally get a surprisingly stable "Infinity" readout. Am I seeing a timing sidechannel mitigation in the flesh or is that just my news-fed brain imagining explanations?
On my iPhone: 2.8K vs 6K (WASM)<p>On my Linux laptop, Firefox: 1.7K vs 3K<p>On my Linux laptop, Brave: 1.5K vs 6K<p>It does seem to vary quite a bit based on the pattern being drawn, though. These ratios seem to roughly hold, but there's wide variance.
It's nice to see how much faster is wasm. This kind of problem would also be nice for parallelization. What's the state of multi-threading wasm? any advantage over javascript web workers?
Ah yes, all the 3d websites and 3d information I use regularly.<p>IMO we need to start building UI frameworks that are powered by WASM, and then benchmark those as compared to JS equivalent.
The JS Framework Benchmark compares benchmarks (both WASM and JS) in the more usual setting of DOM manipulations.<p>The link below pre-filters to my subjective "picks" that I think give a birds-eye view of the wasm-to-js comparison for DOM manipulation:<p>My picks, ranked descending by performance: SolidJS > Vue > Sycamore-rs > Svelte > React > Yew<p>SolidJS is a truly reactive JS framework. Sycamore-rs can be taught of as the Rust-clone of SolidJS, and Yew can be taught of as the Rust-clone of React.<p>[0] <a href="https://krausest.github.io/js-framework-benchmark/current.html#eyJmcmFtZXdvcmtzIjpbImtleWVkL3JlYWN0LWhvb2tzIiwia2V5ZWQvc29saWQiLCJrZXllZC9zdmVsdGUiLCJrZXllZC9zeWNhbW9yZSIsImtleWVkL3Z1ZSIsImtleWVkL3lldy1ob29rcyIsIm5vbi1rZXllZC9hcHBydW4iLCJub24ta2V5ZWQvYXJ0Iiwibm9uLWtleWVkL2F1cmVsaWEiLCJub24ta2V5ZWQvYmRjIiwibm9uLWtleWVkL2JpbmRpbmcuc2NhbGEiLCJub24ta2V5ZWQvY2FsbGJhZy1qc3giLCJub24ta2V5ZWQvY2FsbGJhZy1qc3gtbGlzdCIsIm5vbi1rZXllZC9jcnVpIiwibm9uLWtleWVkL2N5Y2xlanMtZG9tIiwibm9uLWtleWVkL2RhdHVtIiwibm9uLWtleWVkL2RlbG9yZWFuIiwibm9uLWtleWVkL2Rvam8iLCJub24ta2V5ZWQvZG9tZGlmZiIsIm5vbi1rZXllZC9kb212bSIsIm5vbi1rZXllZC9kb29odG1sIiwibm9uLWtleWVkL2RveiIsIm5vbi1rZXllZC9lZi1qcyIsIm5vbi1rZXllZC9lbG0iLCJub24ta2V5ZWQvZW5kb3JwaGluIiwibm9uLWtleWVkL2V0Y2giLCJub24ta2V5ZWQvZmlkYW4iLCJub24ta2V5ZWQvZnJlIiwibm9uLWtleWVkL2hhbG9nZW4iLCJub24ta2V5ZWQvaGVyZXN5Iiwibm9uLWtleWVkL2h1bGxvIiwibm9uLWtleWVkL2h5ZHJvLWpzIiwibm9uLWtleWVkL2ltYmEiLCJub24ta2V5ZWQvaW5mZXJubyIsIm5vbi1rZXllZC9saWdodGVyaHRtbCIsIm5vbi1rZXllZC9saXQiLCJub24ta2V5ZWQvbGl0LWh0bWwiLCJub24ta2V5ZWQvbGl0ZXJhbGpzIiwibm9uLWtleWVkL21hcXVldHRlIiwibm9uLWtleWVkL21pa2FkbyIsIm5vbi1rZXllZC9taW1ibCIsIm5vbi1rZXllZC9taXNvIiwibm9uLWtleWVkL21vb24iLCJub24ta2V5ZWQvbmVvdyIsIm5vbi1rZXllZC9uZXZlcmxhbmQiLCJub24ta2V5ZWQvcG9seW1lciIsIm5vbi1rZXllZC9yYWN0aXZlIiwibm9uLWtleWVkL3JlYWN0Iiwibm9uLWtleWVkL3JlZG9tIiwibm9uLWtleWVkL3JlZmxleC1kb20iLCJub24ta2V5ZWQvcmlvdCIsIm5vbi1rZXllZC9zYW4iLCJub24ta2V5ZWQvc2NhcmxldHMtZnJhbWUiLCJub24ta2V5ZWQvc2VlZCIsIm5vbi1rZXllZC9zaWZyciIsIm5vbi1rZXllZC9zaW1pIiwibm9uLWtleWVkL3NsaW0tanMiLCJub24ta2V5ZWQvc2xpbmdqcyIsIm5vbi1rZXllZC9zdGR3ZWIiLCJub24ta2V5ZWQvc3RlbSIsIm5vbi1rZXllZC9zdmVsdGUiLCJub24ta2V5ZWQvdWh0bWwiLCJub24ta2V5ZWQvdWk1LXdlYmNvbXBvbmVudHMiLCJub24ta2V5ZWQvdmFuaWxsYS1kb20tZnJhbWV3b3JrIiwibm9uLWtleWVkL3ZhbmlsbGFqcyIsIm5vbi1rZXllZC92YW5pbGxhanMtMSIsIm5vbi1rZXllZC92dWUiXSwiYmVuY2htYXJrcyI6WyIwMV9ydW4xayIsIjAyX3JlcGxhY2UxayIsIjAzX3VwZGF0ZTEwdGgxa194MTYiLCIwNF9zZWxlY3QxayIsIjA1X3N3YXAxayIsIjA2X3JlbW92ZS1vbmUtMWsiLCIwN19jcmVhdGUxMGsiLCIwOF9jcmVhdGUxay1hZnRlcjFrX3gyIiwiMDlfY2xlYXIxa194OCIsIjIxX3JlYWR5LW1lbW9yeSIsIjIyX3J1bi1tZW1vcnkiLCIyM191cGRhdGU1LW1lbW9yeSIsIjI1X3J1bi1jbGVhci1tZW1vcnkiLCIyNl9ydW4tMTBrLW1lbW9yeSIsIjMxX3N0YXJ0dXAtY2kiLCIzM19zdGFydHVwLW1haW50aHJlYWRjb3N0IiwiMzRfc3RhcnR1cC10b3RhbGJ5dGVzIl0sImRpc3BsYXlNb2RlIjoxLCJjYXRlZ29yaWVzIjpbMSwyLDMsNF19" rel="nofollow">https://krausest.github.io/js-framework-benchmark/current.ht...</a>
These comparisons are always highly biased by the kind of work being done. V8 is so good at optimizing code, it's usually possible to reach similar performance in JS.<p>See <a href="https://surma.dev/things/js-to-asc/" rel="nofollow">https://surma.dev/things/js-to-asc/</a><p>Not that relevant, but it looks pretty terrible on a hi-dpi screen, it's probably not accounting for the pixel density when creating the canvas. Looks much better on a normal screen.