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.
👉 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.
👉 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.
👉 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
};
P.S. Follow me on Twitter for more content like this!
Top comments (24)
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!
Thanks for such important feedback 🙏🏻
Yep, English is my second language!
Can you tell what exactly should I fix in the title?
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?"
Thanks a lot!
I truly appreciate your help 🙏🏻
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
What a coincidence, my first language is Russian! 😄
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
Yeah, it’s so cool 😊
Pssst. Use free Grammarly for typos 😉
Thanks for the advice 🙏🏻
I use it, but it doesn't detect this particular error for some reason.
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? 🤔
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 🙏🏻
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!
You're welcome! 🙏🏻
Thanks for the great suggestion! I'll do it from now on.
Great article, well researched and the preact example is awesome 👍
Thank you 🙏🏻
I really appreciate your compliment!
Is it slower? How much slower? Linearly slower for each property added?
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.
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
Glad you like it!
You’re welcome! I’m still learning English, so I’m happy to get feedback on the grammar! 🙏🏻
Interesting article, and very well explained. Thanks for sharing.
Thank you 🙏🏻
It’s my pleasure!
Nice one. Never thought of this before. Thanks for sharing!
Thanks 🙏🏻
I’m happy, you learned something new!