CSS Style change through javascript performance

Question

I am using pure javascript (no jquery or any other framework) for animations. Which one's more optimized? Creating classes for transition like:

CSS class:

    .all-div-has-this-class { transition: all 1s; }
    .class1 { left: 0; }
    .class2 { left: 30px; }

Javscript:

    testdiv.className += " class1";
    testdiv.className += " class2";

or just this in javascript => Initialize the testdiv position in the css then just dotestdiv.style.left = "30px"; in the js code?

By the way, these are all in setTimeout functions to set the properties according to timing. Also, it has to be only javascript without any jquery or any other framework specifically for animations.

Kevin Simple · Accepted Answer · 2015-10-21 00:03:22Z

1

Dom manupulation is quite heavy as always, particular if you want to do a lot animation using JS, that's why we have CSS anamition which use browser buildin function to render anamation.

Js code given just assgin css class to dom, and the rules are caculate by browser based on the css classes

answered Oct 21, 2015 at 0:03

Kevin Simple

1,21312 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jfriend00 Over a year ago

How does this answer the question?

Kevin Simple Over a year ago

@jfriend00, saw you yesterday on another question, bro! what the question ask is not clear, i am just trying get close

Don Over a year ago

So, by just adding and removing classes of an element is more optimized than changing a particular style of an element? mmhmm.. I guess I have to refactor my codes then. I change the property of the element through dom directly and not through changing css classes...

Kevin Simple Over a year ago

@Don, yep , you got this right, please tick my answer, bro! lol

Carl Walsh · Accepted Answer · 2021-12-29 15:42:52Z

1

There won't be a general answer for all browsers and all hardware, but this answer did a great experiment changing text-align of 10000 elements using javascript to modify.style vs. using CSS.

Summarizing the significant milliseconds you can see CSS is nearly twice as fast:

script	CSS	activity
34	0	Javascript
104	107	Layout
16	16	Update Layer Tree
82	32	Recalculate Style

edited Dec 29, 2021 at 15:42

answered Oct 14, 2021 at 0:37

Carl Walsh

7,2273 gold badges53 silver badges58 bronze badges

Collectives™ on Stack Overflow

CSS Style change through javascript performance

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related