Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:66.0) Gecko/20100101 Firefox/66.0
Firefox 66
Mac OS X 10.14
Desktop
6 months 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 Preparation code:
Tests:
  • 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()