DEV Community: Aykut Akgün

[Weekly Js Perf] Fastest way to initialize a Map with initial values

Aykut Akgün — Sat, 18 Mar 2023 17:02:00 +0000

Welcome to Weekly JavaScript Performance, Here we explore weekly JavaScript-related performance tips and tricks so that you write better and faster apps!

The topic today: Performance of initializing Maps, and what the best method is to do so.

When working with bulk amounts of data it's important to initialize and use the data in the right way to ensure a fast and effective method of work.

We compare the following situations:
Item Initialization: 1, 100, 10000 from an Object. It's important to keep in mind that the way, you store your data also has a big impact.

Setup Code:

// Set the number of iterations
const sampleSize = 1

// object to store the samples
const samples = {};

for (let i = 0; i < sampleSize; i++) {
  samples[crypto.randomUUID()] = crypto.randomUUID();
}

Benchmark 1 (Initializing in constructor):

// Get an array of the keys in the samples object
const keys = Object.keys(samples)

// Create an empty array to store the key-value pairs as two-element arrays [Required by Map]
const initial = []
for (let i = 0; i<keys.length;i++) {
    initial.push([keys[i], samples[keys[i]]])
}
// initial schema: [key, value][]
const map = new Map(initial)

Benchmark 2 (Initializing in constructor via Object.entries):

new Map(Object.entries(samples))

Benchmark 3 (Initializing it via Map.set):

// Get an array of the keys in the samples object
const keys = Object.keys(samples)
// create a new empty Map
const map = new Map()
for (let i = 0; i<keys.length;i++) {
    // assign properties via set
    map.set(keys[i], samples[keys[i]])
}

So now how is the performance?
sampleSize: 1
Benchmark 1: 25812739 ops / S (33.83% slower) ±1.99%
Benchmark 2: 10358422 ops / S (73.4% slower) ±1.32%
Benchmark 3: 39010393 ops / S (fastest) ±1.57%
sampleSize: 100
Benchmark 1: 197028 ops / S (18.51% slower) ±2.21%
Benchmark 2: 74668 ops / S (69.13% slower) ±1.69% nice²
Benchmark 3: 39010393 ops / S (fastest) ±1.36%
sampleSize: 10_000
Benchmark 1: 680 ops / S (18.51% slower) ±15.66%
Benchmark 1: 419 ops / S (51.6% slower) ±1.19%
Benchmark 3: 812 ops / S (fastest) ±12.13%

So what do we learn from this?
Method 1 Requires us to create additional arrays so we can store them in the required Schema: [key, value][] is slower.
Method 2 Makes the step in Method 1 automatically but is much slower, but extremely consistent.
Method 3 is the fastest and recommended Method.
Jsbench Link to Benchmark

But what If the Data is already prepared in the correct schema?

Setup Code:

// Set the number of iterations
const iterations = 1

// object to store the samples
const samples = {};

for (let i = 0; i < iterations; i++) {
  samples[crypto.randomUUID()] = crypto.randomUUID();
}

// Get an array of the keys in the samples object
const keys = Object.keys(samples)

// Create an empty array to store the key-value pairs as two-element arrays [Required by Map]
const initial = []
for (let i = 0; i<keys.length;i++) {
    initial.push([keys[i], samples[keys[i]]])
}

Benchmark 1 & 2 (Initializing in constructor):

const map = new Map(initial)

Benchmark 3 (Initializing it via Map.set):

const map = new Map()
for (let i = 0; i<keys.length;i++) {
    map.set(keys[i], samples[keys[i]])
}

So now how is the performance when the Data is prepared?
sampleSize: 1
Benchmark 1: 43308604 ops / S (8.19% slower) ±1.69% nice
Benchmark 3: 47173798 ops / S (fastest) ±1.57%
sampleSize: 100
Benchmark 1: 424558 ops / S (fastest) ±2.07%
Benchmark 3: 399689 ops / S (5.86% slower) ±1.43%
sampleSize: 10_000
Benchmark 1: 2213 ops / S (fastest) ±1.83%
Benchmark 3: 2037 ops / S (7.98 % slower) ±0.73%

This is surprising! If we have more than 1 entry to set (2 is already 11% slower), then using the entries method is always faster!
Jsbench Link to Benchmark

