Run results for: Looping selectors (1)

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:66.0) Gecko/20100101 Firefox/66.0

Browser: Firefox 66

Operating system: Mac OS X 10.14

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
Vanilla JS - getElementsByClassName()	4950859.0 Ops/sec
Vanilla JS - getElementById()	5047699.0 Ops/sec
jQuery class selector - $(".lesson-summary-wrapper");	422750.2 Ops/sec
jQuery find in context - $main.find(".lesson-summary-wrapper");	437031.0 Ops/sec
jQuery class selector with context - $(".lesson-summary-wrapper", "main");	203268.0 Ops/sec
Vanilla JS - querySelector() decendant selector	1622268.0 Ops/sec
Vanilla JS - by ID (as context) and classname	2274827.0 Ops/sec
Vanilla JS - querySelectorAll() decendant selector	740814.3 Ops/sec
jQuery - Decendant selector	254198.8 Ops/sec
jQuery - class selector with context as stored jQuery.Element	366554.7 Ops/sec
jQuery - class selector with context as jQuery element selector	188713.8 Ops/sec
jQuery - Decendant selector using id and classes	228234.9 Ops/sec
jQuery - Decendant selector using classes	245166.1 Ops/sec
jQuery - Decendant selector using id and class	228659.3 Ops/sec
Vanilla JS - using querySelector(id) + querySelectorAll(class)	926933.3 Ops/sec
Vanilla JS - using querySelectorAll()	705610.2 Ops/sec

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<main class="main" id="main">
<div class="lesson-summary-wrapper" id="lessonSummaryWrapper"></div>
</main>

Script Preparation code:

var $main = $("main");

Tests:

Vanilla JS - getElementsByClassName()
document.getElementsByClassName("lesson-summary-wrapper");
Vanilla JS - getElementById()
document.getElementById("lessonSummaryWrapper");
jQuery class selector - $(".lesson-summary-wrapper");
$(".lesson-summary-wrapper");
jQuery find in context - $main.find(".lesson-summary-wrapper");
$main.find(".lesson-summary-wrapper");
jQuery class selector with context - $(".lesson-summary-wrapper", "main");
$(".lesson-summary-wrapper", "main");
Vanilla JS - querySelector() decendant selector
document.querySelector("#main .lesson-summary-wrapper");
Vanilla JS - by ID (as context) and classname
document.getElementById("main").getElementsByClassName("lesson-summary-wrapper");
Vanilla JS - querySelectorAll() decendant selector
document.querySelectorAll("#main .lesson-summary-wrapper");
jQuery - Decendant selector
$("main .lesson-summary-wrapper");
jQuery - class selector with context as stored jQuery.Element
$(".lesson-summary-wrapper", $main);
jQuery - class selector with context as jQuery element selector
$(".lesson-summary-wrapper", $("main"));
jQuery - Decendant selector using id and classes
$("#main.main .lesson-summary-wrapper");
jQuery - Decendant selector using classes
$(".main .lesson-summary-wrapper");
jQuery - Decendant selector using id and class
$("#main .lesson-summary-wrapper");
Vanilla JS - using querySelector(id) + querySelectorAll(class)
document.querySelector("#main").querySelectorAll(".lesson-summary-wrapper");
Vanilla JS - using querySelectorAll()
document.querySelectorAll("#main .lesson-summary-wrapper");

Run results for: Looping selectors (1)

Vanilla JS - getElementsByClassName()

Vanilla JS - getElementById()

jQuery class selector - $(".lesson-summary-wrapper");

jQuery find in context - $main.find(".lesson-summary-wrapper");

jQuery class selector with context - $(".lesson-summary-wrapper", "main");

Vanilla JS - querySelector() decendant selector

Vanilla JS - by ID (as context) and classname

Vanilla JS - querySelectorAll() decendant selector

jQuery - Decendant selector

jQuery - class selector with context as stored jQuery.Element

jQuery - class selector with context as jQuery element selector

jQuery - Decendant selector using id and classes

jQuery - Decendant selector using classes

jQuery - Decendant selector using id and class

Vanilla JS - using querySelector(id) + querySelectorAll(class)

Vanilla JS - using querySelectorAll()