JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class=wrapper0>
<div class=btn0>
button 0
</div>
</div>
<div class=wrapper1>
<div class=btn1>
button 1
</div>
</div>
<div class=wrapper2>
<div class=btn2>
button 2
</div>
</div>
JavaScript
var p00, p01, p02, p10, p11, p12;
var btn0 = $('.btn0');
var btn1 = $('.btn1');
var btn2 = $('.btn2');
var durations0 = [];
var durations1 = [];
var durations2 = [];
var i = 0;
var j = 0;
var k = 0;
var interval0 = null;
var interval1 = null;
var interval2 = null;
var getAverage = array => array.reduce((a, b) => a + b) / array.length;
$('.wrapper0').on('click', '.btn0', function() {
p10 = performance.now();
durations0.push(p10 - p00);
});
$('.wrapper1').on('click', function(e) {
if ($(e.target).hasClass('btn1')) {
p11 = performance.now();
durations1.push(p11 - p01);
}
});
document.querySelector('.wrapper2').addEventListener('click', function(e) {
if(e.target && e.target.classList.contains('btn2')) {
p12 = performance.now();
durations2.push(p12 - p02);
}
});
interval0 = setInterval(()=> {
p00 = performance.now();
btn0.click();
i++;
if(i === 500) {
clearInterval(interval0);
cb();
}
}, 5);
interval1 = setInterval(()=> {
p01 = performance.now();
btn1.click();
j++;
if(j === 500) {
clearInterval(interval1);
cb();
}
}, 5);
interval2 = setInterval(()=> {
p02 = performance.now();
btn2.click();
k++;
if(k === 500) {
clearInterval(interval2);
cb();
}
}, 5);
function cb() {
if (i !== 500 || j !== 500 || k !== 500) return;
console.log(durations0, durations1, durations2)
alert(`
average durations:
p0: ${getAverage(durations0)} ms
p1: ${getAverage(durations1)} ms
p2: ${getAverage(durations2)} ms
average durations without each first call:
p0: ${getAverage(durations0.splice(1))} ms
p1: ${getAverage(durations1.splice(1))} ms
p2: ${getAverage(durations2.splice(1))} ms
`);
}