CSS Selector Speed (v19)

Revision 19 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><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 id="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 10000
run(10000, '.r2 { font-size: 1px; }')
ready
div.class 10000
run(10000, 'div.r2 { font-size: 1px; }')
ready
#id 10000
run(10000, '#r1 { font-size: 1px; }')
ready
div#id 10000
run(10000, 'div#r1 { font-size: 1px; }')
ready

Revisions

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