Does jQuery sacrifice performance and code efficiency?

Racing — La course by Frédérique Voisin-Demery

Ollie R wrote to me asking whether using jQuery instead of pure JavaScript is at the cost of code efficiency and performance.

Short answer; yes. Performance is almost always sacrificed when adding layers of communication between the code you write and the underlying code which eventually executes.

However, the question of why we still use jQuery despite this is a far more interesting question.

You can have a read of Ollie’s full email below, and then if your curiosity is piqued please do have a read of my more in-depth discussion of jQuery vs JavaScript further down the page!

So I have been dabbling in a small amount of JQuery recently, as you mentioned it, and so far I must say that I am having mixed feelings about it.

As it says on the tin, JQuery is basically just JavaScipt, but set up so you can do more, faster, and with less code.

I’ve also been told that the largest web companies use it, like Google and Youtube.

But the thing I don’t get about JQuery, is that it is literally JUST JavaScript. By using JQuery, aren’t you just sacrificing efficiency for ease of coding?

There are certain things on my website that I know can be done in a multitude of ways; for example, I want the background of an element to flash red. JavaScript can do it, the UI upgrade of JQuery can do it, and even CSS can make an attempt at doing it. And I’m not sure which to pick.

To simplify this entire email, basically what I’m asking is does JQuery sacrifice performance and code efficiency?

Thankyou for any help you can provide

Why jQuery exists

The jQuery project began back in 2005, with the intention of simplifying the code required to find HTML elements on a page using CSS selectors.

Creating simpler code libraries on top of base languages has been commonplace for a long time. jQuery is only one of many such libraries created for JavaScript, and it was by no means the first.

One of jQuery’s main goals was to make working with JavaScript less verbose, meaning that a developer should be able to write a smaller and more concise piece of code to achieve the same outcome.

Observable performance impact

For most projects, the difference in performance between jQuery and JavaScript will not be noticeable. Web browsers and computers are fast enough these days that a person is far more likely to notice a delay from a site loading many individual files or large images than a delay from a slight discrepancy in JavaScript execution speed.

For small websites and simple web apps, the advantages of jQuery will often outweigh the minimal performance impact.

For larger websites and web apps with thousands of lines of code, or those processing large amounts of data using JavaScript then performance is absolutely something to consider.

People have created other JavaScript libraries to handle different use cases. Building a web-based game has very different requirements to building a chat app. You should choose a JavaScript library based on the requirements of your specific project, not just “because it’s what everybody else uses”.

There are JS libraries for doing a large amount of browser-based image processing, for 3D graphics, data visualisation, animation, or more traditional apps. You also may not use a library at all, opting to use plain JavaScript. You can even use a mix of both, writing plain JS for tasks you know would benefit from lower-level control.

Maintainability Advantages

So why is jQuery so popular anyway? In his email, Ollie poses the question:

“By using jQuery, aren’t you just sacrificing efficiency for ease of coding?”

Yes! But I think I would avoid using the word “just”. Ease of coding is an incredibly important aspect of good software development.

When writing a few lines of JavaScript to spruce up your website, ease of coding isn’t hugely important; you are the only person working on your site, and you have only a few lines to navigate, with a low level of complexity. In this case, I would recommend that you choose to use jQuery or JavaScript based entirely on personal preference. Use what makes you happy!

In a larger project, the ability for developers to quickly navigate code, make changes and add functionality translates directly into income for the company and benefits to their users. It also contributes to how happy developers will be working for the company.

The popularity of jQuery is largely due to its simple and consistent API. From the jQuery home page:

[jQuery] makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

The purpose of jQuery is to simplify the code you need to manipulate the elements on a page, and also watch for the events which might trigger those changes. Over time it has evolved to support other common use-cases such as Ajax, which is a way of loading data from an external source.

It does all of this in a way which will work consistently across different web browsers, even if the browsers have implemented JavaScript slightly differently. Yes, this is a thing! JavaScript doesn’t work exactly the same across every browser, as every browser is programmed differently and they evolve over time.

The jQuery project keeps track of these differences between browsers, so that when you run jQuery code, in the background they can run the right JavaScript code for the right browser.

You may notice that the jQuery download page says “jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8”. When jQuery 2 was released, they decided to stop supporting Internet Explorer versions lower than 9 so that they could simplify their own code and keep jQuery running as quickly as possible in modern browsers. Fewer “if” statements, lighter code!

It is probably helpful to know that browser differences were more of a problem several years ago, and not something you’re likely to have much trouble with these days as implementations of JavaScript have become more consistent. Unless you’re supporting very old browsers, you shouldn’t have any trouble writing plain JavaScript which is compatible with all modern browsers.

There are still a few browser bugs which jQuery does take care of for you, and if you’re up for a bit of technical reading then there’s a great document here which lists them all.

In Summary

It is rare these days for websites or apps to use plain JavaScript without additional supporting libraries or frameworks. That said, it is still entirely acceptable to use plain JavaScript on its own if that suits the needs of your project. It is unlikely that a relatively small library like JavaScript will have an observable impact on the performance of your website.

Frameworks and libraries exist to enable faster and easier creation of software, but there is not one choice to rule them all. Always make your framework choices based on their strengths, their intended use, and the requirements for the project at hand.

To get a better idea of exactly what jQuery is doing for you, take a look at the website “You Might Not Need jQuery” — scroll down, and you will see some comparisons of jQuery code against samples of plain JavaScript which have the same functionality.

References

• jQuery Foundation | History
• You Might Not Need jQuery
• jQuery’s browser bug workarounds