`a = 0-x` is about 3-10x faster than `a = -x` 🤯

Let's jump into JavaScript VM details to see why and how to guard against this VM de-opt:

🧵🪡🧶
The first thing to understand is that JavaScript has two representations for numbers:
- Integers: Fast path
- Floats (IEEE 754): Slower path

Integers are stored as “Two's complement” and can't have `-0`, but Floats can!
Let's assume: `x` is an Integer and `x = 0`
`0-x` => `0-0 => 0`, Result is `0` (Integer) Perfect!
`-x` => negate `x`.
- For any non-zero value, the result is an Integer.
- But for `0`, the result is `-0`. But integers can't have `-0`, So JavaScript stores it as a Float `-0`.
Why is this a de-opt:

1) Array access requires an Integer. So VM has to guard for Floats and convert Float (-0) into Integer(0);

2) VMs have special "fast" arrays for all integers but use a more generic (slower) array for an array of mixed types (such as Integers and Floats)
Different browsers have different perf penalties for this, but my tests show a 3-10x slow down on Apple M1:

Try it yourself: perf.builder.io/?q=eyJpZCI6Inh…
Learnings:
- Avoid using the negate operator `-x`!
- Prefer the subtraction operation `0-x` to get a negative number!
Oops, there was a mistake! The conclusion and explanations are valid, but the slow down is not as bad.

But check out the explanation with the details.

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Miško Hevery (AngularJS/Angular/Qwik)

Miško Hevery (AngularJS/Angular/Qwik) Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @mhevery

Oct 3, 2023
Lazy-loading is like exercise. Everyone says they are doing it, few are, and those that are rarely know what they are doing.

Frameworks were not designed with lazy loading in mind. It was a late addition to their development life cycle.

We now pay the price of bloated apps.

/1 Image
Granularity: What is the minimum piece of code that you can lazy-load?

In theory, anything can be lazy-loaded in practice, most FWs only support the lazy-loading of components.

Lazy-loading, events, or behavior is out of scope for most FWs. (No primitives are provided.)

/2 Image
A component is a mixture of markup, listeners, and effects. If your FW only allows lazy-loading components, it loads too much.

Markup, listeners, and effects are often needed at different times during the application lifecycle.

/3 Image
Read 12 tweets
Mar 14, 2023
I have been doing a lot of tweets on how VMs work, like the one below.

What surprised me are all of the negative comments that can be summarized as "JS sucks!"

I want to dispel this.



1/5
First, these tweets are not meant to make fun of JS but rather to share the understanding that there is no "magic" in the VM and that VM needs to solve problems where it has "insufficient" information.

2/5
How the VMs solve the "lack of information" problem is fascinating, observable, and in some rare cases, may have consequences for how you write your code. So it is helpful to understand it.

3/5
Read 5 tweets
Mar 14, 2023
How can `a+b` be almost 4x faster than `b+a`?

🤯

1/6 Image
Here is a test to prove it!!!

stackblitz.com/edit/web-platf…

2/6 Image
But wait! Running the same tests in opposite order results in the opposite result?

Now, `b+a` is 3.6x faster than `a+B`? 🤯

Both can't be true! Welcome to JavaScript VM de-opt!

3/6
Read 6 tweets
Mar 1, 2023
What is a hashing function, and how does it relate to HashMaps?
CPUs only understand array access.

HashMap is a data structure that converts non-numeric KEY access into numeric index access on an array.
Hash functions are pseudo-random number generators where the input value is the seed.

There are many types of hash-functions. A good hashing function is one whose output appears random and well-distributed in number space.
Read 5 tweets
Feb 28, 2023
Colocating client/server code in a single file is the next battleground for better DX between meta frameworks.

Let's zoom into what it is!

🧵🪡🧶
Module extraction is the way it is done today.
1) Well-known top-level function invoked by the server but tree-shaken by the bundler for the client.
2) Some form of manual type safety.

(no special code transformation needed)
Function Extraction requires code transformation, which can extract inlined functions into top-level exports (module extraction)

Advantage:
- A lot more natural DX
- Automatic type safety
- Any number of functions (not just well-known exports)
Read 4 tweets
Feb 23, 2023
React’s upcoming compiler will not solve prop-drilling, but Signals solve it well.

🧵🪡🧶 Image
Example: an application where the state is stored at a common ancestor of two child components that render and mutate the state. Image
We need to pass the state (and setter) down through prop-drilling.

This is the same for Signals as for `useState()`. Image
Read 6 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(