jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
Given a nested DOM structure, trigger a custom event on a child element and find which method is faster to reach the top level listener. Create 2N child nodes for each level we go in depth to mimic a typical DOM hierarchy size.
This assumes you want to pass data in the events, and as such includes data in the event
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var jQueryListener = function(){/*Jquery Event terminates here*/};
var nativeListener = function(){/*Native CustomEvent terminates here*/};
var eventProperties = {
relatedElement1 : document.createElement('div'),
someArrayOfTweets : ['that was funny', 'I love that stuff!', 'what a blast!'],
simpleNumber : 2,
irrationalNumber: Math.PI,
aJoke : "Knock Knock. Who's there? Ja... Ja who? Ja-vaScript",
/*For native event, set bubbles as default is false */
bubbles : true
};
</script>
<div id="eventTimedToReachHere">
<ul>
<li>List 2 Item 1</li>
<li>List 2 Item 2</li>
<li>List 2 Item 3</li>
<li>List 2 Item 4</li>
</ul>
<ul>
<li>List 2 Item 1</li>
<li>List 2 Item 2</li>
<li>List 2 Item 3</li>
<li>List 2 Item 4
<div>I'm 4 levels deep, div 1</div>
<div>I'm 4 levels deep, div 2</div>
<div>I'm 4 levels deep, div 3</div>
<div>I'm 4 levels deep, div 4</div>
<div>I'm 4 levels deep, div 5</div>
<div>I'm 4 levels deep, div 6</div>
<div>I'm 4 levels deep, div 7</div>
<div>I'm 4 levels deep, div 8
<button>A Button 1</button>
<button>A Button 2</button>
<button>A Button 3</button>
<button>A Button 4</button>
<button>A Button 5</button>
<button>A Button 6</button>
<button>A Button 7</button>
<button>A Button 8</button>
<button>A Button 9</button>
<button>A Button 10</button>
<button>A Button 11</button>
<button>A Button 12</button>
<button>A Button 13</button>
<button>A Button 14</button>
<button>A Button 15</button>
<button id="eventStartsHere">A Button 16</button>
</div>
</li>
</ul>
</div>
$('#eventTimedToReachHere').bind('jquery-test', jQueryListener);
document.getElementById('eventTimedToReachHere').addEventListener('native-test', nativeListener);
var eventTarget = document.getElementById('eventStartsHere');
var eventTargetJquery = $(eventTarget);
$('#eventTimedToReachHere').unbind('jquery-test', jQueryListener);
document.getElementById('eventTimedToReachHere').removeEventListener('native-test', nativeListener);
Ready to run.
Test | Ops/sec | |
---|---|---|
DOM Level3 CustomEvent dispatched |
| ready |
jQuery .trigger(evt) |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.