Skip to content

Instantly share code, notes, and snippets.

@oriadam

oriadam/closest-test-for-jsperf.html

Last active December 5, 2017 13:59
Show Gist options
  • Save oriadam/c61720ba26a536f2e60208b447fafa50 to your computer and use it in GitHub Desktop.
Save oriadam/c61720ba26a536f2e60208b447fafa50 to your computer and use it in GitHub Desktop.
Download ZIP
jsPerf closest
Raw
closest-test-for-jsperf.html
<!DOCTYPE html>
<html>
<head>
<style>
name {
display: inline-block;
width: 200px;
}
name:after {
content: ": ";
}
time {
font-weight: bold;
}
time:after {
content: " ms";
font-weight: normal;
}
column {
display: inline-block;
max-width: 70px;
margin:5px;
vertical-align: bottom;
}
#graph {
display: block;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="found">
<div>
<div>
<div>
<div>
<div>
<div>
<span class="elem"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<code id="log">
jQuery closest vs native closest<br>
</code>
<div id="graph">
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
var jQuery1 = $.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
var jQuery2 = $.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
var jQuery3 = $.noConflict(true);
</script>
<script>
elem = document.querySelector('.elem');
elem1 = jQuery1(elem);
elem2 = jQuery2(elem);
elem3 = jQuery3(elem);
// polyfill from http://stackoverflow.com/a/35294561/3356679
if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector;
if (!Element.prototype.closest) Element.prototype.closest = function(selector) {
var el = this;
while (el) {
if (el.matches(selector)) {
return el;
}
el = el.parentElement;
}
};
// benchmark handler
var colors = ['#EF5350','#EC407A','#AB47BC','#7E57C2','#5C6BC0','#42A5F5','#29B6F6','#26C6DA','#26A69A','#66BB6A','#9CCC65','#D4E157','#FFEE58','#FFCA28','#FFA726','#FF7043','#8D6E63','#BDBDBD','#78909C',];
var color = 0;
var iterations = 5000;
document.querySelector('#log').innerHTML += '' + iterations + ' iterations<br>';
function bm(f, name) {
var start = Date.now();
var iter = iterations;
while (iter--) f();
var total = Date.now() - start;
var per = total / iterations;
console.log(name, total, 'ms total. ', per, ' per call.');
document.querySelector('#log').innerHTML += '\n<br><name>' + name + '</name><time>' + total + '</time> total. <time>' + per + '</time> per call.';
document.querySelector('#graph').innerHTML += '<column style="height:' + (10000 * per) + 'px;background-color: ' + colors[color] + ';">' + name + ' ' + per +'ms</column>';
color = (1 + color) % colors.length;
}
bm(function() {
a = elem.closest('.found');
}, 'native found');
bm(function() {
a = elem.closest('.notfound');
}, 'native not found');
bm(function() {
a = jQuery3(elem.closest('.found'));
}, 'native found wrapped');
bm(function() {
a = jQuery3(elem.closest('.notfound'));
}, 'native not found wrapped');
bm(function() {
a = elem1.closest('.found');
}, 'jQuery 1 found');
bm(function() {
a = elem1.closest('.notfound');
}, 'jQuery 1 not found');
bm(function() {
a = elem2.closest('.found');
}, 'jQuery 2 found');
bm(function() {
a = elem2.closest('.notfound');
}, 'jQuery 2 not found');
bm(function() {
a = elem3.closest('.found');
}, 'jQuery 3 found');
bm(function() {
a = elem3.closest('.notfound');
}, 'jQuery 3 not found');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment