Where to find more details on optimized JS produced by ReScript

I see this from the website.

Faster than JavaScript

JavaScript’s been aggressively optimized by talented engineers over a long span. Unfortunately, even for seasoned JS devs, it can be hard to know how to properly leverage JS’s performance. ReScript’s type system and compiler naturally guides you toward writing code that’s very often performant by default, with good leverage of various Just-In-Time optimizations (hidden classes, inline caching, avoiding deopts, etc).

A widespread adage to write fast JavaScript code is to write as if there’s a type system (in order to trigger JS engines’ good optimization heuristics); ReScript gives you a real one and generates code that’s friendly to optimizations by default.

Is there any detailed information about this? i.e, the Just-In-Time optimizations (hidden classes, inline caching, avoiding deopts, etc).

When you create {} objects in JS, the V8 engine creates “hidden classes” for them behind the scenes. If you follow some rules and don’t change the object shape or order of properties, the engine will reuse the same class for all your objects leading to better performance. Rescript’s type system kinda enforces this by default just due to the strictness of it

3 Likes

Some practical example:

https://twitter.com/KrComet/status/1653351666446655488

1 Like

Thank you, are there any other optimizations like this that I can read about?

Very cool, I didn’t know this is the case.

Generally, when you write in ReScript, you don’t need to think of performance. I’ve never seen it generate slow code. It’s actually usually faster than handwritten js code:

  • It uses var in the generated code, which is faster than const https://twitter.com/artalar_dev/status/1598429731023687681
  • It inlines record fields during spread. It’s a huge performance benefit https://twitter.com/artalar_dev/status/1571839333694324736
  • It’s idiomatic to use labeled args, while in js you usually pass an object with options (an object allocation is quite costly)
  • There are blocks as expressions, which safes a function call you’d usually have in Js
  • In idiomatic ReScript, you create data objects and functions to do operations on them. Compared to classes people usually use in Js, ReScript’s approach is faster and tree-shakeable.
  • Besides hidden classes mentioned by @hellos3b above, js engines try to calculate the value types before usage, which is much easier to do, when they don’t change the type during their lifetime. This allows js engines to apply additional performance optimizations.

If I remember something else, I’ll add it here.

In JS possible to write super performant code, but the readability of the code will be much-much worse than ReScript code with very similar performance.

19 Likes

This is a fantastic summary!

3 Likes

Love it! Thank you so much!

1 Like

Also, another non-obvious way Rescript is faster is that it compiles Int32 to JavaScript’s int32 via bitwise OR (|) operator

5 Likes