CSS Selector Speed

Benchmark created by Malte Ubl on

Preparation HTML

<style type="text/css">
#canvas {
  position:absolute;
  left: -1000px;
}
</style>
<div id="css"></div>
<div id="canvas"></div>

Setup

function makeHtml(rows) {
      var html = '<div class=".extra"></div><div class="a"><div class="b"><div class="c"><div class="d"><div class="e">';
    
      for (var i = 0; i < rows; i++) {
        html += '<div class="r0"><div class="r1"><div class="r2"><div class="r3"><div class="r4">' +
            'test</div></div></div></div></div>';
      }
    
      html += '</div></div></div></div></div>';
      return html;
    }
    
    document.getElementById('canvas').innerHTML = '';
    document.getElementById('css').innerHTML = '';
    
    function run(rows, css) {
      var canvas = document.getElementById('canvas');
      var style = document.getElementById('css');
      canvas.innerHTML = makeHtml(rows);
      style.innerHTML = '<style type="text/css">' + css + '</style>';
      return canvas.offsetHeight;
    }

Test runner

Ready to run.

Testing in
TestOps/sec
.class 100
run(100, '.r4 { font-size: 1px; }')
ready
.class .class 100
run(100, '.a .r4 { font-size: 1px; }')
ready
.class > .class 100
run(100, '.r3 > .r4 { font-size: 1px; }')
ready
.class * .class 100
run(100, '.r0 * .r4 { font-size: 1px; }')
ready
.class * 100
run(100, '.r0 * { font-size: 1px; }')
ready
.class .class .class … 100
run(100, '.a .b .c .r0 .r1 .r2 .r3 .r4 { font-size: 1px; }')
ready
.a 100
run(100, '.extra { font-size: 1px; }') // matches only one element.
ready
.class:hover 100
run(100, '.r4:hover { font-size: 1px; }') // not sure this works
ready

Revisions

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