getElementById vs. querySelector vs customSelector (v169)

Revision 169 of this benchmark created on

Description

Compare the speed of getElementById, querySelector and custom selector function.

Preparation HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<p id="foo">Foo</p>
<p id="j_id0:SiteTemplate:j_id10:j_id174:viewEditIncident:readMode:ViewEditIncidentViewButtonsTop:ViewEditIncidentViewEditButtonTop">Bar</p>
<p id="baz">Baz</p>

Setup

var customSelector = function customSelector(selector) {
    return document.getElementById(selector) || document.querySelector(selector);
    }

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
var foo = document.getElementById("j_id0:SiteTemplate:j_id10:j_id174:viewEditIncident:readMode:ViewEditIncidentViewButtonsTop:ViewEditIncidentViewEditButtonTop");
ready
querySelector
var bar = document.querySelector('#j_id0\\:SiteTemplate\\:j_id10\\:j_id174\\:viewEditIncident\\:readMode\\:ViewEditIncidentViewButtonsTop\\:ViewEditIncidentViewEditButtonTop');
ready
select(ID)
var baz = customSelector('j_id0:SiteTemplate:j_id10:j_id174:viewEditIncident:readMode:ViewEditIncidentViewButtonsTop:ViewEditIncidentViewEditButtonTop');
ready
select(custom)
var bang = customSelector('#j_id0\\:SiteTemplate\\:j_id10\\:j_id174\\:viewEditIncident\\:readMode\\:ViewEditIncidentViewButtonsTop\\:ViewEditIncidentViewEditButtonTop'); // forces querySelector return
ready

Revisions

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