Shorter Media Query Regexp

JavaScript performance comparison

Test case created by Scott Jehl

Info

This is a test to compare the performance of two comment-free CSS Media Query extracting RegExps for Respond.js. Internet Explorer results are of particular interest, as this script is a polyfill for a feature that most other browsers support natively. However, general browser performance is useful to know anyway.

Notes: The CSS included for parsing below is meant to represent a large-scale website's stylesheet, including many media queries. Note that the style rules themselves are unimportant, as this test is purely to test how quickly each parser can split the text into Media Query blocks.

In particular, several of the queries contain a lot of styles, as I wanted to ensure that the implementation used in Respond.js will perform well in sites that include a lot of styles within the queries.

Preparation code

<p>Styles are hidden to keep this page's scroll height manageable. :)</p>
<div id="styles" style="display: none;">

/*
Here's a pile of nonsensical CSS text including a variety of media
queries. The styles are in a div rather than a style element so that IE
doesn't pre-parse the CSS and ruin the media queries (Respond.js uses
Ajax to retrieve CSS text from cache to avoid this problem in live
code). Using the following div's innerHTML ensures the CSS text is
identical to the sort of text Respond.js normally parses.
*/

body {
        background: black;
        color: #333;
        font-family: Helvetica, sans-serif;
}
p {
        width: 60%;
        min-width: 300px;
        max-width: 700px;
        margin: 2em auto;
        background: #fff;
        padding: 20px;
}
a {
        color: #333;
}

/* hide the attribute-test element. test2.css will show it */
#attribute-test {
        display: none;
}

/*styles for 480px and up!*/
@media only screen and (min-width: 480px), only screen and (max-width: 620px) {
        body {
                background: green;
        }
        body {
                background: green;
        }
        body {
                background: green;
        }
        body {
                background: green;
        }
        body {
                background: green;
        }
        body {
                background: green;
        }
        body {
                background: green;
        }
        body {
                background: green;
        }
        body {
                background: green;
        }
        body {
                background: green;
        }
        body {
                background: green;
        }
        body {
                background: green;
        }
        body {
                background: green;
        }
        body {
                background: green;
        }
        body {
                background: green;
        }
        body {
                background: green;
        }
}



/*styles for 620px and up! (let's try this one minified )*/
@media screen and (min-width: 620px),only print,projector{body{background:red;}body{background:red;}body{background:red;}body{background:red;}body{background:red;}body{background:red;}body{background:red;}body{background:red;}body{background:red;}body{background:red;}body{background:red;}body{background:red;}body{background:red;}body{background:red;}body{background:red;}body{background:red;}}

/*styles for 800px and up!*/
@media screen and (min-width: 800px){
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
        body {
                background: blue;
        }
@font-face {
        font-family: "TEST";
        src: url("test.eot") format("eot");
        src: url("test.eot?iefix") format("eot"),
                url("test.woff") format("woff"),
                url("test.ttf") format("truetype"),
                url("test.svg") format("svg");
}
}

/*styles for 1100px and up!*/
@media screen and (min-width: 1100px){
        body {
                background: orange;
        }
        body {
                background: orange;
        }
        body {
                background: orange;
        }
        body {
                background: orange;
        }
        body {
                background: orange;
        }
        body {
                background: orange;
        }
        body {
                background: orange;
        }
        body {
                background: orange;
        }
        body {
                background: orange;
        }
        body {
                background: orange;
        }
        body {
                background: orange;
        }
        body {
                background: orange;
        }
        body {
                background: orange;
        }
        body {
                background: orange;
        }
        body {
                background: orange;
        }

}

/*styles for 1300px and up!*/
@media screen and (min-width: 1300px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
}


@media screen and (max-width: 1200px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}

}





@media screen and (min-width: 1300px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}

}




@media screen and (max-width: 200px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}

}





@media screen and (min-width: 1300px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}

}












@media screen and (max-width: 1200px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}

}





@media screen and (min-width: 1300px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}

}

@media screen and (min-width: 1350px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}

}


@media screen and (min-width: 1400px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}

}




@media screen and (max-width: 200px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}


}





@media screen and (min-width: 1300px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}

}




@media screen and (max-width: 1200px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
}

}





@media screen and (min-width: 1300px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
        }
}

@media screen and (min-width: 1700px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
        }
}

@media screen and (min-width: 1900px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
        }
}

@media screen and (min-width: 2300px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
        }
}

@media screen and (min-width: 17300px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
        }
}

@media screen and (min-width: 1240px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
        }
}

@media screen and (min-width: 1210px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
        }
}

@media screen and (min-width: 1040px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
        }
}

@media screen and (min-width: 1140px){
        #foo .bar baz {
                width: 45px;
                height: 45px;
                text-indent: 45px;
                text-decoration: none;
        }
}
</div>
<script>
  //getting inner text of a div to simulate CSS text
  var cssText = document.getElementById("styles").innerHTML;
 
  // RegExp Splitter from the Respond.js "comment-free" branch
 
  function parseMQs1(str) {
   return str.match(/@media [^\{]+\{((?!@media)[\s\S])*\}(?=[^\{]*\})/gi);
  }
 
  function parseMQs2(str) {
   return str.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi);
  }
 
  function parseMQs3(str) {
   return str.match(/@media[\s\S]+?\}(?=[^\{]*\})/gi);
  }
</script>

Preparation code output

Styles are hidden to keep this page's scroll height manageable. :)

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Original RegExp
parseMQs1(cssText);
pending…
Shorter RegExp
parseMQs2(cssText);
pending…
Even Shorter One
parseMQs3(cssText);
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

1 comment

Ben Collier commented :

Quite the improvement! Great work.

Add a comment