CSS Performance Test (v8)

Revision 8 of this benchmark created by asas on

Preparation HTML

<style type="text/css">
li.plain {
    color: white;
    background: gray;
    padding: 10px;
    margin: 3px;
    /*border-radius: 10px;
    -webkit-box-shadow: 0 0 10px orange;
    text-shadow: 0 0 10px black;*/
}

li.fancy {
    color: white;
    background: gray;
    padding: 10px;
    margin: 3px;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 10px orange;
    text-shadow: 0 0 10px black;
}

li.notextshadow {
    color: white;
    background: gray;
    padding: 10px;
    margin: 3px;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 10px orange;
    /*text-shadow: 0 0 10px black;*/
}

li.noboxshadow {
    color: white;
    background: gray;
    padding: 10px;
    margin: 3px;
    border-radius: 10px;
    /*-webkit-box-shadow: 0 0 10px orange;*/
    text-shadow: 0 0 10px black;
}

li.nocorners {
    color: white;
    background: gray;
    padding: 10px;
    margin: 3px;
    /*border-radius: 10px;*/
    -webkit-box-shadow: 0 0 10px orange;
    text-shadow: 0 0 10px black;
}

</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ul id="results"></ul>
<ul id="foo"></ul>
<script>
  var makeHtml = function(className) {
   className = className || '';
   var items = [];
   for (var i = 1; i < 100; i++) {
    items.push('<li class="' + className + '">index: ' + i + '</li>');
   }
   return items.join('');
  };
  
  var plainItems = makeHtml('plain');
  var fancyItems = makeHtml('fancy');
  var noTSItems = makeHtml('notextshadow');
  var noBSItems = makeHtml('noboxshadow');
  var noCornerItems = makeHtml('nocorners');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
unstyled
document.getElementById('foo').innerHTML = plainItems;
ready
full style
document.getElementById('foo').innerHTML = fancyItems;
ready
no text shadow
document.getElementById('foo').innerHTML = noTSItems;
ready
no box shadow
document.getElementById('foo').innerHTML = noBSItems;
ready
no corners
document.getElementById('foo').innerHTML = noCornerItems;
ready

Revisions

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