classList.Add 的 js 优化

Question

I'm trying to squeeze as much performance out of my js as possible. I need to make sure an element has a class assigned. Is it faster to check and only assign if it's not there, or always assign even if it's already there?

In other words, which is faster

if (!element.classList.contains('class')) element.classList.add('class');

or always do this

element.classList.add('class');

The class is already there about 10% of the time.

Answer 1

The element.classList.add checks if class is already there anyway. Try to add same class twice, it will not be added. I am positive that the Browser is by far quicker than js to check if should add. So, go ahead and add without checking.

Answer 2

Someone suggested using jsperf.com. Here is the sample https://jsperf.com/classlist-add-vs-classlist-contains/1

Looks like checking first is about 5% faster than just adding