4 ms·
If working with number arrays using Float32Array can provide significant improvements to performance. Never use .forEach(), always use a for loop. Same applies
by kypro 3y ago
If working with number arrays using Float32Array can provide significant improvements to performance.
Never use .forEach(), always use a for loop. Same applies to methods like .map().
Some calculations are just much more expensive to do than others. Exponentiation for example is much more expensive than multiplication. You want to write your code in a way that not only considers the total number of operations, but also minimises expensive operations.
Caching can help if you're doing repetitive computations.
If you're absolutely pushing performance to the max you will probably want to look at doing some clever stuff with WebGL2, WASM or Web Workers. Wherever you can avoid this though I would recommend it because it will make your code much more complicated and won't even necessarily out perform because of overheads.
Edit: Also check out this guy on YT, https://www.youtube.com/watch?v=WLwTlC1R2sY https://www.youtube.com/watch?v=WLwTlC1R2sY He does some really interesting deep dives into JS performance.
- chilling 3y ago> If working with number arrays using Float32Array can provide significant improvements to performance. Do you mean TypedArray? [0] > Never use .forEach(), always use a for loop. Same applies to methods like .map(). I just found it out yesterday [1]. It's a nice trick. I already changed all forEach (even tho it maked my eyes a little bit wet). > some clever stuff with WebGL2, WASM or Web Workers I already use Web Workers with async calls to divide main task into smaller pieces and not to block main render. But I am pretty new to this concept so I don't grasp fully what is the overhead of using this method. Thank you for the video - will check it now. [0] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#specifications https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... [1] https://leanylabs.com/blog/js-forEach-map-reduce-vs-for-for_of/ https://leanylabs.com/blog/js-forEach-map-reduce-vs-for-for_...
- kypro 3y ago> Do you mean TypedArray? [0] Yes, generally you'll want Float32Array, but I guess which TypedArray you'll want to use in your code use will depend on use. > I already use Web Workers with async calls to divide main task into smaller pieces and not to block main render. But I am pretty new to this concept so I don't grasp fully what is the overhead of using this method. If you can you'll want to use a "transferable object" to reduce overheads when passing data into worker thread, https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Transferable_objects https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers... If you're using Web Workers this is a great video to watch and it discusses "transferable objects" around the 7 minute mark, https://www.youtube.com/watch?v=pQPqhZRUz3U https://www.youtube.com/watch?v=pQPqhZRUz3U The other thing I forgot to mention was to avoid using async/await wherever possible. I'm guessing you're not using it unnecessarily anyway, but it will add a significant overhead to your method calls if you are.
- chilling 3y agoamazing video! Thank you very much