id vs class vs tag vs. attribute selectors (v388)

Revision 388 of this benchmark created on

Description

id vs class vs tag vs.

Preparation HTML

<p id="foo" class="foo"></p>

<ul id="foo2">
  <li class="foo2">foo</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
id
var element = document.getElementById('foo');
ready
class
var element = document.getElementsByClassName('foo');
ready
tag
var element = document.getElementsByTagName('p');
ready
$(id)
var element = $('#foo');
ready
$(class)
var element = $('.foo');
ready
$(tag)
var element = $('p');
ready
$(class)
var element = $('.foo2');
ready
$(id).children(class)
var element = $('#foo2').children('.foo2');
ready
$(id).find(class)
var element = $('#foo2').find('.foo2');
ready
$(class, id)
var element = $('.foo2', '#foo2');
ready
$(tag)
var element = $('li');
ready
$(id).children(tag)
var element = $('#foo2').children('li');
ready
$(id).find(tag)
var element = $('#foo2').find('li');
ready
$(tag, id)
var element = $('li', '#foo2');
ready
$(id > tag)
var element = $('#foo2 > li');
ready
$(tag#id > tag#class)
var element = $('ul#foo2 > li.foo2');
ready

Revisions

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