Jquery or Javascript: which is faster and more fit in this scenario

Question

I have this button

<input type="image" src="img/btn2.png" onClick="clearbtn()">

and it calls this function once the image is clicked

 function clearbtn() {
     document.getElementById("address").value = "Input Address Here";
     document.getElementById("res").value = "Results will be displayed here";
     document.getElementById("valid").value = "";
     document.getElementById("valid2").value = "";
     document.getElementById("cor").value = "Changes will be displayed here";
     document.getElementById("code").value = "";
     document.getElementById("placeholderImg").style.display = 'none';
     document.getElementById("street_number").value = "";
     document.getElementById("route").value = "";
     document.getElementById("locality").value = "";
     document.getElementById("administrative_area_level_1").value = "";
     document.getElementById("country").value = "";
     document.getElementById("postal_code").value = "";

     map.setCenter(defaultLatLng);
     map.setZoom(0);
     marker.setMap(null);
 }

My question is which is more faster and more suited for this task the one above or the one below? both of them works but my curiosity strikes as to whether which one gives the optimum/best performance for the said task.

   function clearbtn() {
        $('#address').val("Input Address Here");
        $('#res').val("Results will be displayed here");
        $('#valid').val("");
        $('#valid2').val("");
        $('#cor').val("Input Address Here");
        $('#code').val("Input Address Here");
        document.getElementById("placeholderImg").style.display = 'none';
        $('#street_number').val("Input Address Here");
    }

They both seem to do very different things, as the bottom `clearbtn()` does not do any work on `map` or `marker`. You seem to be comparing apples and oranges, not least worrying about premature optimization. That said, you'll find the `document.getElementById().value` fractionally quicker than `$(#).val()`. — Matt, Feb 07 '14 at 09:10
@Matt I didn't finish the one on the bottom but if it was complete it will do the exact same thing as the one above, but thank you for noticing and I appreciate your answer — Mr. Fox, Feb 07 '14 at 09:14

score 3 · Accepted Answer · edited May 23 '17 at 11:49

Javascript is obviously much faster than jQuery. As everytime you use jQuery on an element, you are calling the $ function, it will take some time (not noticable).

In your simple case Javascript is more suitable, But in a complex scenario jQuery is more helpfull, as it supports lot of features and most importantly resolves cross browser issues.

Find more Info from below sources:

If you want to improve jQuery performance, please go through below sources:

score 1 · Answer 2 · answered Feb 07 '14 at 09:12

1

Not only in this case, in each and every case an optimized javascript works faster than an optimized jquery. Reason is jquery is an wrapper over javascript. Indirectly jquery is going to execute javascript only.

answered Feb 07 '14 at 09:12

Karthik Surianarayanan

630
3
21

score 0 · Answer 3 · answered Feb 07 '14 at 09:12

Plain JavaScript is going to be always faster but in modern browsers, with a normal computer you are not going to notice. I guess the biggest gain would be not needing to load jQuery itself to run the jQuery version, but once it is loaded, the execution of both script is going to be very similar

score 0 · Answer 4 · answered Feb 07 '14 at 09:14

document.getElementById is faster.. this si direct JavaScript. $('#address') actually calls document.getElementById.

But arguably $('#address') is more readable.

val() is only the jQuery wrapper for value

The difference in performance here is really VERY small...

score 0 · Answer 5 · answered Feb 07 '14 at 09:14

0

Vanilla javascript is faster for your purpose. But there are cases where you may need to use jQuery for browser compatibilites and no headaches. When you really really need speed try using plain js. See this table for more details.

answered Feb 07 '14 at 09:14

Nicolae Olariu

2,487
2
18
30

score 0 · Answer 6 · answered Feb 07 '14 at 09:18

Jquery suits more than javascript.

 function clearbtn() {
        $('#address').val("Input Address Here");
        $('#res').val("Results will be displayed here");
        $('#valid').val("");
        $('#valid2').val("");
        $('#cor').val("Input Address Here");
        $('#code').val("Input Address Here");
        document.getElementById("placeholderImg").style.display = 'none';
        $('#street_number').val("Input Address Here");
    }

You can more optimize like as follows

function clearbtn() {
        $('#res').val("Results will be displayed here");
        $('#cor, #address, #code, #street_number').val("Input Address Here");   
        $('#valid, #valid2').val("");
        $('#placeholderImg').hide();
        }

Jquery or Javascript: which is faster and more fit in this scenario

6 Answers6