3 ms·
When I started developing my JS 2D canvas library (back in 2013) I worked on a desktop PC and used Firefox for most of my code testing work. The library always
by rikroots 5y ago
When I started developing my JS 2D canvas library (back in 2013) I worked on a desktop PC and used Firefox for most of my code testing work. The library always ran faster on Firefox than on IE or Chrome, which at the time I assumed was probably something to do with Firefox putting extra effort into the canvas part of their engine.
Then in 2019 I rewrote the whole library from scratch (again), this time working on a MacBook using Chrome for most of my develop/test stuff. The library is now much faster on Chrome! I assume what happened was that I was constantly looking for ways to improve the code for speed (in canvas-world, if everything is not completing in under 16ms then you must own the humiliation) which meant that prior to 2019 I was subconsciously optimising for FF; after 2019 for Chrome.
> it requires very detailed knowledge of the JS engine internals and may require giving up most high-level features that define the language
I can't claim that I have that knowledge. Most of my optimisations have been basic JS 101 stuff - object pools (eg for canvas, vectors, etc) to minimise the stuff sent to garbage, doing the bulk of the work in non-DOM canvases, minimising prototype chain lookups as much as possible, etc. When I tried to add web workers to the mix I ended up slowing everything down!
There is stuff in my library that I do want to port over to WASM, but my experiments in that direction so far have been less than successful - I need to learn a lot more WASM/WebAssembly/Rust before I make progress, but the learning is not as much fun as I had hoped it would be.
> Javascript can be made surprisingly fast
The speeds that can be achieved by browser JS engines still astonish me! For instance, shape and animate an image between two curved paths in real time in a 2D (not WebGL!) canvas:
- CodePen - https://codepen.io/kaliedarik/pen/ExyZKbY https://codepen.io/kaliedarik/pen/ExyZKbY
- Demo with additional controls - https://scrawl-v8.rikweb.org.uk/demo/canvas-024.html https://scrawl-v8.rikweb.org.uk/demo/canvas-024.html