I’d like Scott’s feedback since he’s dealt with these issues while working on Respond and the like.
This is a pretty timely post for me. Javascript performance with media queries is why I began working on a project to support those browsers that don’t perform well with polyfills. I also wanted to support more of the media features that modern browsers do, while keeping the file size down. For examples of what I mean by ‘don’t perform well’, I was doing some testing on jsPerf and jsFiddle using matchMedia.js polyfill.
1. iPhone 4.3.3 gets 2 – 6 Ops/sec
2. IE <= 9 gets 40 – 90 Ops/sec
3. Chrome, Firefox, Safari and Opera fair much better 900 – 2500 Ops/sec
Testing the same media query with native matchMedia in Chrome, Firefox, Safari and Opera get 36,000 – 110,000 Ops/sec.
So now we know what we have and what’s possible. With the project below (Media.match), I was shooting for somewhere in between but hoping for much more. In short I got better than I expected. In Chrome, Media is more than 50% faster than native matchMedia but in Firefox, it’s 50% slower. I’m really excited about the results in IE and iOS as well but need more testing data. I’m not sold just by the numbers alone either, IE <9 feel like they can actually handle media queries. Again, I’m really pleased with the results and would like to share what I’ve been working on.
I’d love to see if we can make these even better, feedback is surely welcome.
matchMedia like support
https://github.com/weblinc/media-match
Testing data
http://jsfiddle.net/wV9HZ/1/
http://jsperf.com/matchmedia/4
Test page using JSLitmus (native matchMedia vs Media.match)
Some incredible numbers. Media.match is faster or rivals native matchMedia. Check out Chrome.
https://github.com/weblinc/media-match/tree/master/test
Respond like project
https://github.com/weblinc/nonresponsive
David Knight
Tim and Scott,
I’d like Scott’s feedback since he’s dealt with these issues while working on Respond and the like.
This is a pretty timely post for me. Javascript performance with media queries is why I began working on a project to support those browsers that don’t perform well with polyfills. I also wanted to support more of the media features that modern browsers do, while keeping the file size down. For examples of what I mean by ‘don’t perform well’, I was doing some testing on jsPerf and jsFiddle using matchMedia.js polyfill.
1. iPhone 4.3.3 gets 2 – 6 Ops/sec
2. IE <= 9 gets 40 – 90 Ops/sec
3. Chrome, Firefox, Safari and Opera fair much better 900 – 2500 Ops/sec
Testing the same media query with native matchMedia in Chrome, Firefox, Safari and Opera get 36,000 – 110,000 Ops/sec.
So now we know what we have and what’s possible. With the project below (Media.match), I was shooting for somewhere in between but hoping for much more. In short I got better than I expected. In Chrome, Media is more than 50% faster than native matchMedia but in Firefox, it’s 50% slower. I’m really excited about the results in IE and iOS as well but need more testing data. I’m not sold just by the numbers alone either, IE <9 feel like they can actually handle media queries. Again, I’m really pleased with the results and would like to share what I’ve been working on.
I’d love to see if we can make these even better, feedback is surely welcome.
matchMedia like support
https://github.com/weblinc/media-match
Testing data
http://jsfiddle.net/wV9HZ/1/
http://jsperf.com/matchmedia/4
Test page using JSLitmus (native matchMedia vs Media.match)
Some incredible numbers. Media.match is faster or rivals native matchMedia. Check out Chrome.
https://github.com/weblinc/media-match/tree/master/test
Respond like project
https://github.com/weblinc/nonresponsive