You’ve seen them, you’ve used them, something along the lines of
<a href="http://awesomesite.com" data-stuff="cool-thing">Click Me</a>
Ok so according to the W3C
“Scripts should refer to an element according to its assigned name. Scripting engines should observe the following precedence rules when identifying an element: a name attribute takes precedence over an id if both are set. Otherwise, one or the other may be used.”
I basically tried to think of something really simple that I do a lot on sites, the answer in my head was hide/show pieces of content on the page based on an event like on click. So I set up this page and ran tests in the Chrome Dev Tools Timeline section. I was looking for simple results. I feel like we over-complicate performance testing sometimes. The basic gist is, you click a button, how long does it take to “do what it’s supposed to do”. Well, in this case, you click a button and it fires an event that then “shows” the unordered list of stuff below it. What’s happening at the most basic level is:
- Some DOM parsing to get node values
- Adding a class to an element based on those values
- A repaint of the browser canvas to display the new DOM and styles associated with the change.
So What’s my Bottom Line?
3. I definitely don’t think we should be using class selectors (even if they are faster).
I would love to hear comments about this, some people get really passionate about this stuff and I’d love to hear about other tests, pitfalls, drawbacks, etc. Maybe once you start compounding tons of data-attr selectors something weird happens that I’ve never encountered, I want to hear about those kinds of scenarios.