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

CSS Stylesheet - multiple selectors vs single selector

Benchmark created by ThinkingStiff on October 26, 2011

Preparation HTML

<style>
#class1, #class2, #class3, #class4, #class5, #class6, #class7, #class8, #class9, #class10, #class11, #class12, #class13, #class14, #class15
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}
#class16
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}
#class17
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}
#class18
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}
#class19
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}
#class20
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}
#class21
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}
#class22
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}
#class23
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}
#class24
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}
#class25
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}
#class26
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}
#class27
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}
#class28
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}
#class29
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}
#class30
{
width: 1px; height: 1px; margin: 1px; padding: 1px; background-color: black; color: green;
}

</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Test runner

Ready to run.

Test Ops/sec

Multiple selectors

Testing in
Test	Ops/sec
Multiple selectors	`for( var index = 1; index < 16; index++ ) { $( 'body' ).append( '<div class="class' + index + '"></div>' ); };`	ready
Single selector	`for( var index = 16; index < 31; index++ ) { $( 'body' ).append( '<div class="class' + index + '"></div>' ); };`	ready

for( var index = 1; index < 16; index++ )
{

    $( 'body' ).append( '<div class="class' + index + '"></div>' );

};

ready

Single selector

for( var index = 16; index < 31; index++ )
{

    $( 'body' ).append( '<div class="class' + index + '"></div>' );

};

ready

Revisions

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

Revision 1: published by ThinkingStiff on October 26, 2011