I recently came across a CSS pseudo class that can do an effect for highlighting a form field, rather than using some custom javascript to do the same thing. Another example is highlighting a table row using CSS rather than javascript.
So my question is: how much faster is it to use CSS than javascript for things like this? Obviously we are talking in general terms, but there probably is a good rule of thumb for it.
I’m thinking this is a new avenue for me to get small performance gains on a page versus other methods I’ve used in the past.
Any stylistic effect that can be reasonably accomplished in CSS should absolutely be done in CSS rather than javascript. It will almost certainly perform better. The real benefit, though, is that using CSS to style things makes sense. That’s what CSS is for.
Using javascript to style things that could be styled with CSS doesn’t strike me as being any better than using tables for layout, or deprecated tags like
<font>or<center>to get the appearance you desire… it’s an unwelcome hack.As for performance, unfortunately this kind of thing is hard to test. Normally you’d do performance testing by doing something over and over as fast as possible in a loop for, say, 5 seconds, and then doing something else as fast as possible for 5 seconds, and then seeing which thing was able to execute the most times in the allotted time. Since there’s no way to automate hovering/unhovering an element without adding a bunch of overhead that would skew test results, it’s difficult to test.