jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
This tests the performance of native window.matchMedia against matchMedia.js and Media.match.
Test whether a CSS media type or media query applies. See http://github.com/paulirish/matchMedia.js
Testing css media queries in Javascript. Not a polyfill and perhaps faster than native window.matchMedia. See http://github.com/weblinc/media-match
/* Media - Testing css media queries in Javascript. Authors & copyright (c) 2012: WebLinc, David Knight, Zac Owen. */
(function(d){var p=d.document,c=p.getElementsByTagName("head")[0],f=d.getComputedStyle&&d.getComputedStyle(c,null)||c.currentStyle,c=screen.width,q=screen.height,r=screen.colorDepth,s=p.documentElement,u=/\(\s*(not)?\s*(min|max)?-?([^:\s]+)\s*:\s*([^\s]+)\s*\)/,v=/(not)?\s*(\w*)/,j=0,t=0;d.Media={supported:!1,type:"all",queries:[],features:{width:0,height:0,"aspect-ratio":0,color:r,"color-index":Math.pow(2,r),"device-aspect-ratio":(c/q).toFixed(2),"device-width":c,"device-height":q,orientation:"landscape",
resolution:96},getAbsValue:function(a){var b;return(b=a.match(/([\d\.]+)(px|em|rem|%|in|cm|mm|ex|pt|pc)/))?"em"==b[2]?16*b[1]:"pt"==b[2]?this.features.resolution/72*b[1]:1*b[1]:(b=a.match(/(\d+)[\/:](\d+)/))?(b[1]/b[2]).toFixed(2):(b=a.match(/([\d]+)(dpi|dppx|dpcm)/))?"dpcm"==b[2]?0.3937*b[1]:"dppx"==b[2]?96*b[1]:1*b[1]:a},parseMatch:function(a,b){var n="string"===typeof a?a.split(", "):a,e=n.pop(),d=-1!==e.indexOf("not "),g="all",c=e.split(" and "),m=c.length-1,f=!d;do{var h=null,k=!0,l=null,l=!0;
if(-1===c[m].indexOf("(")||(h=c[m].match(u))){if(h)var k=this.features[h[3]],j=this.getAbsValue(h[4]),k="min"===h[2]?k>=j:"max"===h[2]?k<=j:"undefined"!==h[4]?k===j:k;else l=c[m].match(v)||["","all"],g=l[2],l=g===this.type||"all"===g,b&&d&&"all"!==g&&(g="screen, print, speech, projection, handheld, tv, braille, embossed, tty".split(g).join(", ").replace(/(,\s){2}/,""));if(h&&!k||!h&&!l)return n.length?this.parseMatch(n,b):d}}while(m--);return b&&f&&{matches:f,type:g,media:e}||f},match:function(a){var b=
j;a={matches:Media.parseMatch(a,!1),media:a,addListener:function(a){Media.queries[b].listeners||(Media.queries[b].listeners=[]);a&&Media.queries[b].listeners.push(a)},removeListener:function(a){var d=Media.queries[b];if(d)for(var c=0,g=d.listeners.length;c<g;c++)d.listeners[c]===a&&d.listeners.splice(c,1)}};j++;Media.queries.push({mql:a,listeners:null});return a},watch:function(a){clearTimeout(t);t=setTimeout(function(){var b=j;Media.setMutableFeatures();do{var c=Media.queries[b],e=!1;if("undefined"!==
typeof c&&((e=Media.parseMatch(c.mql.media))&&!c.mql.matches||!e&&c.mql.matches))if(c.mql.matches=e,c.listeners)for(var e=0,f=c.listeners.length;e<f;e++)c.listeners[e]&&c.listeners[e].call(d,c.mql,a)}while(b--)},10)},setMutableFeatures:function(){var a=d.innerWidth||s.clientWidth,b=d.innerHeight||s.clientHeight;this.features.width=a;this.features.height=b;this.features["aspect-ratio"]=(a/b).toFixed(2);this.features.orientation=b>=a?"portrait":"landscape"},listen:function(a){d.addEventListener?(d.addEventListener("resize",
a),d.addEventListener("orientationchange",a)):d.attachEvent&&(d.attachEvent("onresize",a),d.attachEvent("onorientationchange",a))},init:function(){var a=d.devicePixelRatio;this.supported=1===parseFloat(f.height);this.type="screen print speech projection handheld tv braille embossed tty".split(" ")[parseFloat(f.zIndex)-1]||"all";this.features.resolution=a&&96*a||screen.deviceXDPI||parseFloat(f.width);this.setMutableFeatures();this.listen(this.watch)}};Media.init()})(window);
window.matchMediaPolyfill = (function( doc, undefined ) {
"use strict";
var bool,
docElem = doc.documentElement,
refNode = docElem.firstElementChild || docElem.firstChild,
// fakeBody required for <FF4 when executed in <head>
fakeBody = doc.createElement( "body" ),
div = doc.createElement( "div" );
div.id = "mq-test-1";
div.style.cssText = "position:absolute;top:-100em";
fakeBody.style.background = "none";
fakeBody.appendChild(div);
return function(q){
div.innerHTML = "­<style media=\"" + q + "\"> #mq-test-1 { width: 42px; }</style>";
docElem.insertBefore( fakeBody, refNode );
bool = div.offsetWidth === 42;
docElem.removeChild( fakeBody );
return {
matches: bool,
media: q
};
};
}( document ));
var mql = window.matchMedia('screen and (min-width: 600px), screen and (min-height: 400px)');
Media.queries = [];
if (window.removeEventListener) {
window.removeEventListener('resize', Media.watch);
window.removeEventListener('orientationchange', Media.watch);
} else if (window.detachEvent) {
window.detachEvent('onresize', Media.watch);
window.detachEvent('onorientationchange', Media.watch);
}
Ready to run.
Test | Ops/sec | |
---|---|---|
native matchMedia |
| ready |
Media.match |
| ready |
polyfill paulirish/scottjehl/matchMedia.js |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.