When to use Vanilla JavaScript vs. jQuery?

When to use Vanilla JavaScript vs. jQuery?

I have noticed while monitoring/attempting to answer common jQuery questions, that there are certain practices using javascript, instead of jQuery, that actually enable you to write less and do … well the same amount. And may also yield performance benefits.
A specific example
$(this) vs this
Inside a click event referencing the clicked objects id
jQuery
$(this).attr(“id”);

Javascript
this.id;

Are there any other common practices like this? Where certain Javascript operations could be accomplished easier, without bringing jQuery into the mix. Or is this a rare case? (of a jQuery “shortcut” actually requiring more code)
EDIT : While I appreciate the answers regarding jQuery vs. plain javascript performance, I am actually looking for much more quantitative answers. While using jQuery, instances where one would actually be better off (readability/compactness) to use plain javascript instead of using $(). In addition to the example I gave in my original question.

Solutions/Answers:

Solution 1:

  • this.id (as you know)
  • this.value (on most input types. only issues I know are IE when a <select> doesn’t have value properties set on its <option> elements, or radio inputs in Safari.)
  • this.className to get or set an entire “class” property
  • this.selectedIndex against a <select> to get the selected index
  • this.options against a <select> to get a list of <option> elements
  • this.text against an <option> to get its text content
  • this.rows against a <table> to get a collection of <tr> elements
  • this.cells against a <tr> to get its cells (td & th)
  • this.parentNode to get a direct parent
  • this.checked to get the checked state of a checkbox Thanks @Tim Down
  • this.selected to get the selected state of an option Thanks @Tim Down
  • this.disabled to get the disabled state of an input Thanks @Tim Down
  • this.readOnly to get the readOnly state of an input Thanks @Tim Down
  • this.href against an <a> element to get its href
  • this.hostname against an <a> element to get the domain of its href
  • this.pathname against an <a> element to get the path of its href
  • this.search against an <a> element to get the querystring of its href
  • this.src against an element where it is valid to have a src

…I think you get the idea.

Related:  Prevent firing focus event when clicking on div

There will be times when performance is crucial. Like if you’re performing something in a loop many times over, you may want to ditch jQuery.

In general you can replace:

$(el).attr('someName');

with:

Solution 2:

The correct answer is that you’ll always take a performance penalty when using jQuery instead of ‘plain old’ native JavaScript. That’s because jQuery is a JavaScript Library. It is not some fancy new version of JavaScript.

The reason that jQuery is powerful is that it makes some things which are overly tedious in a cross-browser situation (AJAX is one of the best examples) and smooths over the inconsistencies between the myriad of available browsers and provides a consistent API. It also easily facilitates concepts like chaining, implied iteration, etc, to simplify working on groups of elements together.

Learning jQuery is no substitute for learning JavaScript. You should have a firm basis in the latter so that you fully appreciate what knowing the former is making easier for you.

— Edited to encompass comments —

As the comments are quick to point out (and I agree with 100%) the statements above refer to benchmarking code. A ‘native’ JavaScript solution (assuming it is well written) will outperform a jQuery solution that accomplishes the same thing in nearly every case (I’d love to see an example otherwise). jQuery does speed up development time, which is a significant benefit which I do not mean to downplay. It facilitates easy to read, easy to follow code, which is more than some developers are capable of creating on their own.

In my opinion then, the answer depends on what you’re attempting to achieve. If, as I presumed based on your reference to performance benefits, you’re after the best possible speed out of your application, then using jQuery introduces overhead every time you call $(). If you’re going for readability, consistency, cross browser compatibility, etc, then there are certainly reasons to favor jQuery over ‘native’ JavaScript.

Solution 3:

There’s a framework called… oh guess what? Vanilla JS. Hope you get the joke… 😀 It sacrifices code legibility for performance… Comparing it to jQuery bellow you can see that retrieving a DOM element by ID is almost 35X faster. 🙂

Related:  Node.js console.log vs console.info

So if you want performance you’d better try Vanilla JS and draw your own conclusions. Maybe you won’t experience JavaScript hanging the browser’s GUI/locking up the UI thread during intensive code like inside a for loop.

Vanilla JS is a fast, lightweight, cross-platform framework for
building incredible, powerful JavaScript applications.

On their homepage there’s some perf comparisons:

enter image description here

Solution 4:

There’s already an accepted answer but I believe no answer typed directly here can be comprehensive in its list of native javascript methods/attributes that has practically guaranteed cross-browser support. For that may I redirect you to quirksmode:

http://www.quirksmode.org/compatibility.html

It is perhaps the most comprehensive list of what works and what doesn’t work on what browser anywhere. Pay particular attention to the DOM section. It is a lot to read but the point is not to read it all but to use it as a reference.

When I started seriously writing web apps I printed out all the DOM tables and hung them on the wall so that I know at a glance what is safe to use and what requires hacks. These days I just google something like quirksmode parentNode compatibility when I have doubts.

Like anything else, judgement is mostly a matter of experience. I wouldn’t really recommend you to read the entire site and memorize all the issues to figure out when to use jQuery and when to use plain JS. Just be aware of the list. It’s easy enough to search. With time you will develop an instinct of when plain JS is preferable.


PS: PPK (the author of the site) also has a very nice book that I do recommend reading

Solution 5:

When:

  1. you know that there is unflinching cross-browser support for what you are doing, and
  2. it is not significantly more code to type, and
  3. it is not significantly less readable, and
  4. you are reasonably confident that jQuery will not choose different implementations based on the browser to achieve better performance, then:

use JavaScript. Otherwise use jQuery (if you can).

Related:  jQuery: Find next element that is not a sibling

Edit: This answer applies both when choosing to use jQuery overall versus leaving it out, as well as choosing whether to to use vanilla JS inside jQuery. Choosing between attr('id') and .id leans in favor of JS, while choosing between removeClass('foo') versus .className = .className.replace( new Regexp("(?:^|\\s+)"+foo+"(?:\\s+|$)",'g'), '' ) leans in favor of jQuery.

Solution 6:

Others’ answers have focused on the broad question of “jQuery vs. plain JS.” Judging from your OP, I think you were simply wondering when it’s better to use vanilla JS if you’ve already chosen to use jQuery. Your example is a perfect example of when you should use vanilla JS:

$(this).attr('id');

Is both slower and (in my opinion) less readable than:

this.id.

It’s slower because you have to spin up a new JS object just to retrieve the attribute the jQuery way. Now, if you’re going to be using $(this) to perform other operations, then by all means, store that jQuery object in a variable and operate with that. However, I’ve run into many situations where I just need an attribute from the element (like id or src).

Are there any other common practices
like this? Where certain Javascript
operations could be accomplished
easier, without bringing jQuery into
the mix. Or is this a rare case? (of a
jQuery “shortcut” actually requiring
more code)

I think the most common case is the one you describe in your post; people wrapping $(this) in a jQuery object unnecessarily. I see this most often with id and value (instead using $(this).val()).

Edit: Here‘s an article that explains why using jQuery in the attr() case is slower. Confession: stole it from the tag wiki, but I think it’s worth mentioning for the question.

Edit again: Given the readability/performance implications of just accessing attributes directly, I’d say a good rule of thumb is probably to try to to use this.<attributename> when possible. There are probably some instances where this won’t work because of browser inconsistencies, but it’s probably better to try this first and fall back on jQuery if it doesn’t work.