jQuery vs Native on 2000 items test
Performance test for seeking items in ul on fly with search string provided from input
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<input type=text />
<div>
jQuery average performance:<span id='jquery'></span>
</div>
<div>
Native average performance:<span id="native"></span>
</div>
<ul>
</ul>
JavaScript
$(document).ready(function() {
for(var i = 0; i < 2000; i++) {
$('<li>')
.text(randomString())
.appendTo('ul');
}
});
$('input').on('input', function() {
var text = $(this).val().toLowerCase();
if (!text || text == '') {
$('li').show();
} else {
//jquery test
var start = window.performance.now();
for(var i = 0; i < 100; i++) {
$('li').each(function(i, e) {
if($(e).text().toLowerCase().indexOf(text) < 0) {
$(e).hide();
} else {
$(e).show();
}
});
}
$("#jquery").text((window.performance.now() - start) / 100);
$('li').show();
//native test
start = window.performance.now();
for(var i = 0; i < 100; i++) {
var array = document.querySelectorAll('li');
array = Array.prototype.filter.call(array, function (obj) {
return obj.innerHTML.toLowerCase().indexOf(text) > -1;
});
for(var el of document.querySelectorAll('li')) {
el.style.display = 'none';
}
for(var el of array) {
el.style.display = 'list-item';
}
}
$("#native").text((window.performance.now() - start)/100);
}
})
function randomString()
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 20; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}