The question if multiple media queries hurt performance pops up very often. Because naturally as a developer you think it can’t be good for performance if you let the browser evaluate them often. Out of curiosity, I researched a bit on that and found interesting insights…
I hadn’t any clue how to track down media query evaluation of a browser (you can’t do that with DevTools), except forking the core and adding timers to it (which is no option as I don’t know any C++). So the logical step for me was to ask engineers on twitter about it:
Do you know if there’s impact on CSS evaluation performance if CSS has 10 or 100 Media-Queries inlined? +@yoavweiss @addyosmani @paul_irish
— Anselm Hannemann (@helloanselm) January 15, 2014@helloanselm If there is a measurable performance impact, I'd consider it a bug :)
— Yoav Weiss (@yoavweiss) January 15, 2014@helloanselm In theory, it sure seems like it. Might be worth trying to measure, tho (If you have the time & will to do so)
— Yoav Weiss (@yoavweiss) January 15, 2014A look into the source
This is a pretty theoretical but still helpful answer because it led me to the next step: Have a look at the source. In times where everything is on GitHub it’s easy to dig into the source of anything that is open-source. WebKit and Gecko are, so their source code is to be found on Github.
Both engines do serialize and strip out duplicated media-queries so they only need to evaluate each media query once. Also they cache the queries so that they can re-use it later on. You can view source of WebKit or Gecko here.
Of course this doesn’t mean there is no difference but looking at the source there shouldn’t be a performance issue. Also, I guess there is no performance lack when evaluating hundreds of different media queries that is recognizable / measurable.
Conclusion
It doesn’t matter if you use one big or multiple media-queries in your code assuming your values are mostly the same. It shouldn’t matter if your values are different for each(!) of your hundreds of media-queries but could affect performance (found no way to track this down). The only thing I could add here is that using many inline media queries often is that they’re increasing the size of your CSS (unless your gzipping it) and that affects performance as it’s loaded blocking.
So all in all, happy media-querying!
Update / Clarification collected from feedback
It does matter how many different media queries you use on the site when you’re resizing the browser window. This can cause a massive CPU and memory load which even can crash your browser but as this is not a valid performance test (no user constantly resizes its browser, we should always focus on non-rezining events only). Also, these experiences sound really as they are a buggy behavior (which somehow is seen in the comments in source code).