CSS Stylesheet - multiple selectors vs single selector

JavaScript performance comparison

Test case created by ThinkingStiff

Preparation code

<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>
 

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Multiple selectors
for( var index = 1; index < 16; index++ )
{

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

};
 
pending…
Single selector
for( var index = 16; index < 31; index++ )
{

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

};
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

0 comments

Add a comment