I'm in the early stage of building a site. I'm looking at some design elements that would take advantage of media queries to work properly at smaller screen sizes.
I've no problem with this except that this will be a small site and therefore pretty much the only javascript running on it will be a Polyfill for media queries for IE and other limp along browsers.
How much will this impact performance? Are there any proper tests that have been ran?
I ask because I'm in the stage now that if the polyfill affects the performance enough I can tweak the design so I don't have to use them, and also as a thought for future projects.
Bonus Question:
If I don't use mobile first but use mobile last, and do max-width queries rather than min, would I even need a polyfill. If nothing about the page is changing until it's less than 500px wide do I really need to worry about IE not displaying them? Or am I missing some edge cases?
Let's start with your bonus question.
If you approach with max-width media queries, i don't think you actually need a js solution for IE8 and below. That said, it really depends on what's your site "breaking point".
Probably, a user who still has IE7 running won't have an hd screen with 1920x1200 resolution. So keep in mind to make everything work well for 800x600 screens without media queries involved.
Personally, i prefer a min-width approach, so i can progressively enhance my site features. But it really depends on your project type/audience.
According to StatCounter's global stats, at Sept 2012 ~14% of users still use IE8, and less than 2% IE7.
If you want to serve the best user experience for this 15% (~6 every 100), then you probably need respond.js.
I've used and tested it on IE7 and IE8. I didn't notice a difference in performance, but i can't find any benchmark test online.
It's recommended by Modernizr and included in html5boilerplate responsive build, so i'm pretty sure you can...trust it ;-)