DEV Community

Discussion on: Javascript DOM Manipulation to improve performance

Collapse
anduser96 profile image
Andrei Gatej

For styles, you could also use
Object.assign(elem.style,
{
prop1: “value1”,
/* ... */
})

Thank you for sharing! I’ve certainly learnt a few useful things.

Collapse
grandemayta profile image
Gabriel Mayta Author

Thanks you, I will update the article.

Collapse
uppercod profile image
Matias Trujillo

It is convenient to generate the least amount of mutation in the Dom, if you use an object the mutation will be as many properties as the object has, when using a text the mutation will only be one

Collapse
anduser96 profile image
Andrei Gatej

It doesn't make much sense to me. In the end, the same changes are applied to the element, no matter if you use an object or text.
Could you please elaborate on your statement ?

Thread Thread
uppercod profile image
Matias Trujillo

Hi!, the use of object generates a mutation of the style for each property associated to it, an object of 10 properties generates 10 mutations to the DOM when modifying style, forcing the browser to interpret the style property 10 times, instead using a string you will generate a single mutation to the element and therefore a single interpretation of the style.
This should not be a problem for you, since this should only inconvenience the user experience when multiple elements are modified concurrently in a record time.

Another benefit of the use of string, is that your style does not have dirty properties.

Thread Thread
anduser96 profile image
Andrei Gatej • Edited on

Wow! Thank you very much! Now it makes sense.
Could you refer me to other resources so I can read more about that? It’s a very interesting topic.

Collapse
fabiobiondi profile image
Fabio Biondi

or by using spread syntax {...elem.style, prop1: "val1" }

Collapse
grandemayta profile image
Gabriel Mayta Author

Spread operator, great, thanks for your comment Fabio.