Let's say we have a style declaration like this:
body > div > input:hover ~ label {
color: red;
}
The way I understand it, the parser would find all labels, filter which ones follow a hovered input which is a direct descendant of a div which is a direct descendant of body.
What I'm curious to know is whether this will be done whenever the hover state of the input changes or only once one document load (placed in a lookup table of some kind).
If I want to use massive, complex selectors (for irrelevant reasons), would the rendering of the page be slower between states and effects or would only the page's initial load time be affected?
Referring to the answers of this post, CSS performance difference is not significant. However, if you use JS libraries like jQuery to select element, performance varies a lot if using the same selector.
Also, performance will vary if the CSS is minified or not, combined into 1 file / multiple files.
In theory, in slow Internet connection, CSS file size also affects loading performance, but CSS is often very small in file size, thus this can be safely ignored, unless you concern those users with 56K modem.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With