I am currently working on a heavy JS-based tool where every millisecond counts. I've been searching for lesser-known JavaScript performance tricks that go beyond typical optimizations like using web workers or removing unused code. It feels like uncovering hidden knowledge.<p>One discovery I've made is that using new Array is significantly faster than Array.from or push()[0].<p>Could you share any similar insights or lesser-known performance optimizations you've come across?<p>[0] https://www.measurethat.net/Benchmarks/ShowResult/506720
A few general suggestions:<p>• Learn Rust! When I learned how memory worked, it made me a much better JS dev.<p>• Check out Casey Muratori's courses on performance. Some are free on YouTube.<p>• Start from scratch with a data-oriented approach. What bits do you need to move around, and why? What's the best way to store and shape those bits?<p>• Can/should you use WASM instead?
If working with number arrays using Float32Array can provide significant improvements to performance.<p>Never use .forEach(), always use a for loop. Same applies to methods like .map().<p>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.<p>Caching can help if you're doing repetitive computations.<p>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.<p>Edit: Also check out this guy on YT, <a href="https://www.youtube.com/watch?v=WLwTlC1R2sY" rel="nofollow">https://www.youtube.com/watch?v=WLwTlC1R2sY</a> He does some really interesting deep dives into JS performance.
This was attempt to research the fastest possible approach to a JavaScript GUI in the browser.<p><a href="https://github.com/prettydiff/wisdom/blob/master/performance_frontend.md">https://github.com/prettydiff/wisdom/blob/master/performance...</a><p>The techniques mentioned are stupid fast to the fewest milliseconds, but most JavaScript developers find this incredibly unpopular.
you can "force" integer arithmetic with bit or (example your_float|0), this helps the JavaScript runtime to optimise calls and use (faster) int arithmetic. (<a href="https://stackoverflow.com/questions/23436159/how-bitwise-operations-boost-performance-in-asm-js" rel="nofollow">https://stackoverflow.com/questions/23436159/how-bitwise-ope...</a>)<p>always remember the fastest code is the code that is not executed at runtime.
Don’t use the strict equality operator if type inequality should short circuit to false. It is 30-70% faster to check for equality of the result of typeof, and only when true to check value equality.<p>This makes no sense to me, since checking type is supposedly the first step of each equality operator’s algorithm, but this is the result JSBench keeps returning me.
I haven't used them much, but I would check out typed arrays:<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...</a>
if you're just trying to initialize a new Array, you can just hardcode it and get much better performance.
<a href="https://www.measurethat.net/Benchmarks/Show/29982/0/hardcoded-array-vs-arrayfrom-vs-new-array-vs-push" rel="nofollow">https://www.measurethat.net/Benchmarks/Show/29982/0/hardcode...</a><p>This isn't necesarrily unknown, but knowing that there's a cost associated with promises and async/await will get you pretty far in terms of performance. I remember the idea first clicking when I watched this :
<a href="https://www.youtube.com/watch?v=SMBvjmeOotA" rel="nofollow">https://www.youtube.com/watch?v=SMBvjmeOotA</a>
Typed arrays are fast, for(let i = O; i < max; i++) loops are fast. But also, what kind of tool are you making where you need every milliseconds but also need to use JS?