DEV Community

Cover image for Why is dynamically adding properties slow in JavaScript?
Nick
Nick

Posted on

Why is dynamically adding properties slow in JavaScript?

JS gives an ability to add properties to the object after it was created.
It gives a lot of freedom but has a performance cost at the same time.

πŸ‘‰ JavaScript’s object model

The ECMAScript specification defines all objects as dictionaries, with string keys mapping to property attributes

Property access is the most common operation in real-world programs => "Value" needs to be accessed fast, so shapes come into play.

JavaScript’s object model

πŸ‘‰ Shapes

Multiple objects have the same shape if their properties are the same.
If it's the case, the JS engine stores their Shape separately, and then JSObjects point to it.

Shapes store the "Offset" of the value inside JSObject, instead of the "Value" itself.

Shapes

πŸ‘‰ Transition chains

When you dynamically add properties to the object, its Shape form a so-called transition chain.
Next time you access a property of the object, the JS engine needs to traverse its transition chain.

At scale, performance suffers in this case.

Transition chains

πŸ‘‰ How to optimize it like a top-performer?

vNode properties are accessed on every render in Preact, so this operation needs to be extremely fast.

To achieve it, Preact developers add all properties in advance and assign undefined/null to yet unknown.

const vnode = {
  type,
  props,
  key,
  ref,
  _children: null,
  _parent: null,
  _depth: 0,
  _dom: null,
  _nextDom: undefined,
  _component: null,
  _hydrating: null,
  constructor: undefined,
  _original: original == null ? ++vnodeId : original
};
Enter fullscreen mode Exit fullscreen mode

P.S. Follow me on Twitter for more content like this!

Top comments (24)

Collapse
 
josiahbryan profile image
Josiah Bryan

You might want to fix your English in the title... Not exactly proper grammar, But no judgment, especially if English is not your first language!

Collapse
 
fromaline profile image
Nick

Thanks for such important feedback πŸ™πŸ»
Yep, English is my second language!
Can you tell what exactly should I fix in the title?

Collapse
 
josiahbryan profile image
Josiah Bryan

Absolutely! It's really simple, just change "does" to "is" and remove the 2nd "is".. I know verbs in English are weird, impressed that you've learned this much anyway! Here's the full title if you want to just copy and paste: "Why is dynamically adding properties slow in JavaScript?"

Thread Thread
 
fromaline profile image
Nick

Thanks a lot!
I truly appreciate your help πŸ™πŸ»

Thread Thread
 
josiahbryan profile image
Josiah Bryan

No worries, I remember when I lived in Israel and was learning Russian, it was so nice when people let me know a better way to say something. It also gave me incredible respect for anybody who learns another language because I know how hard it is myself haha

Thread Thread
 
fromaline profile image
Nick

What a coincidence, my first language is Russian! πŸ˜„

Thread Thread
 
lokidev profile image
LokiDev

I seriously love how two completely random dudes from completely different parts of the world just can get along, while politicians from all areas are just going mad :D.

I don't know you guys, but I love you :D

Thread Thread
 
fromaline profile image
Nick

Yeah, it’s so cool 😊

Collapse
 
gorenburg profile image
Ilya Gorenburg

Pssst. Use free Grammarly for typos πŸ˜‰

Thread Thread
 
fromaline profile image
Nick

Thanks for the advice πŸ™πŸ»
I use it, but it doesn't detect this particular error for some reason.

Collapse
 
omerman profile image
Omer

That's interesting. Thank you for the article!
You got me thinking about Typescript, maybe it could somehow help by introducing a new concept, like "typemap" I mean we have sourcemap that in dev time you can see for every js line the ts line that is associated with it. So maybe a typemap could tell for every line we have object declared, what should be the full shape of it. It could hint the js engine and maybe make it faster? πŸ€”

Collapse
 
fromaline profile image
Nick

You're welcome!

It sounds like an intriguing idea! I'll try to figure out how source maps work. And after it, I'll return with the answer! For now, I'm not sure whether it's possible or not.

Thanks for adding value to the conversation πŸ™πŸ»

Collapse
 
varevarao profile image
Varshneya Rao

Thank you for sharing a great article!
One note: it's useful to link some mdn/other docs regarding some of the specific terms used in the article. For example, transition chains are explained in more detail
Here: mathiasbynens.be/notes/shapes-ics
And here: v8.dev/blog/react-cliff

This article was the reason for me to dig into a lot of this reading material I would have otherwise not found by myself. Thank you again!

Collapse
 
fromaline profile image
Nick

You're welcome! πŸ™πŸ»

Thanks for the great suggestion! I'll do it from now on.

Collapse
 
virajsingh19 profile image
Viraj Singh

Great article, well researched and the preact example is awesome πŸ‘

Collapse
 
fromaline profile image
Nick

Thank you πŸ™πŸ»
I really appreciate your compliment!

Collapse
 
masyukun profile image
Matthew Royal

Is it slower? How much slower? Linearly slower for each property added?

Collapse
 
fromaline profile image
Nick

A fair question. I'll try to provide stats/measurements in one of the future articles.
For now, I don't know the answers, because the topic is quite complex.

Collapse
 
josiahbryan profile image
Josiah Bryan

Also, really good article, I did not know about the performance impact of adding properties like that! Good tip! Thanks for being open to feedback on the English title haha

Collapse
 
fromaline profile image
Nick

Glad you like it!
You’re welcome! I’m still learning English, so I’m happy to get feedback on the grammar! πŸ™πŸ»

Collapse
 
jbaez profile image
jbaez

Interesting article, and very well explained. Thanks for sharing.

Collapse
 
fromaline profile image
Nick

Thank you πŸ™πŸ»
It’s my pleasure!

Collapse
 
benny00100 profile image
Benny Schuetz

Nice one. Never thought of this before. Thanks for sharing!

Collapse
 
fromaline profile image
Nick

Thanks πŸ™πŸ»
I’m happy, you learned something new!