Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
Vanilla JS VS Jquery | Click Event Speed
Comparing performance of: Vanilla vs Jquery
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=509037" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Browser:
Chrome 121
Operating system:
Mac OS X 10.15.7
Device Platform:
Desktop
Date tested:
2 years ago
Test name
Executions per second
Vanilla
3232015.5 Ops/sec
jQuery
1283494.9 Ops/sec
HTML Preparation code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="rte faq-list-content pb-24"> <ul> <li> <h2 class="p1">frequently asked question maybe a little longer than one row ?</h2> <p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum est ultricies integer quis. Iaculis urna id volutpat lacus laoreet. Mauris vitae ultricies leo integer malesuada.<br><br>Testing </p> </li> <li> <h2 class="p1">frequently asked question maybe a little longer than one row ?</h2> <p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum est ultricies integer quis. Iaculis urna id volutpat lacus laoreet. Mauris vitae ultricies leo integer malesuada.</p> </li> <li> <h2 class="p1">frequently asked question maybe a little longer than one row ?</h2> <p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum est ultricies integer quis. Iaculis urna id volutpat lacus laoreet. Mauris vitae ultricies leo integer malesuada.</p> </li> </ul> </div>
Tests:
Vanilla
window.onload =()=>{ document.querySelectorAll('.faq-list-content li h2').forEach((button) => { button.addEventListener('click', (e) => { e.preventDefault(); console.log(e.currentTarget.parentElement.classList.toggle("active")); }); }); }
jQuery
$(document).on('click', '.faq-list-content li h2', function (event) { event.preventDefault(); this.parentElement.classList.toggle("active"); });