3

The performance difference is shown here.

Should I use jQuery("#id") or jQuery(document.getElementById("id"))?

Should I change all of my uses of jQuery("#id") to document.getElementById("id") because of the performance difference?

I prefer jQuery("#id") because it is easier to read and consistent with the CSS selector.

hutingung
  • 1,800
  • 16
  • 25
  • 1
    You should perform profiling on your web page to determine whether changing the selectors improve the performance significantly. – rink.attendant.6 Jul 22 '14 at 02:51
  • And `#id` is easier to read?!? I guess everyone has their own opinion. – rink.attendant.6 Jul 22 '14 at 02:52
  • 2
    ["premature optimization is the root of evil".](http://stackoverflow.com/questions/385506/when-is-optimisation-premature) – Ram Jul 22 '14 at 02:54
  • 1
    I use `$(document.getElementById(id))` when the `id` has characters that make the CSS id selector invalid, like `item#2` or `item.2`. Other than that, performance should be the last thing on your mind when using a convenience library like jQuery. Even then, I doubt this is the slowest part of your code. – Blender Jul 22 '14 at 02:56
  • In jQuery, to get the same result as document.getElementById, you can access the jQuery Object and get the first element in the object (Remember JavaScript objects act similar to associative arrays). – Alien Jul 22 '14 at 03:00
  • @Blender Do you just do that for readability? jQuery has the double-backslash (\\\) escape sequence for situations like that; see their [section on selectors](http://api.jquery.com/category/selectors/). Their example...an element with id="foo.bar", can use the selector $("#foo\\.bar"). – nbrooks Jul 22 '14 at 03:15
  • @undefined, you might right. In term of performance, it might not make much difference at all in one page. – hutingung Jul 22 '14 at 03:16
  • @rink.attendant.6 . It make not much difference(*almost zero). Our team got mixture use of #id and document.getElementById. I am thinking to make it consistent and stop the argument. – hutingung Jul 22 '14 at 03:18
  • Check jsperf http://jsperf.com/document-getelementbyid-vs-jquery/3 – bipsa Jul 22 '14 at 03:21
  • @bipsa, I am comparing $("#id") vs $(document.getElementById("")) not $("#id") vs document.getElementById – hutingung Jul 22 '14 at 03:23
  • That test is also included in the jsperf link provided. My opinion is always to prefer performance over readability or ease of writing. – bipsa Jul 22 '14 at 03:34
  • @nbrooks: But why do that when you can just forget about escaping it and drop it into `document.getElementById`? – Blender Jul 22 '14 at 05:04
  • @bipsa: Why are you using jQuery in the first place? Surely any sort of abstraction will just slow your code down? – Blender Jul 22 '14 at 05:07

2 Answers2

0

It's up to you, honestly.

A subjective question like this is going to get you a subjective answer, or, at best, a well thought-out list of pros and cons for each with a recommendation at the end.

I'll tell you this, though: using $(#id) saves you a lot of time if you're going to use it over and over again: look at the difference between the amount of characters in that and in $(document.getElementById(id)).

Don't use jQuery solely for this purpose, but if you're already using it and you're going to be referring to objects for DOM manipulation a lot, you might as well go the way that saves you some typing.

AstroCB
  • 12,337
  • 20
  • 57
  • 73
  • I think not only save times in coding. But saves time to argue with other programmer. – hutingung Jul 22 '14 at 03:21
  • @hutingung Well, yes: that's very true. – AstroCB Jul 22 '14 at 03:22
  • 1
    I actually means jQuery(document.getElementById("id")) rather than document.getElementById("id");. You changed the meaning of the question. – hutingung Jul 22 '14 at 03:26
  • @hutingung I see what you mean now: I wasn't sure which you were trying to refer to because you didn't close your parentheses, so it looked like a typo. My answer is the same, though. – AstroCB Jul 22 '14 at 03:27
  • @hutingung While you're right that I changed one aspect of the question, I didn't change *the meaning*. You're still asking the same thing, regardless, and all of the answers still apply. Wrapping `document.getElementById` in `jQuery()` just gives you access to jQuery's methods. – AstroCB Jul 22 '14 at 03:29
  • yes. I agreed with you. But I think @undefined comment is more concrete. And with that I think I will stick to $("#id") and make it consistent across the project. – hutingung Jul 22 '14 at 03:30
  • @hutingung That would be my preference, as well. In fact, now that you say you're using jQuery either way, that's an even better choice. – AstroCB Jul 22 '14 at 03:31
-1

If you are using jQuery, that is because of DOM abstraction, However all the current browsers, even IE6 respects document.getElementById(). Yes document.getElementById() is faster than $.('#id');

Sarbbottam
  • 5,410
  • 4
  • 30
  • 41