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: 5 years ago

Test name	Executions per second
Vanilla JS - getElementsByClassName()	4846365.5 Ops/sec
Vanilla JS - getElementById()	4870160.0 Ops/sec
jQuery class selector - $(".lesson-summary-wrapper");	403123.2 Ops/sec
jQuery find in context - $main.find(".lesson-summary-wrapper");	417799.9 Ops/sec
jQuery class selector with context - $(".lesson-summary-wrapper", "main");	183823.5 Ops/sec
Vanilla JS - querySelector() decendant selector	1631196.2 Ops/sec
Vanilla JS - by ID (as context) and classname	2242405.8 Ops/sec
Vanilla JS - querySelectorAll() decendant selector	711276.1 Ops/sec
jQuery - Decendant selector	229936.2 Ops/sec
jQuery - class selector with context as stored jQuery.Element	340423.9 Ops/sec
jQuery - class selector with context as jQuery element selector	175167.7 Ops/sec
jQuery - Decendant selector using id and classes	217064.4 Ops/sec
jQuery - Decendant selector using classes	228555.1 Ops/sec
jQuery - Decendant selector using id and class	219830.6 Ops/sec
Vanilla JS - using querySelector(id) + querySelectorAll(class)	937385.6 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()