Hacker News new | ask | show | jobs
by masklinn 4301 days ago
Not a chance, browsers can optimise lookup for ids and classes (or even elements by name) because they have spec-defined semantics, and they can be preprocessed based on those semantics (e.g. used to key maps). Custom attributes have arbitrary semantics, so they can't be fit into such a static structure.

Technically nothing prevents browsers from inferring specific behaviors from the way a custom attribute is used, and dynamically generate shortcuts (e.g. key objects by attribute name, value or computed value), but I doubt any existing browser does so, so you get a "universal selector" behavior: every element of the DOM has to be scanned and processed to apply the rule.

And it's not exactly an easy problem, it's essentially equivalent to auto-generating (and tearing down, since elements, attributes and CSS rules can be added and removed on the fly) database indexes except you've got way less usage to rely on (for cost/benefit estimations), and way less usage time to recoup your investment.

2 comments

I imagine if it is optimized, using data attributes will be the most likely route. There's probably already benefits (and thus it may already be done) to cache which elements have specific data attributes set. Combining that with a lazy indexing of values of matching attribute selector rules on elements with matching data elements on first match may yield non-horrible performance.
Using data attributes is even less likely to ever be optimised as data attributes exist specifically to store browser-opaque programmatic content.
I imagine data attributes are already optimized in some respects (probably not as selectors though), since their intended usage is slightly different than other attributes. I only contend that if any type of attributes are likely to receive special treatment in the future (besides those already designated as so, such as id and class), data attributes may be a likely candidate. Then again, due to the lack of constraint on the value of the data tags, that would make future optimizations much harder (which may have been your point).

Maybe just using class-* as a namespace would be best, both from a point of clearly identifying intent and not conflicting with any current valid html attributes (AFAIK).

Right. Then the question is: does it matter enough in performance that the user might notice it? If it's just a few ms i would be willing to trade that for better maintainability of the CSS. Or maybe you could use some kind of preprocessor that would translate the attributes to regular ids/classnames.