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=555219" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
Browser:
Chrome 128
Operating system:
Windows
Device Platform:
Desktop
Date tested:
one year ago
Test name
Executions per second
Vanilla
1162729.5 Ops/sec
jQuery
303457.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"); });