JavaScript style.display="none" or jQuery .hide() is more efficient?

Question

document.getElementById("elementId").style.display="none"

is used in JavaScript to hide an element. But in jQuery,

$("#elementId").hide();

is used for the same purpose. Which way is more efficient? I have seen a comparison between two jQuery function .hide() and .css("display","none") here.

But my problem is whether pure JavaScript is more efficient than jQuery?

Possible duplicate of [.hide() or display: none? jQuery](http://stackoverflow.com/questions/4396983/hide-or-display-none-jquery) — Somnath Muluk, Aug 22 '16 at 11:28

score 126 · Accepted Answer · answered Dec 03 '12 at 17:09

126

Talking about efficiency:

document.getElementById( 'elemtId' ).style.display = 'none';

What jQuery does with its .show() and .hide() methods is, that it remembers the last state of an element. That can come in handy sometimes, but since you asked about efficiency that doesn't matter here.

answered Dec 03 '12 at 17:09

jAndy

212,463
51
293
348

2

Yes this is more efficient but this isn't safe. In my job there is a HUGE web application which is pretty much entirely configurable, so depending on the context and configuration some items might or might not be in the page. If this element isn't present in the page, this WILL cause an error (using .style on an undefined object). With JQuery you won't have that problem, or if not you should check `if( document.getElementById( 'elemtId' ) )` before doing it. – dominicbri7 Oct 23 '15 at 13:45

score 28 · Answer 2 · answered Dec 03 '12 at 17:14

28

a = 2;

vs

a(2);
function a(nb) {
    lot;
    of = cross;
    browser();
    return handling(nb);
}

In your opinion, what do you think is going to be the fastest?

answered Dec 03 '12 at 17:14

Florian Margaine

50,873
14
87
110

2

This one made me laugh, and is the best answer, nice one. – Ciro Santilli新疆棉花TRUMP BAN BAD Oct 30 '14 at 10:38
Not the best explanation but the message of `a lot; of = cross; browser(); handling...` makes me not give u the downvote :P – Alejandro Vales Feb 04 '16 at 15:45
@Florian -- you forgot to define `browser` and `handling` -- this _may_ throw an error – Naftali aka Neal Sep 08 '16 at 14:38

score 26 · Answer 3 · answered Dec 03 '12 at 17:10

26

Efficiency isn't going to matter for something like this in 99.999999% of situations. Do whatever is easier to read and or maintain.

In my apps I usually rely on classes to provide hiding and showing, for example .addClass('isHidden')/.removeClass('isHidden') which would allow me to animate things with CSS3 if I wanted to. It provides more flexibility.

answered Dec 03 '12 at 17:10

Jamund Ferguson

15,537
3
40
49

2

I wouldn't say that. Depending on the number of calls, this *can become a factor*, since we're calling the jQuery constructor method each time. – jAndy Dec 03 '12 at 17:13
1

If you're doing this > 10,000 times in a second it may become noticeable. I can prove it :) – Jamund Ferguson Dec 03 '12 at 17:14
Love the link to jsperf.com/jquery-hide-vs-native33. Thank you! – Ace Feb 08 '13 at 18:22

score 6 · Answer 4 · answered Dec 03 '12 at 17:09

6

Yes.

Yes it is.

Vanilla JS is always more efficient.

answered Dec 03 '12 at 17:09

Naftali aka Neal

138,754
36
231
295

You always have to know what you are doing. You can even handle this Vanilla JS framework very inefficiently. – WΩLLE - ˈvɔlə Feb 23 '19 at 11:27

JavaScript style.display="none" or jQuery .hide() is more efficient?

4 Answers4

Linked