Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

scoped CSS performance impact #2608

Open
KosRud opened this issue Dec 14, 2023 · 6 comments
Open

scoped CSS performance impact #2608

KosRud opened this issue Dec 14, 2023 · 6 comments

Comments

@KosRud
Copy link

KosRud commented Dec 14, 2023

- **Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit.

After reading this part of the docs, I got curious about the performance impact of attribute selectors, but could not find any conclusive evidence one way or the other. Lots of dead links, 10+ years old articles and presentations with general advice but no benchmarks, etc. The closest thing I got was this issue, which apparently only affects IE11.

It would be great to have some context on the issue of attribute selector performance and if the mentioned performance penalty still exists today (maybe in the form of "further reading" links).

@KosRud
Copy link
Author

KosRud commented Dec 14, 2023

Edit: found a benchmark

Curiously, it reports a rather small difference on IE9 in light of the issue linked above.

I ran the benchmark above in IE11 and attribute selectors were slightly faster than class selectors in my case.

@KosRud
Copy link
Author

KosRud commented Dec 14, 2023

Found another anecdote of attribute selectors being slow in IE11, though I did not observe this issue when running the benchmark on IE11. Perhaps there was an update to IE11 since then which improved attribute selector performance?

@heygsc
Copy link
Contributor

heygsc commented Dec 15, 2023

I think different codes may involve different situations of browsers, elements, and selectors.
However, in most cases, class and id performance is better in CSS selectors, while attribute selectors may be worse.

@heygsc
Copy link
Contributor

heygsc commented Jan 31, 2024

However, on attribute selector performance, I don't seem to have found any official information, such as MDN ( if the document needs to include some links ) .

@WesCook
Copy link

WesCook commented Apr 3, 2024

I'd be curious to see this scientifically tested, too. Naming things remains a considerable time sink in programming, and any chance we get to avoid doing so is a productivity win.

If it so happens that we can target elements in scoped styling with a near-zero performance hit, that saves us time in thinking about class names, and in actually writing the code. Less code also makes things easier to understand at a glance.

That doesn't mean you can't introduce classes when additional specificity is required. But as a default, I'd be happy I could use element names. Most components are (or should be) small enough that element selectors still offer enough specificity in most cases.

I don't have any projects large enough to perform any benchmarking tests. I'd love to see the mainline browsers tested though to get a better understanding of this issue, if indeed there is still one today.

@marco-quintella
Copy link

Many factors can impact on that, even the DOM tree complexity. But I see that the selector complexity is the most harmful.
These articles below are recent and the one from Edge teaches how to benchmark your selectors. From this Microsoft arcticle I can see that complex selectors are heavier at any case, attributes or classes.

Maybe this could be the case of benchmarking a vue app with it.

https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/
https://www.youtube.com/watch?v=J24xS21FlmY&ab_channel=KevinPowell
https://medium.com/@taimoorshoaib141/mastering-the-art-of-efficient-css-selectors-essential-tips-for-optimal-performance-82758198fb39

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants