jQuery is a small JavaScript library that tries to make working with HTML easier. It provides more functions for manipulating elements on webpages, which make it useful for creating dynamic content. Is it the right choice for your website?

What is jQuery, and What is it Good For?

jQuery is everywhere; it's the most popular JS library by far, it's integrated into major systems like Wordpress, and JS questions on StackOverflow seem to always have answers in jQuery.

The library offers shorthand for many JS functions used for manipulating the HTML DOM, which can often be long and annoying to type. jQuery offers much shorter and cleaner syntax, and when you're typing

        document.getElementByID()
    

 a hundred times, reducing that to a single character can save a lot on development time.

jQuery's main allure is its selector function, used for finding elements in your HTML and getting a reference to them. For example, if you want to find an element by an ID, you can do:

$('#ID')

Which is a lot easier to type than:

document.getElementByID('ID')

Of course, this isn't the only way to select elements; jQuery can use nearly any CSS selector, all packaged in its $ function. The $ object also contains all other jQuery methods, like $.ajax().

Modern JavaScript actually has this same selection functionality with the document.querySelectorAll() function, so if you're only using jQuery to type "document.querySelectorAll()" a little less, you could forego jQuery by aliasing functions to $, or anything else:

window.$ = document.querySelectorAll

But this isn't all jQuery is good for; it is much better at working with DOM elements than vanilla JS, with traversal functions for parsing through a list of elements, and filters for search results. When selecting from HTML with vanilla JS, you're given a list of the literal DOM elements, but jQuery will return jQuery objects with additional methods and properties, which may be useful to you.

jQuery has a few other features, like animation and AJAX support, but pure CSS animations are often much faster, and libraries like axios handle AJAX requests much better than jQuery does, so you should really only be using jQuery for working with the DOM. jQuery now offers a 'slim' version without these features, which saves about 6kb when using the gzipped and minified file.

Will jQuery Slow Down My Website?

Adding a lot of Javascript libraries, frameworks, and bloat to your website is the easiest way to slow down page loading, especially for mobile users on poor connections. However, jQuery is a slight exception to this rule; it's very small, and it's used everywhere, so if you're referencing it from a popular CDN like Google's, there's a good chance any average user will have it pre-cached and won't need to download anything from your servers. However, this doesn't make it free to include, since it still needs to be loaded from the user's memory and executed, both of which will take time.

If they don't have it cached, you can use the minified and gzipped version, which is only 28.78 KB, probably less than the size of your HTML. This isn't better than nothing, and may add another second or so to your page load on slow 3G connections (without a cache).

Since jQuery is render-blocking, you'll need to load jQuery before displaying the page, which is not good for mobile users. If you're trying to make your mostly static site as fast as possible on all devices, you should probably opt for vanilla JavaScript over jQuery for this reason alone. But if your site is very dynamic, jQuery or other libraries are probably worth it to speed up development time. For internal company sites, admin panels, or anything that isn't end-user facing, you shouldn't worry about including it.

Be Aware of Janky Code

Since jQuery wraps around native Javascript functions, it will always be less performant than using vanilla JS, with the tradeoff being that it speeds up development time. jQuery is still very fast, but you'll want to watch for unoptimized code. Having too many laggy function calls can drop your app's framerate below the refresh rate, which will feel like janky microstuttering to the end user, or just straight up lag.

Use for loops rather than jQuery's each loops whenever you're looping over a significant number of items. They're both fast, but each is much slower, despite being much more readable. Most of the added time comes from the delay at the end of the loop before the next one starts, so loops with a small amount of code and long length will see a greater performance hit than loops with a lot of code and a few elements.

jQuery selectors are slow. In fact, doing anything with the DOM is slow, so you'll want to minimize the DOM related calls in your scripts. If you're referencing an item multiple times, cache it in a variable:

var $item = $('#item')

This prevents jQuery from running multiple searches every time you use the $() syntax to find an element. The $ in front of the variable is convention for naming jQuery object variables, and isn't required.

You can speed up jQuery's selection by using IDs over classes wherever possible. Selecting by ID is much faster than selecting by class, since jQuery just wraps around the native .getElementByID() method, rather than using its own selection engine. If you have to select by class, you should at least try to specify a context to tell jQuery where to look. For example, using:

$('.class', '#container')

Will be much faster than just searching for '.class', since jQuery will ignore everything in the DOM except the #container element.

Should I Use jQuery?

jQuery is a library---not a framework. A library provides a few useful tools for you to use, or solves a problem that vanilla JS struggles with. A framework, like React or Vue, provides a more rigid structure, and controls most of how your application works.

jQuery has simple syntax and can make your development a lot easier. If you're just adding a few simple things to your website, you probably don't need it, but if you're going to be doing a lot of dynamic content, jQuery can really speed up development time. If you're new to JS development, learning jQuery can help you bootstrap simple applications.

In the context of a large app though, the benefits become blurrier. jQuery isn't built to be the engine of large web apps, but it is often used in place of a more complicated framework for building simple dynamic pages. This works well for simple apps, but is very easy to outgrow. If you have a real need for jQuery to make your web app work, you probably also have a much greater need for the structure, modularity, and expandability offered by a full framework.

But, jQuery is much more performant than a huge framework like React, so if you want to stay closer to the metal, jQuery might be a good addition to clean up your code. If you're working in an existing codebase, jQuery is easy to add, compared to a full framework which may take a lot of refactoring, learning, and updating. Plus, jQuery is just way simpler than most web frameworks, and doesn't require you to rethink the way you code things.

jQuery is ultimately just a library for DOM manipulation, so if your use case requires more complex DOM manipulation than vanilla JS provides, jQuery might be for you.