CSS Performance Test (v11)

Revision 11 of this benchmark created by 404Nan on

Preparation HTML

<style type="text/css">

.background_color{ 
        height:16px; 
        width:1000px;
        background:#FFCD60;
}
.background_pic_repeat {  
        height:16px; 
        width:1800px;
        background: url(http://www.mftp.info/20140501/1400212892x-1231565403.png) repeat-x 0 0;
}
.background_pic{        
        height:16px; 
        width:1800px;
        background: url(http://www.mftp.info/20140501/1400212813x-1231565403.png) no-repeat 0 0;
}
</style>
<ul id="foo1"></ul>
<ul id="foo2"></ul>
<ul id="foo3"></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 background_color = makeHtml('background_color');
  var background_pic_repeat = makeHtml('background_pic_repeat');
  var background_pic = makeHtml('background_pic');

  
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
background_color
document.getElementById('foo1').innerHTML = background_color;
ready
background_pic_repeat
document.getElementById('foo1').innerHTML = background_pic_repeat;
ready
background_pic
document.getElementById('foo1').innerHTML = background_pic;
ready

Revisions

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