CSS Selector Speed (v23)

Revision 23 of this benchmark created 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><a class="a"><div class="b"><div class="c"><div class="d"><div class="e rows">';
    
      for (var i = 0; i < rows; i++) {
        html += '<div class="row"><div></div><div></div><div class="r0"><div class="r1"><div class="r2"><div class="r3" id="r3"><div class="r4">' +
            'test</div></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');
      var ss1 = document.createElement('style');
      var def = 'body {color: red;}';
      ss1.setAttribute("type", "text/css");
      var hh1 = document.getElementsByTagName('head')[0];
      hh1.appendChild(ss1);
      if (ss1.styleSheet) {   // IE
          ss1.styleSheet.cssText = css;
      } else {                // the world
          var tt1 = document.createTextNode(css);
          ss1.appendChild(tt1);
      }
      style.innerHTML = '';
      style.appendChild(ss1);
      canvas.innerHTML = makeHtml(rows);
      // Convince browser to recalc style
      canvas.className = 'foo' + Math.random();
      var height = canvas.offsetHeight + document.body.offsetHeight;
    }
    
    run(0, '#canvas * { font-size: 2px; height: 20px; }');

Test runner

Ready to run.

Testing in
TestOps/sec
a couple descendent selectors
run(500, '#r3 .r4 { font-size: 1px; }')
ready
a lot of child selectors
run(500, '.a>.b>.c>.r0>.r1>.r2>.r3>.r4 { font-size: 1px; }');
ready

Revisions

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