Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by ilithya
ilithya
19,818 Points

What are your thoughts into either of these 3 HTML attributes used in jQuery: id, class, data-*.

Specifically I would like to know if the use of any of these attributes makes a script faster in all or some scenarios.

I'm used to employ mostly ids and data-* when I write jQuery code. Lately, even more data-* than ids. But I'm wondering if that's the best I could do to write faster code.

2 Answers

Joe Cochran
Joe Cochran
18,249 Points

I've never tested this myself, but here is what I've heard.

ID is by far the fastest. This is because there will only be one on the page, so once a single id is found, jquery can stop looking at the DOM.

classes seem to be faster than attr selectors, and I am guessing data attributes would fall into that category. A very nice person on StackOverflow seems to have done some testing on this and found that classes are significantly faster: jQuery select by class VS select by attribute

ilithya
ilithya
19,818 Points
ilithya
ilithya
19,818 Points

Hi Joe Cochran,

Thanks for the fast response! :)

I've also heard before that "ids" are the fastest attributes. But I wasn't completely sure in between "classes" and "data-*".

And lately, I found myself using so much "data-*" that I started to doubt my code performance. I've googled this question before and tried searching in StackOverflow, but I was unlucky and never found anything. So I appreciate you took the time to answer my question and share that useful link.

Happy coding!