Conclusion:
If you have the entries already perfectly set up, then I recommend you to use the initializer to set up your Map.
But if you have it in any other form (even if you can choose how you want to save the Data) I strongly recommend you to use From our First test the Benchmark 3 Method (via Object.keys then for loop). The reason why it's usually slower is that when we use functions like Object.entries, they tend to create a lot of arrays that only hold key, value data. So If you for example have to load a JSON to convert them to Maps, It's much better to store them as an Object and then use the Method described Above. (Also it will cost you much less Memory, all of those arrays take a lot of Memory!)

TLTR: Use set in every case (including the way to save and load the Data) with object.keys to create the Maps, unless you need the Data in a format like Object.entries()

Keep in mind that results may vary from browser to browser, tests have been conducted with Chrome, run the benchmarks yourself! (Results may vary depending on CPU Too, on intel Firefox, object.entries is faster (by 5% on 10k))

The best way to get the last element of an array:

Aykut Akgün — Wed, 01 Dec 2021 17:57:34 +0000

EDIT: Safari does not support it ,_,
But use it in Node js or with a bundler!

So some people would say:

array[array.length-1]

But I'd say:

array.at(-1)

The Performance of both is the same.

MDN article: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at

The weird behaviour of CSS

Aykut Akgün — Wed, 17 Nov 2021 13:42:10 +0000

Question: What is the color of the text?

<div class="parentclass">
  <p class="class1 class2">
    Text
  </p>
</div>

/* 1 */
.class1.class1.class1 {
  color:red
}

/* 2 */
.class1.class2 {
  color:cyan
}

/* 3 */
.class1 {
  color:blue
}

/* 4 */
.class1:hover {
  color:black
}

/* 5 */
.parentclass .class1 {
  color:yellow
}

Spoiler:
Result

Case 1 wins aka the text color is red.

But why is that? and how exactly does CSS behave?
So I decided to open up a Jsfiddle and start playing around. Those are the results I've gotten:

In total, we have 2 rules and a special condition that controls CSS behavior. After that, we dive into my theory on why it works like that?

Css uses something like a weight system which is depending on the number of selectors.

That also explains the behavior why for example

/* This one loses since its got in total 2 selectors,
once the .parentclass and once .class1 */
.parentclass .class1 {
   color:red
}

/* And this one wins since this one has in total 3 selectors */
.class1.class2.class3 {
   color:cyan
}

And if we now add this 3th case, this would win since its got more selector segments in total, even if its always the same Class

.class1.class1.class1.class1 {
   color: blue
}

The Html if you want to test it out:

<div class="parentclass">
  <p class="class1 class2 class3">
    Text
  </p>
</div>

Okay, but what if we have now a case where we got 2 Classes with the same weight?

.class1 {
color: red
}
.class2 {
color: blue
}

In this case, the Text-color would be blue aka .class2 wins. The second rule is that if 2 selectors have the same amount of selectors, the latest one would win.

So TLTR would be:

It sorts by the number of Selectors
It sorts by the latest Selector.

But what about CSS states like hover?

things like :hover or :selected are basically applying to rule 1, and those CSS rules are disabled until the condition, for example hovering over the element is met.

For example

/* This has the selector disabled until 
i hover over it, then it has the selector length of 2*/
.class1:hover {
color: red
}

.class1 {
color: blue
}

But if I apply now the trick on adding the same class over and over to increase the weight the hover state would lose since it has only a selector length of 2.

/* Loses due to rule 2, its written further down in the CSS file*/
.class1.class1 {
color: cyan
}

/* Loses due to rule 1, since the weight here is 3 instead of 2.*/
.class1.class1.class1 {
color: cyan
}

And here is some extraInfo:
The order of the classes on the element or in the css doesnt matter, that means that:
class="class1 class2" is equal to class="class2 class1"
And that:
.class1.class2 is equal to .class2.class1

The one which gets applied in the case above is simply the one that is further down so that means rule 2.

So the question is now: Why? (opinion)

I don't know the exact reasons but if I had to take a guess id say it's a genius system. This is extremely performant since they likely work under the hood with dictionaries or something like that, and by simply counting the number of selectors they basically can obey all the rules without any issues.

And to get the idea to develop it like this is just amazing!

I hope you guys learned something and enjoyed my first blog post. I plan to make more posts while I discover more.

So I wish you a pleasant day!