Menu
I'm testing difference speed between JS and jQuery.
Velocity of this = document.getElementById('test'); - 0.048ms
Velocity of this = $('#test'); - 0.333ms
Ok.. pretty obvious why pure JS is faster.. but, if i test this:
var test = function(selector) {
var a = document.getElementById(selector);
}
test('test');
SPEED: 12.270ms
Why? And how jquery can be faster them this?
JQuery can't be faster than the native getElementById method. You can check it by yourself at jsperf.
Why? Because jQuery have to add its own object handling to the object list returned by the selector $('#...').
EDIT
As suggested by sirrocco, I answer the question. The range of performances you indicate are not correct. You should have a bug in your time measurements.
My test:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var start, end, i, time;
start = new Date().getTime();
for (i = 0; i < 500000; ++i) {
document.getElementById('test');
}
end = new Date().getTime();
time = end-start;
document.getElementById('res1').innerHTML = 'time = '+time+'ms';
start = new Date().getTime();
for (i = 0; i < 500000; ++i) {
$('#test');
}
end = new Date().getTime();
time = end-start;
document.getElementById('res2').innerHTML = 'time = '+time+'ms';
start = new Date().getTime();
for (i = 0; i < 500000; ++i) {
var test = function(selector) { var a = document.getElementById(selector); };
test('test');
}
end = new Date().getTime();
time = end-start;
document.getElementById('res3').innerHTML = 'time = '+time+'ms';
});
</script>
</head>
<body>
<pre>document.getElementById('test');</pre> <span id="res1">result</span></br>
</br>
<pre>$('#test');</pre> <span id="res2">result</span></br>
</br>
<pre> var test = function(selector) {
var a = document.getElementById(selector);
}
test('test');</pre> <span id="res3">result</span></br>
<span id="test">The element to find</span>
</body>
</html>
This is not the most beautiful code in the world but adding functions modify the way the browser optimize the loops. The results on a corei7+FF31 are :
document.getElementById('test');
time = 2ms
$('#test');
time = 680ms
var test = function(selector) {
var a = document.getElementById(selector);
}
test('test');
time = 33ms
The order of magnitude are not the ones you mentioned. But there is a difference between calling directly the native method and calling a function calling the native method.
Why? As I said previously, for jQuery it have to add its own object handling. And for your test with a function there is the time to create a new function object and to call it.
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
