What are the hidden performance tricks for JavaScript?

A few general suggestions:

• Learn Rust! When I learned how memory worked, it made me a much better JS dev.

• Check out Casey Muratori's courses on performance. Some are free on YouTube.

• 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?

• Can/should you use WASM instead?

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 He does some really interesting deep dives into JS performance.

What is the actual operation you're trying to optimize? What does the code need to do?

This was attempt to research the fastest possible approach to a JavaScript GUI in the browser.

https://github.com/prettydiff/wisdom/blob/master/performance...

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. (https://stackoverflow.com/questions/23436159/how-bitwise-ope...)

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.

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:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

if you're just trying to initialize a new Array, you can just hardcode it and get much better performance. https://www.measurethat.net/Benchmarks/Show/29982/0/hardcode...

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 : https://www.youtube.com/watch?v=SMBvjmeOotA

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?

Binge on https://v8.dev/blog

Use chrome profiler